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

27 ноября 2020

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

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

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

Schema.org

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

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

При помощи разметки 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 пост будет содержать заголовок, картинку и описание.

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

Сниппет сайта в телеграмме без микроразметки

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

Сниппет сайта в телеграмме с микроразметкой изображения

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

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

Пример кода с разметкой 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 используется для описания объектов связанных данных. С целью адаптации разметки к поисковикам, они помещаются в теги <script>. В RDFa и JSON-LD данные представлены в формате «ключ-значение». Пример:

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

Микроразметка для Яндекс и Google

Наличие микроразметки на сайте – один из официально подтвержденных факторов ранжирования (о чем сообщил представитель Google Gary Illyes). В своих рекомендациях поисковый гигант Google рекомендует использовать микроразметку JSON-LD (о чем говорится в официальном «Руководстве» Google).

Условно (очень грубо) можно разделить микроразметки на несколько типов: для интернет-магазинов, для статейного сайта, общие.

Основные микроразметки

BreadcrumbList (строки навигации)

Микроразметка хлебных крошек на страницах сайта. Выглядит правильная мироразметка ХК так:
Пример микроразметки хлебных крошек
Часто попадаются случаи на первый взгляд корректной разметки ХК, но не правильной на самом деле – это когда размечают каждую хлебную крошку по отдельности.

Organization

Общая микроразметка контактных данных для сайта, подойдет для всех контактов и любого типа сайта. Пример:
Пример микроразметки контактов Organization

LocalBusiness

Микроразметка для отдельного бизнеса или филиал организации имеющие точное физическое местоположение. Примеры LocalBusiness это ресторан, ресторан сети ресторанов, филиал банка, клуб, боулинг и т.д. Пример:
Пример микроразметки контактовLocalBusiness, локальной компании

ImageObject

Атрибут itemprop=»image» позволяет роботам быстро распознавать информацию о картинках. Достаточно будет указать ссылку на изображение, описание, название картинки, подпись, размеры изображения. Пример:
Пример микроразметки изображений

Review

Если на страницах товаров есть отзывы, их также можно разметить при помощи свойства Review. В результате в выдаче Google в сниппете появится рейтинг и отзывы: В коде сайта необходимо указать следующие атрибуты.
Пример микроразметки отзывов

Article

Микроразметка статьи позволяет сделать сниппет более структурированным и человекочитаемым. Следует найти файл, который отвечает за обзор статей. Например, это может быть: single.php. Для начала находим тег, отвечающий за вывод контента, и вставляем нужный атрибут.
Пример общей микроразметки статьи

Product

Пример микроразметки товаров

Использование микроразметок на сайтах

Что размечаем:

  1. Хлебные крошки
  2. Контакты
  3. Товары
  4. Категории
  5. Отзывы (входит в товары)
  6. Рейтинг (входит в товары)
  7. Вопрос-ответ
  8. Статьи

Товары

Если по разметке ХК и контактов все понятно, то с товарными позициями уже интереснее. Размечать у товара нужно все, есть конечно основной набор данных, которые должны быть размечены для обработки поисковиками, но желательно разметить все, чем больше данных – тем лучше сниппет может быть.

Пример отличной микроразметки товара — https://eplio.com.ua/bu-apple-iphone-8-plus-256gb-space-gray.html:
Сниппет страницы товара с полной микроразметкой Product
Код страницы товара с полной микроразметкой Product
Код страницы товара с полной микроразметкой Product
При разметке товаров стоит учесть, что если на товаре нет отзывов, то будет предупреждение в сервисе проверки – это не ошибка, это нормально. Также, есть чаще всего есть еще поля, которые отсутствуют, и их можно давать статично:
Возможные ошибки в микроразметке товара
Возможные ошибки в микроразметке товара
Рекомендую:

Если у товара есть характеристики, то их тоже можно разметить, пример:
Микроразметка характеристик товара

Под микроразметкой категорий я имею в виду разметку кол-ва товаров и минимальной/максимальной цены в категории, которые могут быть добавлены в сниппет страницы. Данная разметка строится на основе вышеупомянутой микроразметки товаров Product. Пример — https://touch.com.ua/Telefony-iPhone/:
Микроразметка категорий товаров
Как выглядит сниппет:
Сниппет страницы категории с микроразметкой
В чем же заключается разметка? Если у товаров основной элемент разметки это тег offer, то для категорий это offers, в котором, собственно, и указывается кол-во товаров и диапазон цен + можно вывести средний рейтинг и кол-во отзывов по товарам категории:
Микроразметка категорий товаров в сервисе проверки от Гугл

Отзывы (входит в товары)

В разметке отзывов ничего особенного нет, тем более что она входит в микроразметку товаров по умолчанию, но для общего понимания в случае каких-то ошибок, я пробегусь по тегам микроразметки. Пример самой разметки:
Микроразметка отзывов в сервисе проверки от Гугл

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

Часто задаваемые вопросы (FAQPage)

Одно из последних нововведений в плане микроразметки для Google. Позволяет существенно расширить сниппет за счет вывода от 2 до 4 часто задаваемых вопросов по теме поискового запроса. До 19.07.2020 работало почти во всех случаях, можно было особо не заморачиваться и добавлять сквозной блок, но потом Google видимо понял, что при помощи данной разметки начали сильно манипулировать поисковой выдачей (сниппет на 70% дисплея у мобильных устройств) и сильно ограничил вывод шаблонных блоков, а сквозные вообще пофиксил (исключения есть конечно, но они встречаются редко, на то и исключения).

Интересненько! Например, вы настроили себе микроразметку FAQPage (все проверки пройдены) для страниц и решили ее проверить, как обычно это и делают через site:domain.ru и поехали смотреть, правильно ли так делать? Да, но нет. Объясняю:

  1. Данные при проверке через site:domain.ru и реальность – разные вещи!
  2. Всегда проверяйте данные и микроразметке через Google Search Console
  3. Правильность микроразметки не гарантирует вывод данных в сниппет

Пример «Ожидание»:
Сниппет страницы с микроразметкой Вопрос-ответ при ручной проверке
Реальность (да, реальность сеошника жестока):
Реальный сниппет страницы с микроразметкой Вопрос-ответ в результатах поиска
Так почему же Гугл не выводит вопрос-ответ в сниппет, если все правильно сделано? Тут все дело в новых алгоритмах, которые апдейтнули 19 июля 2020 года. Если вопросы и ответы не связаны релевантностью или интентом к поисковому запросу – выводиться они не будут. Соответственно для разных поисковых запросов сниппет одной и той же страницы может быть и с вопросами, и без них. Или по одному запросу будет выведено 2 вопроса и ответа, а по-другому – 4.

И последним важным изменением стала отмена вывода emodji для вопросов и ответов примерно в 99% случаев. Как же красочно выглядел сниппет:
Сниппет страницы с микроразметкой FAQPage с эмодзи
И как стало:
Сниппет страницы с микроразметкой FAQPage без эмодзи
Так как же настроить вопросы-ответы, чтобы иметь шансы на расширенный сниппет? Мой способ состоит в следующем:

Контентные сайты – писать вопросы-ответы из СНЧ запросов, как правило большинство таких запросов и есть вопросами по теме, которую вы описываете. Идеально вообще писать текст на страницы и вместе с ним несколько вопросов и ответов, чтобы полностью раскрыть тему.

Интернет-магазины – тут однозначно стоит использовать автогенерилку ответов. Что чаще всего интересует пользователей, которые ищут что-то на покупку:

  1. Цены – дешевые и дорогие товары
  2. Популярные товары – всегда интересно что берут другие
  3. Отзывы – важно, также ищут товары с большим кол-вом отзывов
  4. Ассортимент – в целом важен ассортимент магазина

Все вышеописанные данные есть на страницах магазинов, а значит программисты смогут их использовать в автогенерилке. Пример того, как это реализовать (подчеркнутые – динамические данные):
Пример реализации автогенерируемых частых вопросов на странице категории
По другим вопросам вообще идет вывод товаров:
Пример реализации автогенерируемых частых вопросов на странице категории
Или категорий:
Пример реализации автогенерируемых частых вопросов на странице категории
В выдаче так:
Сниппет страницы категории с микроразметкой частых вопросов

Статьи

«Разметка Article позволяет Google лучше интерпретировать контент страниц и показывать наиболее подходящие заголовки, изображения и даты публикации статей в расширенных результатах типа Article.»

Так говорит сам Google!

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

Существует 3 варианта такой микроразметки:

  1. https://schema.org/Article — Общая схема, подходящая всем текстовым материалам.
  2. https://schema.org/NewsArticle — Схема для разметки новостных статей.
  3. https://schema.org/BlogPosting — Схема для разметки статей в блоге.

Пример универсальной микроразметке (замените общий объект Article на NewsArticle или на BlogPosting и валидность сохранится):

<div itemscope itemtype=»https://schema.org/Article»><link itemprop=»mainEntityOfPage» href=»https://example.ru/» /><link itemprop=»image» href=»image»>

<meta itemprop=»headline name» content=»Название Статьи»>

<meta itemprop=»description»

content=»Обязательное краткое описание статьи для Яндекса длиной от 50 до 150 символов.»>

<meta itemprop=»author» content=»автор статьи»>

<meta itemprop=»datePublished» datetime=»2010-07-03″ content=»2010-07-03″>

<meta itemprop=»dateModified» datetime=»2018-09-15″ content=»2018-09-15″>

<div itemprop=»publisher» itemscope itemtype=»https://schema.org/Organization»>

<div itemprop=»logo» itemscope itemtype=»https://schema.org/ImageObject»>

<img itemprop=»url image» src=»images/logo.png» alt=»Описание картинки» title=»Описание картинки» style=»display:none;»/>

</div>

<meta itemprop=»name» content=»название сайта»>

<meta itemprop=»telephone» content=»»>

<meta itemprop=»address» content=»Россия»>

</div>

<p>Интро</p>

<span itemprop=»articleBody»>Контент</span>

</div>

Давайте разберем её:

Вопросы-ответы (QAPage)

Страница вопроса с ответами – это веб-страница, на которой после одного конкретного вопроса идут ответы. Для таких страниц можно использовать следующие типы разметки schema.org: QAPage, Question и Answer.

Если разметка реализована правильно, то в результатах поиска могут появляться расширенные результаты, которые помогают привлечь на сайт подходящую аудиторию через Google Поиск. Ниже представлен пример результата по запросу «Как вытащить застрявший кабель из USB-порта?» при наличии нужной разметки на странице:
Быстрые плитки в сниппете с микроразметкой QAPage
Требования к контенту:

  1. Разметку нужно применять для отбельной страницы с вопросами и ответами, на которой есть возможность задать вопрос или оставить ответ. Если на вопрос дан ответ и нет возможности добавить другие ответы, то нужно использовать разметку FAQPage.
  2. Не применяйте разметку QAPage на всех страницах сайта или форума, если не весь контент отвечает указанным требованиям. Например, на форуме может быть одновременно множество тем-вопросов, для которых разметка подходит, и не связанных с вопросами страниц, для которых она не подходит.
  3. Не размечайте при помощи QAPage страницы с ответами на часто задаваемые вопросы или с несколькими вопросами. Разметка QAPage предназначена для страниц, посвященных какому-то одному вопросу и ответам на него.
  4. Тип Answer предназначен только для ответов на вопросы. Комментарии по поводу вопросов или ответов размечать с помощью типа Answer не следует.
  5. Для показа в виде расширенных результатов не подходят вопросы и ответы, в которых содержатся непристойные, грубые, оскорбительные, дискриминационные высказывания, материалы сексуального характера, сцены насилия, а также призывы к опасным или противоправным действиям.

Другие менее популярные микроразметки и ссылки на информацию по ним

По всем этим микроразметкам рекомендую брать информацию у проверенного источника – Гугла:

https://developers.google.com/search/reference/overview?hl=ru
Список поддерживаемых микроразметок от Гугл

похожие статьи
подписаться: