Микроразметка и SEO: какую микроразметку и в каких случаях использовать? Гайды по настройке

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

Словари или «способы» микроразметки

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

Schema.org

Это наиболее популярный способ микроразметки контента. Поддерживается с 2011 года поисковыми гигантами: Google, Яндекс, Yahoo, Bing. С его помощью можно выводить различные полезные характеристики в сниппет. Например рейтинг, отзывы, цены и др.:

В Schema.org есть три основных атрибута, обязательных к использованию в каждой микроразметке:

• itemscope — указывает, какой объект мы используем;
• itemtype — всегда идет после itemscope и указывает, какой тип объекта будет размечен. В нашем примере, это Product (Продукт) — Iphone 6;
• itemprop — указывает свойства выбранного объекта, в нашем примере, это цена, описание и т.д.

При помощи разметки Schema.org можно размечать не только товары, но и статьи, фильмы, рецепты и т.д. К примеру, полный список поддерживаемых структурируемых данных Schema.org в Google можно посмотреть тут - https://developers.google.com/search/reference/overview?hl=ru:

А для их проверки на сайте стоит использовать сервис https://search.google.com/test/rich-results?hl=ru

Размеченный участок кода выглядит следующим образом:

И вот этот же участок через сервис проверки:

Open Graph

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

Например, вот сниппет страницы сайта при скидывании в Телеграмме, где размечено название сайта, УРЛ, заголовок и описание:

А вот сниппет похожей страницы, где дополнительно размечено изображение:

Для создания кода разметки используют теги синтаксиса:

• og:title — заголовок объекта репоста;
• og:description — описание объекта;
• og:image — изображение;
• og:url — ссылка на расположение объекта;
• og:type — тип объекта.

Пример кода с разметкой Open Graph:

Микроформаты

Словарь микроразметки Microformats.org создан в 2007 году. Он включает разные типы объектов и описания их свойств. Этим словарём описывают товары, мероприятия, компании, рецепты и другие сущности с набором уникальных характеристик. Из всего списка микроформатов чаще используется hCard, который описывает контактные данные людей и организаций.

Участок кода с использованием микроформатов будет выглядеть так:

Синтаксис микроразметки

Кроме основных атрибутов itemtype, itemscope, itemprope из Schema.org можно использовать доп. Элементы:

1. RDFa и RDFa Lite для описания разных типов объектов через атрибуты xmlns:v=”http://rdf.data-vocabulary.org/#, property=”v:title”, typeof=”v:Breadcrumb” и другие.
2. JSON-LD используется для описания объектов связанных данных. С целью адаптации разметки к поисковикам, они помещаются в теги