Микроразметка сайта: что это, виды, как добавить на сайт и проверить

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

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

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

Микроразметка — это специальная разметка данных на странице, которая состоит из кода с тегами и атрибутами. Они выделяют конкретную информацию, которую мы хотим сделать видимой для поисковиков. Например, цену, контакты, логотип компании.

Как это выглядит в поисковиках? Допустим, мы хотим купить iPhone и начинаем искать в поисковике подходящие магазины. Смотрим, как сниппеты отображаются в результатах поиска.

В Яндексе без разметки:

С разметкой:

В Google без разметки:

С разметкой:

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

Еще можно заметить расширенные сниппеты с картинками. Они тоже создаются при помощи микроразметки.

Что это дает в плане SEO:

1. Страница становится более видимой и структурированной для поисковика. Если например, пользователь ищет телефон через ключевик «iPhone 12 цена» или «iPhone 11 отзывы», большая вероятность, что магазины с микроразметкой по этим данным будут выше в результатах поиска, чем конкуренты без разметки. Но микроразметка — не решающий фактор ранжирования, а лишь дополнительный.
2. Сниппеты с микроразметкой отличаются визуально от обычных сниппетов. По ним чаще кликают. А это улучшает поведенческие факторы, и поисковик начинает чаще выдавать страницу (или весь сайт) в выдаче.

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

Какую информацию можно выделить при помощи микроразметки:

1. название организации;
2. логотип;
3. телефон и другие контактные данные;
4. адрес;
5. отзывы;
6. рейтинг;
7. характеристики товара;
8. рецепты;
9. курсы;
10. емейл;
11. автора контента;
12. даты;
13. хлебные крошки;
14. афиши мероприятий;
15. вакансии;
16. ссылки на другие страницы сайта;
17. ссылки на категории;
18. информацию о фильме — название, рейтинг, дату выхода, имя режиссера, язык озвучки.

Каким сайтам выгодно добавлять микроразметку: интернет-магазинам, онлайн-кинотеатрам, сайтам-отзовикам, сайтам с рецептами, информационным блогам, сайтам-подборкам.

Как сделать микроразметку на сайте

Если у вас сайт на чистом HTML — все придется делать руками, но кто сейчас запускает такие сайты — в основном все делается на движках и конструкторах.

Рассмотрим варианты добавления микроразметки на самых популярных CMS и конструкторах.

WordPress

Микроразметка уже встроена во многие темы Вордпресс и работает автоматически.

Если хотите сами настроить микроразметку или в выбранной теме она отсутствует, можно поставить специальный плагин. Например, All In One Schema.org Rich Snippets.

После установки и активации плагина в левой панеле инструментов появится кнопка «Rich Snippets». Нажимаем ее, чтобы посмотреть настройки. Плагин на английском. Работает очень просто — нужно выбрать категорию, которую хотим разметить и заполнить необходимые поля.

Какие тут есть категории:

1. Item Review — отзыв или обзор товара/услуги.
2. Events — мероприятия (можно использовать для афиши).
3. Person — автор, человек.
4. Product — товар.
5. Recipe — рецепт.
6. Software Application — программное обеспечение.
7. Video — видео.
8. Article — статья.
9. Service — услуга или обслуживание.

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

Во время создания статьи или страницы на Вордпресс в нижней части настроек появится вкладка «Configure Rich Snippet». Нужно ее открыть и прописать нужные значения.

Какие еще есть плагины для WordPress: Schema, Schema Pro, WP SEO Structured Data Schema, Schema JSON-LD Markup, Schema APP Structured Data, Schema Markup Rich Snippets, WP SEO Structured Data Schema, SNIP: Rich Snippets by WPBuddy.

Отдельно стоит выделить плагин Yoast SEO — он в целом хорош для SEO-оптимизации, а создание микроразметки лишь одна из его функций.

Важно: если на вашем сайте установлен плагин для интернет-магазинов WooCommerce, не нужно ставить дополнительные плагины для разметки. В WooCommerce она уже встроена, и второй плагин может создать конфликт.

Битрикс

Для этой CMS тоже есть свои плагины. Большинство из них платные, бесплатный — Микроразметка Schema.org. На странице плагина есть детальная документация по установке и настройке микроразметки.

Joomla

На Джумла тоже есть свой плагин (на данном движке вместо плагинов используется слово «компонент») — Google Structured Data (www.joomla.center/baza-joomla/funktsional-joomla/google-structured-data) Часть данных компонент подтягивает автоматически, часть надо настраивать. На странице компонента также есть документация по настройке.

Аналог компонента Google Structured Data — J4Schema.

Для конструкторов

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

Сначала немного теории:

Микроразметка состоит из словаря и синтаксиса. Самый популярный словарь, который хорошо распознается всеми современными поисковиками — это Schema.org.

Код микроразметки пишется на одном из трех языков:

Microdata — код заключен в теги <article> </article>

Пример, как может выглядеть полный код для разметки статьи:

RDFa — код заключен в теги <div> </div>

Пример, как может выглядеть полный код для разметки статьи:

JSON-LD — код заключен в теги <script> </script>

Пример, как может выглядеть полный код для разметки статьи:

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

Также есть отдельный словарь разметки для отображения в соцсетях, созданный Фейсбуком — Open Graph. В конструкторах для настроек Open Graph обычно предусмотрено отдельное поле. Обычно, все, что там нужно сделать — это написать тайтл, дескрипшн и загрузить картинку для отображения в соцсетях.

Тильда: для Тильды код пишется на языке JSON-LD. Подходящие сервисы-генераторы микроразметок: The Ultimate JSON-LD Generator и Schema Markup Generator (JSON-LD). Оба на английском. Покажем на примере первого, как создать код.

Заходим на сайт сервиса The Ultimate JSON-LD Generator. Выбираем тип контента, для которого будем составлять код разметки. Например, это статья. Кликаем на кнопку «Article».

Заполняем поля. Тип контента можно оставить Article или уточнить, какая именно это статья (новостная или пост из блога). Далее прописываем ссылку на страницу, заголовок H1, ссылку на картинку, дату публикации, имя автора, ссылку на лого.

По мере заполнения полей код справа будет меняться. Все, что останется — скопировать его и вставить в настройках страницы сайта на Тильда. Чтобы скопировать код, жмем «Copy to clipboard».

Открываем сайт на Тильда. Напротив страницы жмем на ее настройки.

Доходим до вкладки «Дополнительно».

В этой вкладке прокручиваем настройки вниз до пункта «HTML код для вставки внутрь head». Туда нужно вставить скопированный код и сохранить изменения. Возможность вставки кода доступна только на платных тарифах Тильды.

Wix: у Wix код микроразметки тоже пишется на языке JSON-LD. Можно проделать все те же шаги, что описаны для Tilda.

Чтобы вставить готовый код заходим в редактор конструктора и нажимаем на список страниц. Напротив каждой страницы есть 3 точки (меню). Кликаем туда.

В меню выбираем Базовые настройки SEO.

И в самих настройках переходим до дополнительных. В соответствующее поле вставляем код JSON-LD и сохраняем изменения.

Если сайт на HTML

Для самописного сайта нужно составить код разметки и вручную добавить в код страниц. Лучше доверить это программистам. Если хотите сделать сами, можете использовать генераторы разметок, чтобы сформировать код. Выше мы уже упомянули 2 сервиса — это The Ultimate JSON-LD Generator и Schema Markup Generator (JSON-LD).

Также можно воспользоваться мастером разметки структурированных данных от Google. Он работает аналогично предыдущим сервисам и генерирует код на HTML.

Генераторы микроразметки на русском: apelsin.pro и генератор на сайте seolik.ru (в разделе SEO-инструменты).

Готовый код вставляется между тегами <head> и </head> страницы сайта. Пример размещения кода формате JSON-LD:

Как проверить микроразметку

После создания кода микроразметки стоит убедиться, что все сделано верно. Для проверки есть специальные сервисы, а также инструменты от Яндекс и Google.

В Вебмастере Яндекс: нужно нажать на «Инструменты» в правом верхнем углу и открыть «Валидатор микроразметки».

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

В серч консоль Google: аналогично — указываем ссылку на страницу или код и смотрим на результаты проверки.

Третий способ — проверка через валидатор Schema.org. Работает через проверку кода. В левом окне вставляем код, нажимаем на серую кнопку посередине, справа смотрим результат. Если все ок, над результатом будет написано «нет ошибок» и «нет предупреждений».

Заключение

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