Что такое микроразметка и зачем она нужна

С помощью микроразметки в анонс страницы или сниппет можно добавить полезную информацию для посетителей сайта:

● изображения;
● рейтинг товаров;
● контактные данные;
● уникальное торговое предложение (УТП);
● разделы сайта;
● категории товаров;
● описание услуг.

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

Задачи микроразметки отличаются для пользователей и экспертов, которые занимаются продвижением сайтов.

Существует множество словарей метаданных. Вот три самых востребованных:

1. Schema.org — популярный ресурс для разметки веб-страниц и сообщений электронной почты: такие сервисы, как Яндекс, Microsoft, Pinterest и другие, используют его для улучшения пользовательского опыта. Schema.org содержит несколько сотен типов микроразметки, и все они подходят для размещения почти любой информации: о компании, эксперте, товаре или услуге. Чаще всего используются:

● статья (Article),
● отзыв (Review),
● шапка сайта (WPHeader),
● хлебные крошки (Breadcrumbs),
● меню (SiteNavigationElement),
● список товаров (Products list),
● карточка товара (Product → Offer),
● адреса и организации (Organization и LocalBusiness).

2. Open Graph. Разработан специально для соцсетей компанией Facebook*. С его помощью можно настроить превью, которое формируется во время репоста ссылки на сайт и передачи информации другим интернет-сервисам. Словарём Open Graph для микроразметки пользуются ВКонтакте, WhatsApp, Telegram, Viber, LinkedIn, Pinterest, Slack.

3. Микроформаты. Это объединённый стандарт синтаксиса и словаря. Менее популярен из-за ограничений: вместе с ним нельзя использовать другие словари. С помощью микроформатов можно пересылать сообщения, комментарии, лайки и репосты с одного сайта на другой, а также отображать рейтинги на странице результатов поиска. Если нужно больше функций, разработчики используют OpenGraph и Schema.org.

Существует четыре вида синтаксиса, которые помогают «обучить» поисковую систему: RDFa, микроформаты, JSON-LD и микроданные. Разберём каждый из них:

● RDFa описывает любую сущность — человека, объект, событие. Для этого используют триплеты вида «субъект–предикат–объект», или «подлежащее, сказуемое, дополнение».

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

● Микроформаты в контексте синтаксиса вносят сведения о товарах, событиях, персоналиях и так далее. Для этого используются стандартные HTML-элементы. Микроформаты помогают явно указать смысловое значение блоков и сделать их доступными для обработки роботами.

Например, поисковая система Яндекса поддерживает микроформаты hCard — для описания контактной информации и hRecipe — чтобы сделать разметку кулинарных рецептов.

● JSON-LD — метод передачи информации, реализованный с использованием текстового формата JSON в JavaScript. JSON-LD используется, когда необходимо указать объекты и подробно раскрыть их свойства. Обычно синтаксис применяют для разметки в рамках словаря Schema.org, а за счет JavaScript эта информация становится читаемой для компьютера.

Появление этого метода было настоящим прорывом: у разработчиков появился синтаксис, который, в отличие от других, позволил помещать элементы не в код HTML-страницы, а сразу в скриптовый тег — <script>. Он быстро стал одним из самых распространенных форматов синтаксиса для разметки контента.

Данные JSON-LD помещают в HTML-тег <script>, чтобы их можно было автоматически обрабатывать на странице

JSON-LD облегчает структурирование данных поисковыми роботами и распознавание понятий, а также позволяет размещать сразу несколько элементов на одной странице. Например, если речь идёт о том же рецепте печенья, то метод JSON-LD позволит разложить информацию «по полочкам». Так пользователь найдёт нужную страницу, ориентируясь не только на точечный запрос, но и на дополнительные параметры разметки: какой у печенья будет состав, сколько понадобится времени, чтобы его приготовить, какие продукты потребуются.

● Микроданные (англ. HTML microdata) — общепризнанный стандарт разметки страниц HTML с помощью атрибутов и описательных тегов, которые позволяют поисковым системам читать содержимое сайта и автоматически «забирать» необходимые данные. Когда сайт собираются рекламировать, микроданные используют для более полной индексации — добавления информации о сайте в базы данных поисковых систем.

Главное неудобство в использовании микроданных — здесь нельзя добавить фрагмент кода в раздел , придётся помечать каждый HTML-элемент отдельно. Поэтому в основном микроданные используют в тех поисковых системах, которые только частично поддерживают JSON-LD.

Дальше действуем по алгоритму:

1. Подбираем подходящий словарь на сайте схемы https://schema.org/. Для описания секции выбираем словарь Organization.

2. Указываем атрибуты, чтобы поисковый робот смог увидеть, что данные в секции используют разметку словарем.

Добавляем атрибут itemscope, который задает область связанных метаданных. Здесь же включаем связанный атрибут itemtype, где в качестве значения указываем URL-адрес используемого словаря Organization. В результате получается запись вида «ключ-значение»: itemtype="<http://schema.org/Organization>"

3. Размечаем адрес организации. Schema.org предоставляет довольно широкий выбор вариантов, как можно разметить адрес. В этом случае нужно использовать атрибут itemprop, который задает свойство объекта для его описания. Используем itemprop со значением address, чтобы выделить в разметке адрес организации: itemprop="address"

Важный момент — itemprop заведомо оборачивает данные об адресе: Само описание данных «Адрес:» сюда включать не нужно

Аналогичным образом используем itemprop для разметки контактных данных: телефона и адреса электронной почты. В качестве значения используем telephone и email.

В итоге получаем запись вида itemprop="telephone" и itemprop="email"

Микроразметка для секции с данными об организации готова. Теперь нужно проверить её корректность с помощью одного из валидаторов: Google, Yandex или Schema.org. Даже если кажется, что ошибок нет, полезно специально «сломать» микроразметку и посмотреть, что посоветует исправить валидатор.

Со всей необходимой документацией о текущих стандартах микроразметки можно ознакомиться на отдельной help-странице от Яндекса: там много полезной информации для начинающих вебмастеров.

* сервис предоставляется организацией, признанной экстремистской на территории РФ