Блог Тимура Казанского

Микроразметка сайта легко и быстро


Всем привет! Сегодня я расскажу и покажу на примере, как сделать микроразметку или семантическую разметку вашего сайта легко и быстро.

И так, что такое микроразметка? Это разметка, которая позволяет осуществить логическое разделение информации на вашем сайте, для того чтобы поисковые роботы могли без всяких проблем определить, как устроен ваш сайт, т.е. быстро понять и все разложить по полочкам, где у вас на сайте находится статья, навигационное меню, комментарии, шапка, подвал и так далее.

Микроразметка состоит из словаря.

Словарь микроразметки – это коллекция данных, с помощью которых мы можем найти соответствующую тему или сущность сайта и соответствующие теги или свойства к ней.

В качестве словаря мы будем использовать наиболее популярный - schema.org.

Давайте действовать последовательно, представим, у нас есть сайт и нам нужно его разметить, что нужно сделать первым? Правильно, выбрать словарь, но так как мы уже определились с ним, то давайте перейдем на него.

Как только вы оказались на главной странице словаря с «приветствием», вам нужно перейти на весь список тематик разметки (список сущностей), для этого в навигационном меню нажимаем по ссылке «Schemas», далее находим ссылку «full list of types, shown on one page» где мы увидим полный список сущностей с определенной тематикой разметки.

Переходим на сайт словаря

Ссылка на полный список сущностей

Если нам нужно разметить сайт, то находим сущность «WebSite». Блог? Не вопрос, ищем сущность (значение) «Blog», а может быть у вас интернет магазин? Тогда вам в «Store» и так далее.

Выбираем сущность website

Сущность для статьи

Определение сущности для сайта:

itemscope itemType="http://schema.org/WebSite"

Тут думаю ничего сложного нет, идем дальше…

Так как нам нужно разметить веб сайт, мы выбираем сущность «WebSite» и переходим по ссылке, что мы в итоге видим? Во-первых это две таблицы, первая таблица с глобальной сущностью «CreateWork», которая используется для разметки видео, аудио, изображений, словом для разметки страниц с творческими работами.

Вторая таблица с сущностью «Thing», которая описывает более обобщенную разметку страницы. Во-вторых, таблицы делятся на две колонки. Все что в левой колонке – это свойства сущности Website, в правой, ее описание.

Свойства сущности website

Определение свойства сущности «WebSite»

itemprop="name"

Все просто, а теперь давайте перейдем к примеру и посмотрим, как это будет выглядеть.

Примеры

<div itemscope itemType="http://schema.org/WebSite"> указываем сущность для блока с кратким описанием статьи
<h1 itemprop="name">Тут заголовок </h1> свойство сущности для заголовка
<img src="" itemprop="image"> свойство для изображения
<p itemprop="description">Описание </p> свойство для описания
</div> - закрываем блок с сущностью «WebSite»

Разметка сайта

Главная страница сайта

Микроразметка на примере

Пост сайта

Семантическая разметка сайта

На этом, я думаю, буду заканчивать данную статью и искренне надеюсь, что она оказалось для вас полезной, если есть какие-то вопросы или что-то непонятно, прошу писать в комментариях. В следующей статье, я приведу полный пример разметки блога, чтобы уже точно все встало на свои места, в общем, с вами был Тимур Казанский, всем пока и до скорых встреч.

Категория: Все для создания сайтов

Читайте также - самые интересные истории обо мне

Оставьте ваш комментарий

Комментарии: 0