Микроразметка глазами разработчика

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

В настоящее время существует множество разных словарей:

• The Open Graph protocol (неофициальный сайт с русским переводом ruogp.me)
• Schema.org (неофициальный сайт с русским переводом ruschema.org)
• Микроформаты (частичный перевод на русский язык)
• Data vocabulary
• Dublin Core Metadata Initiative (DCMI)
• FOAF

По-сути, словарь — это «язык» с набором классов и свойств, определяющая суть содержимого на странице. Синтаксис же устанавливает способ использования словаря.

На мой взгляд, заслуживающими внимания остаются 3 популярных словаря: Open Graph, Shema.org и Микроформаты. Остальные форматы уходят в прошлое и их популярность с каждым годом уменьшается.

Open Graph — популярный словарь микроразметки для более красивого оформления отображаемых ссылок. Публикуемые ссылки приобретают расширенный вид и становятся более понятными. Еще Open Graph используется приложениями для социальной сети Facebook.

Теперь можно быстрее понимать суть информации при посещении страниц, например просматривая видео, читая анонс статьи или новости. Данную разметку прекрасно понимают и такие социальные сети как Вконтакте, Google+, Twitter, Одноклассники, LinkedIn, Pinterest и другие.

Использовать словарь очень легко. Вот 4 основных свойства для каждой страницы:

1. og:title — название объекта, например, фильм «Притяжение«.
2. og:type —  тип объекта, например, video.movie. В зависимости от выбранного типа, возможно указать дополнительные свойства.
3. og:image — URL изображения, описывающего объект.
4. og:url — канонический URL объекта, который будет использован в качестве постоянного идентификатора.

Не стану слишком задерживаться на подробном описании Open Graph, т.к. в сети много подобной информации. Здесь можно почитать про семантическую разметку Open Graph.

Schema.org — словарь появился по инициативе поисковых систем в 2011 году и поддерживается Яндекс, Google, Bing и Yahoo. Живой и гибкий словарь, который постоянно развивается и обсуждается участниками инициативной группы. Здесь содержится описание разных сущностей и их свойств (несколько сотен классов).

Любая разметка Schema.org производится в два шага:

1. Оборачивание описания определенного типа в контейнер с указанием схемы разметки:

   <div itemscope itemtype="http://schema.org/Organization" >
   ...
   </div>

2. Разметка отдельных свойств с указанием на конкретное свойство схемы:
   <span itemprop="streetAddress">Льва Толстого, 16</span>

Здесь можно дополнительно прочитать про семантическую разметку Schema.org.

Без сомнения данная разметка заслуживает внимания и использования в нынешних, и тем более в новых ваших проектах.

Микроформаты — это сущности поверх XHTML, с помощью которых можно легко описывать людей, события, теги и много другой информации на Web-страницах. Конечно, его популярность не сравнить с Open Graph и Schema.org.

На данный момент есть около 10 распространенных спецификаций микроформатов для нескольких предметных областей.

А вот поисковыми системами поддерживаются такие микроформаты:

• hCard — формат разметки контактной информации (адресов, телефонов и т. д.);
• hRecipe — формат для описания кулинарных рецептов;
• hReview — формат разметки отзывов;
• hProduct — формат разметки товаров.

Здесь можно дополнительно прочитать про использование микроформатов.

Для автоматизации можете воспользоваться мастером разметки структурированных данных и инструментом проверки структурированных данных. Вот еще один валидатор микроразметки. Возможно, потребуется авторизироваться на данных сайтах, чтобы воспользоваться инструментами.

Прочитав и изучив материалы из различных источников про семантическую разметку я решил отдать предпочтение двум словарям: Open Graph и Schema.org. Они современны и популярны, в сети огромное множество разных плагинов и решений, поддерживающих микроразметку.

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

Спасибо, получился небольшой обзор про разметку. Детальную информацию разнес по ссылкам для более глубокого индивидуального изучения ;-).