Александр Пичурин

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

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

Микроразметка помогает поисковым системам чётко понимать содержание страниц и структурировано выдавать контент в результатах поиска. Разметка происходит непосредственно в HTML-коде страниц с помощью специальных атрибутов. Обсудим наиболее часто используемые форматы микроразметки: schema.org, Open Graph и JSON-LD.

Schema.org

Поисковыми системами используются данные, размеченные микроразметкой Schema.org для формирования сниппетов, или краткой информации в поисковой выдаче. Словарь в общем доступе находится на официальном сайте https://www.schema.org/.

Рассмотрим пример со страницей о фильме «Аватар» со ссылкой на трейлер и информацией о режиссёре. Для того чтобы указать какая часть страницы посвящена фильму добавляем атрибут itemscope (отвечает за сущность):

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

Для того чтобы указать о какой сущности идёт речь, добавляем атрибут itemtype:

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

Таким образом, мы прописали что мы говорим о фильме.

Дополнительную информацию мы размещаем в атрибуте itemprop. Например, указываем режиссёра фильма itemprop= “director” в дополнительном теге <span>.

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

Полный список свойств, которые можно задать для фильма, приведён на странице https://schema.org/Movie.

Типы и свойства schema.org

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

Cписок популярных типов сущностей:

  • Шапку сайта (WPHeader)
  • Меню (SiteNavigationElement)
  • Хлебные крошки (Breadcrumbs)
  • Адреса и организации (Organization и LocalBusiness)
  • Список товаров (Products list)
  • Карточку товара (Product)
  • Список статей блога (Blog)
  • Статью блога (Article, NewsArticle и BlogPosting)
  • Научная работа (CreativeWork)
  • Фильм (Movie)
  • Рецепт (Recipe)
  • Изображение (Painting)
  • Картинка (ImageObject)
  • Видео (VideoObject)
  • Событие (Event)
  • Вопрос-ответ (Question)
  • Отзывы (Reviews)
  • Футер сайта (WPFooter)

Смотрите также полный список типов сущностей на странице: https://schema.org/docs/full.html.

Как проверить?

После внедрениея разметки, её необходимо проверить. Популярные инструменты для проверки: Валидатор микроразметки от Яндекса, Rich Snippets Testing Tool от Google, Structured Data Linter.

Open Graph

Микроразметка Open Graph разработан Facebook для контроля тексто-графического анонса, который формируется при добавлении ссылки на ресурс в социальную сеть. С его помощью можно настроить изображение, которое появляется красивое превью, когда пользователи делятся материалом через соцсеть. Open Graph используют Facebook, «Вконтакте», Twitter, LinkedIn, Pinterest и «Яндекс.Видео».

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

Протокол Open Graph состоит из мета-тегов, которые интегрируют в html-код в тело страницы в контейнер <meta property>.

  • og:title – название материала;
  • og:description – описание материала, заполнять не обязательно;
  • og:image – ссылка на картинку, которая должна сопровождать материал;
  • og:type – тип добавляемого материала, например, «article» – статья, «movie» – кино и т.д.;
  • og:url – ссылка на саму веб-страницу, которая добавляется в социальную сеть.

Пример кода для сайта The Rock on IMDB:

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

Дополнительные теги, перечислены на странице https://ogp.me

Как проверить?

Проверить корректность разметки можно через специализированный сервис, разработанный Facebook https://developers.facebook.com/tools/debug/ и валидатором Яндекс.Вебмастер.

JSON-LD

Альтернатива schema.org. Это способ передачи связанных данных (Linked Data, LD) с помощью формата JSON (JavaScript Object Notation).

Эффективно использовать JSON-LD можно только если уже применяется микроразметка schema.org. Для указания объектов можно использовать семантику schema.org, а JSON-LD применять в качестве метода передачи данных.

В июне 2013 года, официальный блог schema.org включил JSON-LD в список форматов, рекомендованных для разметки страниц. Также Google рекомендовал использовать данный формат для структуризации данных. Google советует использовать JSON-LD для отображения номеров телефонов организаций, на страницах анонсирующих события или мероприятия.

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

Пример кода:

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

Основная разница между JSON-LD и schema.org

Разметка schema.org указывается в виде HTML-кода в теле страницы.

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

А для использования JSON-LD не нужно включать HTML-код в тело страницы. Достаточно вставить скрипт в контейнер <head>.

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

Использование JSON-LD позволяет структурировать информацию, не вмешиваясь в отображаемый пользователем контент. Разметка данного формата представлена в виде мета-данных, упакованных в тег <script> в контейнере <head>. Это значительно упрощает и ускоряет работу с микроразметкой.

Кому подходит JSON-LD?

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

Как проверить правильность?

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

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

Мнение разработчика компании VIPRO по поводу внедрения микроразметки:

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