Микроразметка и 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/docs?hl=ru:

А для их проверки на сайте стоит использовать сервис https://search.google.com/test/rich-results. Размеченный участок кода выглядит следующим образом:

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

Open Graph

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

Где:

• “@type”: “Product” – указание типа микроразметки
• “sku”: “1548189” – артикул товара
• “name”: “Apple iPhone 7 32Gb” – название товара
• “image”: ссылка на изображение товара

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

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

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

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

Микроразметка хлебных крошек на страницах сайта. Выглядит правильная мироразметка ХК так:

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

Organization

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

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:

При разметке товаров стоит учесть, что если на товаре нет отзывов, то будет предупреждение в сервисе проверки – это не ошибка, это нормально. Также, есть чаще всего есть еще поля, которые отсутствуют, и их можно давать статично:

Рекомендую:

• “brand” – использовать название сайта
• “sku” – использовать артикул
• “description” – использовать дескрипшен
• Глобальный идентификатор товара, например код GTIN, MPN или ISBN – использовать артикул
• “priceValidUntil” – указать дату, до которой цена актуальна. Можно делать автогенерацией на месяц вперед. Или использовать указанную дату на сайте если она есть
• “url” – указать УРЛ страницы товара
• “availability” – наличие товара. Варианты:
  • in_stock – в_наличии
  • out_of_stock – нет_в_наличии]
  • preorder – предзаказ
• Недопустимый формат значения цены для элемента данных “price” – в цене не должно быть пробелов, точек, запятых и т.д. Только цифры.

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

Под микроразметкой категорий я имею в виду разметку кол-ва товаров и минимальной/максимальной цены в категории, которые могут быть добавлены в сниппет страницы. Данная разметка строится на основе вышеупомянутой микроразметки товаров Product. Пример – https://touch.com.ua/Telefony-iPhone/:

Как выглядит сниппет:

В чем же заключается разметка? Если у товаров основной элемент разметки это тег offer, то для категорий это offers, в котором, собственно, и указывается кол-во товаров и диапазон цен + можно вывести средний рейтинг и кол-во отзывов по товарам категории:

• @type – Product
• name – указываем название категории или Н1
• aggregateRating
• @type – AggregateRating
• ratingValue – средний рейтинг по всем товарам категории
• reviewCount – кол-во отзывов
• bestRating – лучшая возможная оценка
• offers
• @type – AggregateOffer
• lowPrice– цена самого дешевого товара в категории
• highPrice– цена самого дорогого товара в категории
• priceCurrency – указываем валюту

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

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

• @type – Review
• reviewBody – текст отзыва
• datePublished – дата публикации
• author
• @type – Person
• Name – Кто оставил отзыв
• reviewRating
• @type – Rating
• ratingValue – Оценка

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

Часто задаваемые вопросы (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% случаев. Как же красочно выглядел сниппет:

И как стало:

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

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 и валидность сохранится):

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

• itemprop=”mainEntityOfPage” — Основная страница объекта, можно указать каноническую ссылку. Данное свойство является необязательным, но Google рекомендует его заполнять.
• itemprop=”image” — Ссылка на картинку материала, передаем её через атрибут link, так что пользователи её не увидят в контенте, а вот поисковые роботы схавают.
• itemprop=”headline name” — Заголовок материала.
• itemprop=”description” — Короткое описание материала, желательно не более 150 символов.
• itemprop=”author” — Автор материала.
• itemprop=”datePublished” — Дата публикации материала, указывайте в формате ГГГГ-ММ-ДД.
• itemprop=”dateModified” — Дата обновления материала, указывайте в формате ГГГГ-ММ-ДД.
• itemprop=”publisher” — Для этого свойства необходимо использовать объект schema.org/Organization.
• itemprop=”logo” — URL картинки, например, логотип сайта. Для этого свойства используем объект schema.org/ImageObject.
• itemprop=”url image” — URL логотипа.
• itemprop=”name” — Название сайта / организации.
• itemprop=”telephone” — Телефон можно оставить пустым, ну или если он у вас есть, заполнить.
• itemprop=”address” — Тут я указываю просто страну.
• itemprop=”articleBody” — Тело материала.

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

Страница вопроса с ответами – это веб-страница, на которой после одного конкретного вопроса идут ответы. Для таких страниц можно использовать следующие типы разметки schema.org: QAPage, Question и Answer. Если разметка реализована правильно, то в результатах поиска могут появляться расширенные результаты, которые помогают привлечь на сайт подходящую аудиторию через Google Поиск. Ниже представлен пример результата по запросу “Как вытащить застрявший кабель из USB-порта?” при наличии нужной разметки на странице:

Требования к контенту:

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

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

• Book
• Карусель
• Course
• Отзыв критика
• Event
• Инструкции
• Профессиональное обучение
• Movie
• Recipe
• Окно поиска по сайту
• Приложение
• Подписка и платный контент
• Video

По всем этим микроразметкам рекомендую брать информацию у проверенного источника – Гугла: https://developers.google.com/search/docs?hl=ru

Александр Романенко

Team Lead/Senior SEO-специалист

Страница автора