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

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

  • узнаем, что такое микроразметка и какой она бывает;
  • поймем, зачем все это нужно;
  • разберемся, как самостоятельно ее настроить.

Что такое микроразметка

Что такое микроразметка Schema org - картинка

Микроразметка — это язык, разработанный для указаний поисковым краулерам. Робот не может оценить контекст и понять без подсказок, какая информация на сайте важна, что в первую очередь показать пользователям. Для таких подсказок в 2011 году была создана микроразметка — общий стандарт семантической оптимизации сайтов. Четыре поисковика-флагмана — Google, Bing, Yahoo! и Яндекс — договорились о внедрении специальных тегов в HTML, которые помогают роботу анализировать сайт и расставлять приоритеты.

Классический стандарт микроразметки Schema.org официально рекомендован Яндексом и Google. Это крупнейший словарь, который регулярно пополняется и совершенствуется. Его понимают все поисковые боты.

Зачем нужна микроразметка для сайта

Микроразметка для повышения CTR - кликабельности сайта - картинка

Микроразметка нужна, чтобы поисковики быстро анализировали структуру сайта и правильно определяли тип информации. Кроме того, у ресурсов с микроразметкой отображается расширенный сниппет — карточка сайта на странице выдачи. Это привлекает пользователя, повышает CTR (кликабельность) и благотворно сказывается на поведенческих факторах. А хорошие поведенческие — это прямая дорога в топ.

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

Сайты с микроразметкой и без — в чем отличия?

Сайт без микроразметки на странице выдачи отображается стандартно:

  • ссылка с ключом,
  • URL,
  • короткий текст-анонс, подтянутый ботом с сайта.

Микроразметка дает поисковому боту импульс для формирования расширенного сниппета, и он становится информативнее. Например, в первом сниппете на скриншоте появляется важная дополнительная информация:

  • адрес,
  • телефон,
  • звезды рейтинга,
  • ссылка на отзывы о компании.

Пример сниппета сайта с микроразметкой - скриншот

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

Расширенный сниппет показывает более полную информацию по запросу и увеличивает количество переходов на сайт. Косвенно это влияет на успешное продвижение: сама по себе микроразметка не поднимает позиции, но рост переходов из поиска улучшает поведенческие факторы и позитивно влияет на ранжирование. Расширенные сниппеты обгоняют по CTR даже те, что находятся выше в выдаче, но имеют стандартный вид.

Другие виды микроразметок

Виды микроразметки сайта - картинка

Кроме общепризнанного стандарта Schema.org существуют еще несколько словарей микроразметки. Каждый выполняет свои задачи.

Open Graph

Словарь, разработанный ребятами из Facebook и дружно подхваченный всеми соцсетями и мессенджерами. Этот словарь понимают также некоторые сервисы Яндекса. Микроразметка отвечает за человеческое превью статей с сайтов в новостной ленте: правильная картинка, заголовок, анонс — все, как мы любим.

Microformats

Разработка W3C (World Wide Web Consortium). Хорошая идея, но из-за редкого обновления начала медленно и печально отмирать. Пока до ума доведены только 4 микроформата:

  • hCard — адреса, телефоны и прочие контакты;
  • hProduct — товары;
  • hRecipe — рецепты;
  • hReview — отзывы.

Data Vocabulary

Гуглоразработка, ныне слившаяся со словарем Schema.org. Благодаря ей появились разметки «хлебных крошек» и контактов.

Dublin Core

Стандарт микроразметки «Дублинское ядро» разрабатывалось группой библиотечных и музейных работников. Используется на сайтах с электронными документами, оцифрованными книгами, описаниями экспонатов.

Good Relations

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

Словарь и синтаксис микроразметки: в чем разница

Словарь и синтаксис микроразметки - картинка

Микроразметка — это комбинация словаря и синтаксиса.

Словарь — это каталог тегов и атрибутов для описания сущностей (объектов). Все, о чем шла речь выше, является словарями микроразметки.

Синтаксис — это метод описания сущностей. Грубо говоря, словарь — это набор ингредиентов, а синтаксис — способ их приготовления.

Микроразметка Schema.org может интегрироваться на сайт четырьмя методами:

  • Microdata,
  • микроформаты,
  • RDFa,
  • JSON-LD.

Каждый имеет свое больное место. Первые три громоздки и сложны в работе, т. к. внедряют словари в html-код страницы. JSON-LD прост и понятен, т. к. использует JavaScript, но не отображается в выдаче поисковой системы Яндекс.

Выбор синтаксиса зависит от вкусов разработчика, но впереди планеты всей — JSON-LD. Его официально рекомендовал Google еще в 2014 году. Это самый популярный синтаксис для микроразметки, правда, не в рунете. Яндекс пока не выводит данные JSON-LD в поисковой выдаче, использует его только в Яндекс.Почте. Если для вас в приоритете продвижение в Яндексе (а это ведущий российский поисковик), то придется использовать другие форматы: микроданные или RDFa (микроформаты практически вымерли). На одной странице допускается использование нескольких видов синтаксиса.

Почему Яндекс и Google советуют внедрять микроразметку

Задача Яндекса и Google — сделать выдачу по поиску релевантной и полезной для пользователей. Поисковики агитируют за микроразметку, так как заинтересованы, чтобы их краулеры точно считывали данные на сайтах, а сниппеты давали ясные ответы на вопросы.

Микроразметка не гарантирует появления в поисковой выдаче расширенного сниппета со всеми фичами, которые вы задумали.
Но без неё шансов на красивое представление сайта на SERP нет вообще.

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

Самые популярные случаи применения разметки

Каталог микроразметки Schema — это источник информации о том, как обозначаются в коде типичные объекты (сущности), каждый из которых обладает набором определенных свойств. Наиболее обобщенная сущность Thing — нечто. Это очень широкое понятие, поэтому и набор свойств у нее универсален:

    • name (название),
    • description (описание),
    • url (адрес),
    • image (изображение).

 

Cущности thing микроразметки Schema org - скриншот

В принципе, все подпадает под такой сценарий разметки, но в Schema.org представлены и более частные случаи с характерными атрибутами. Топовые типы сущностей:

 

СущностьСвойства
Product (товар или услуга)название, рейтинг, цвет, модель, бренд
Event (событие)название, место, организатор, спикер, дата
Recipe (рецепт)ингредиенты, способ и время приготовления
Movie (фильм)режиссер, актерский состав, продюсер, композитор, трейлер
Organization (организация)адрес, рейтинг, email, телефон

 

Подробный список сущностей и свойств словаря Schema.org с переводом на русский можно подсмотреть здесь.

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

  • разметка для главной страницы — логотип, название, можно вывести меню сайта прямо в сниппет; Пример микроразметки сайта - скриншот
  • разметка товара — цены, описание, рейтинг, отзывы;
  • «хлебные крошки» — путь от главной к текущей странице для быстрой навигации пользователя;
  • структурирование контактных данных;
  • разметка статьи блога — краткая аннотация, дата публикации, указание автора, комментарии и оценки;
  • разметка рецептов — помимо ингредиентов и инструкции могут добавляться показатели КБЖУ, количество порций и т. п.;
  • разметка для фильма — продолжительность, актеры и режиссер, год выпуска, рейтинг, краткое содержание, награды.

Преимущества синтаксиса JSON-LD

JSON-LD (JavaScript Object Notation Linked Data) — это формат обмена данными на языке JavaScript, который поддерживает вложенность данных и отображает информацию в удобоваримом виде.

Преимущества JSON-LD:

  • легче для понимания, чем другие синтаксисы;
  • официально рекомендован Google;
  • много плагинов для быстрой разметки во всех востребованных CMS;
  • нет привязки к HTML-коду;
  • размещается единым блоком, а не раскидывается фрагментами по всему документу.

Куда добавлять код JSON-LD

JSON-LD обычно интегрируется в тег <head>. Но и в теге <body> он нормально работает.

Схема разметки JSON-LD неизменяема:

  1. Сначала прописывается тип микроразметки <script type="application/ld+json">.
  2. Дальше между фигурными скобками {} размещается блок с нужными параметрами. Если забыть про скобки, то данные не считаются роботом.Также не забываем проставлять запятые после каждой пары “атрибут”:”значение”.
  3. В конце закрываем скрипт тегом </script>.

В JSON-LD 13 зарезервированных ключей указывают на контекст и связывают объекты. Ключ @context отсылает бота к словарю микроразметки, а @type — к типу сущности из каталога. Дальше прописываются пары Атрибут: Значение.

Например,

Скрипт - пример кода синтаксиса JSON-LD - скриншот

Популярные генераторы JSON-LD

Конечно, разметку JSON-LD можно делать вручную — формат вполне прозрачен. Но мучиться с кропотливым прописыванием атрибутов вовсе не обязательно — существуют инструменты для автоматизации процесса.

  • Seo service. Здесь собрана вся библиотека Schema.org. Сервис для спецов, т. к. есть, где запутаться.
  • Schema Markup Generator (JSON-LD). Генератор с 10 самыми ходовыми сущностями и интуитивно понятным интерфейсом.
  • SON-LD Schema Generator For SEO - Joe Hall. Инструмент для новичков с 6 топовыми сущностями:
    • Local Business (местный бизнес),
    • Person (персона),
    • Product (продукт),
    • Event (событие),
    • Organization (организация),
    • Website (сайт).

Проверка валидности разметки

Валидатор Яндекса - проверка валидности микроразметки - скриншот

Независимо от способа генерации скрипта JSON-LD перед тем, как добавить микроразметку schema org на сайт, нужно проверить ее на корректность. Для этого у обоих поисковиков есть программы-валидаторы.

  • Structured Data Testing Tool от Google. Здесь можно проверить весь сайт по URL или фрагмент кода.
  • https://webmaster.yandex.ru/tools/microtest/. Аналогичный валидатор от Яндекса в панели Вебмастера. Кстати, JSON-LD здесь нормально проходит валидацию, несмотря на то, что Яндекс не поддерживает вывод этого синтаксиса в своем поиске.

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

Работа с микроданными

Микроданные — оптимальный формат для микроразметки сайтов, продвигающихся в Яндексе, тем более, что и Google понимает этот синтаксис. Работа с Microdata сложнее, чем с JSON-LD, т. к. все прописывается прямо в HTML-код, в содержимое сайта между тегами <body>...</body>.

Основные атрибуты микроданных

Чтобы внедрить разметку, нужно создать оболочку размечаемых данных, используя теги <div>…</div>. Туда добавляются атрибуты:

  • itemscope — указание на словарь;
  • itemtype — указание на тип сущности;
  • itemprop — определение свойства объекта.

Например:

Атрибуты микроданных микроразметки - пример кода - скриншот

Генераторы микроданных

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

Главный минус микроданных — код прописывается в теле контента и процесс этот очень трудоемкий.

Для генерации кода разработаны специальные инструменты.

После генерации кода проверьте его в валидаторах поисковиков.

Автоматическая разметка Google

Маркер данных Google для микроразметки - скриншот

Заморочки с кодом многих отпугивают: это сложно, долго, надо разбираться и вникать. Google попытался избавить нас от лишней головной боли и сделал сервис для тех, кто ничего не хочет знать ни о HTML, ни о JavaScript . Инструмент «Маркер данных» находится на Google Search Console и делает автоматическую разметку страниц за несколько шагов:

  • Выбираем сайт в консоли вебмастера.
  • Прописываем URL типичной страницы. Все страницы, выполненные по одному шаблону, автоматически подтянутся в группу и будут размечены по одной схеме.
  • Выбираем в выпадающей вкладке тип сущности и нажимаем кнопку «Начать выделение».

Сейчас в «Маркере» доступны 9 категорий:

  • мероприятия;
  • местные организации;
  • обзоры книг;
  • приложения;
  • продукты;
  • рестораны;
  • статьи;
  • телесериалы;
  • фильмы.
  • Выбранная страница отобразится на экране, справа появится область «Мои элементы данных» со списком свойств указанного типа сущности.
    Выделяя элементы контента, присваиваем им нужные свойства.
  • Когда все обязательные и дополнительные элементы будут размечены, нажимаем «Готово». Сервис предложит объединить похожие по содержанию страницы в группу. К автоматически объединенным страницам мы можем добавить свои вручную. Когда все будет готово, нажимаем на кнопку «Создать группу страниц».
  • Проверяем корректность разметки и нажимаем на кнопку «Опубликовать».

Убрать или изменить микроразметку можно в разделе «Маркер» на Search Console, выбрав опубликованную группу страниц. После следующего обхода сайта поисковый краулер учтет внесенные изменения.

«Маркер данных» — удобный сервис для небольших сайтов с однотипными страницами, но выполненная здесь микроразметка передается только поисковым роботам Google. Для продвижения в Яндексе придется использовать другие инструменты.

Плагины генерации кода микроразметки для WordPress

Плагины генерации кода микроразметки для WordPress - картинка

Как же сделать микроразметку schema.org для Яндекса, не заморачиваясь с кодом? Задача упрощается, если ваш сайт работает на самой популярной в рунете CMS WordPress. Для этой платформы разработано множество плагинов, генерирующих код микроразметки, некоторые из них поддерживают синтаксис Microdata, который понимает Яндекс. Найти такие плагины можно по тегу microdata здесь: https://ru.wordpress.org/plugins/tags/microdata/.

Наиболее популярные плагины для микроразметки на WordPress:

(Внимание! Не все плагины поддерживают Microdata и годятся для продвижения в Яндексе)

  • Schema — All In One Schema Rich Snippets. Бесплатный плагин с поддержкой Microdata. Работает с 8 категориями:
    • Обзор
    • Событие
    • Персона
    • Продукт
    • Рецепт
    • Приложение
    • Видео
    • Статья
  • WP SEO Structured Data Schema. Разработчики утверждают, что плагин поддерживает форматы Микроданные, RFDa и JSON-LD. В бесплатной версии доступна разметка 11 типов контента:
    • Организации
    • Локальный бизнес
    • Новости Статьи
    • Сообщения в блогах
    • События
    • Товары
    • Видео
    • Сервисы
    • Отзывы
    • Рейтинги
    • Рестораны
  • Schema. Простой плагин микроразметки JSON-LD. Есть бесплатная и премиум-версии.

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

Плагин Schema для WordPress: настройка микроразметки в 6 шагов

Плагин Schema для микроразметки WordPress - скриншот

На базе плагина Schema для WordPress убедимся, что разметку можно сделать, не вникая в дебри кода.

  1. Устанавливаем плагин, разворачиваем пункт меню Schema, появившийся на панели слева.
  2. Заходим в общие настройки: Settings → General. Здесь указываем тип сайта (Site Type) и загружаем логотип (Publisher Logo).
  3. Переходим к вкладке Knowledge Graph. Здесь определяем, чей сайт — человека или организации. Пишем имя персоны или название компании, указываем URL.
  4. Переходим к вкладке Schemas. Здесь выбираем тип страницы (About Page) и страницу контактов (Contact Page). Если нужно разметить шапку и подвал сайта, хлебные крошки, комментарии, видео и аудиоконтент, выделяем нужные пункты.
  5. Переходим на дополнительную вкладку Advanced. При желании настраиваем удаление микроразметки в случае деинсталляции плагина.
  6. Нажимаем на кнопку «Сохранить изменения». Вуаля. Микроразметка готова.

Итог

  • Schema.org — постоянно обновляющийся словарь, с его помощью поисковикам передается информация о разных типах объектов на сайте.
  • Микроразметка увеличивает показатель кликабельности сайта, т. к. делает сниппет более информативным.
  • Словари микроразметки понимают все поисковики. «Трудности перевода» возникают на этапе интеграции разметки в код. Самый удобный синтаксис JSON-LD, рекомендованный Google, пока не выводится Яндексом в выдаче. Для продвижения в обоих поисковиках придется или комбинировать разные форматы, или использовать синтаксис Microdata.
  • Для быстрой микроразметки без погружения в код используйте «Маркер данных» в Google Search Console (только на базе JSON-LD).
  • Для сайтов на CMS существуют плагины, упрощающие интеграцию микроразметки.
  • Любую разметку нужно проверять на корректность валидаторами Яндекс и Google.

 

Обсудим сотрудничество?

Какие задачи нужно решить:
Разработка сайта / интернет-магазина
Продвижение (SEO, Директ и т.п.)
Контент-маркетинг
Поддержка сайта (информационная, техническая)
Аудит сайта / интернет-магазина
Консультация
Задать вопрос специалисту
Заполните форму и мы вам быстро ответим

Комментарии

16.01.2021 в 11:42 | Сергей

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

Комментировать

Добавить комментарий

* Поля, обязательные для заполнения
Добавляйся в наши социальны сети:
Каждый день интересные материалы про маркетинг и не только.

Провести бесплатный SEO-аудит вашего сайта?

Провести бесплатный SEO-аудит вашего сайта?

Хочу бесплатный аудит
Заказ сайта
Оставить заявку
Заявка на расчет
Оставить заявку
Оставить заявку
Заказ услуги
Заказ услуги
Заказ работ
Продвижение от 10.000 рублей
Form
X
Хочу быть автором