Как сделать микроразметку сайта schema.org для яндекса и google

Антон Воронцов 0 SEO и WEB разработка
Наверняка каждый владелец сайта сталкивался или слышал про такое понятие - микроразметка сайта. Но многие из них даже не представляют ценность наличие разметки на своем ресурсе. В данной статье хочу немного (впрочем, как получится) поговорить на тему как сделать микроразметку сайта для яндекса и гугл используя словарь сематической разметки schema.org.

Цель микроразметки указать поисковым системам на структурированную информацию, которая находится на сайте. Благодаря внедрению специальных атрибутов, поисковой робот определяет, где именно на странице находится основной контент, а где второстепенный. Наличие разметки помогает передать информацию об “организации и её адрес”, “описание фильмов», «творческих работ”, “информацию о товаре и её стоимости”, “описание рецептов” и многое другое.

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

Любой медиа файл (картинка или видео) из боковой колонке будет присвоен к основному тексту, но при этом файл никак не относится к нему, а является рекламой или анонсом другой записи.

При правильно настроенной микрокроразметки поисковики “благодарят” и формируют в выдаче вот такие красивые сниппеты (краткое описание в поисковой выдаче):

различные варианты микроразметки

По мимо формирования красивых (человека понятных) данных в сниппете я обратил внимание что наличие микроданных положительно влияют на посещаемость ресурса, вот вам доказательство.

наглядный пример наличие микроразметки

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

На днях (после смены шаблона) я решил внедрить разметку schema.org в свой блог, работающий на CMS WordPress. Каждый шаг распишу поэтапно.

Структура моего блога выглядит так:

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

Содержание:

Микроразметки шапки (header) сайта WPHeader

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

Вариант без разметки

Пример с разметкой № 1. Разметить в теле head

Пример с разметкой № 2. Разметить в теле header

Мое решение

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

  • Во-первых, внедрить атрибут в title не представляется возможным используя хук _wp_render_title_tag(); (у меня лично ничего не вышло).
  • Во-вторых, вывод заголовка у меня формирует плагин Yoast Seo.

Таким образом нужно “костылять” через get_post_meta() используя id или ключи которые формирует плагин.

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

Решение с примером 2 намного проще, но мне он не подходит из личных соображений.

Дополнительные атрибут

CssSelectorразмечается в head указывает на селектор ссылки с файлом css.

Микроразметка меню (навигации) сайта SiteNavigationElement

Разметка меню формирует в выдачи следующие элементы:

быстрые ссылки

Главное меню без разметки:

Пример с разметкой

Мое решение

Вывод меню на сайте настроен функционалом WordPress и выводится функцией wp_nav_menu(). Через фильтр nav_menu_link_attributes можно добавить itemprop="url". Выглядит это так:

Микроразметка списка статей блога на главной (index) странице BlogPosting

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

  1. Название статьи
  2. Короткое описание
  3. Картинка (миниатюра)
  4. Дата публикации и модификации (обновление)
  5. Информация об организации
  6. Автор

Часто возникает вопрос про организацию, что делать если блог автора не имеет организацию? Суть в том, что можно обозначить разметку в формате блога (авторских или научных статей), но я решил вопрос по-другому. В разметки об организации название написал “блог Антона Воронцова”, указал не полный номер телефона (можно просто поставить прочерк) и ссылку на главную страницу, город, где проживаю и адрес центральной улицы. Этого стало достаточно чтобы гугл валидатор перестал выдавать ошибки.

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

За стандартный вывод миниатюры отвечает команда  the_post_thumbnail( 'thumbnail' );
В таком случае выводится img с указанием ссылки, размера, но нам важно наличие атрибута itemprop="contentUrl" или itemprop="url contentUrl" завёрнутую в div itemscope itemtype="http://schema.org/ImageObject"

“финт ушами” решит задачу меняем the_post_thumbnail( 'thumbnail' ); на

Микроразметка полной статьи на странице (single.php) Article

Разметка полной статьи ничем не отличается от разметки главной, за исключением несколько моментов:

  1. Необходимо указать что это полная статья
  2. Добавляются дополнительные элементы, которые имеют свою разметку (например, хлебные крошки, комментарии)

Если сравнить два кода, то видно, что цикл вывода полной статьи обозначил itemtype="http://schema.org/Article" и тело статьи itemprop="articleBody".

Микроразметка изображения в теле статьи

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

Пример без микроразметки

Валидатор яндекса и гугл будут выдавать ошибку «Необходимо указать значение для поля image» и рекомендации «Рекомендуется заполнять поле image. Укажите значение, если оно известно.»

Пример с микроразметкой №1

Пример с микроразметкой №2

Мое решение

код прописывается в файл functions.php

Микроразметка подвала сайта (footer.php) WPFooter

В подвале сайта коммерческие организации применяют разметку itemtype="http://schema.org/Organization" где используют адрес, логотип, контакты. На простых информационных ресурсах разметка футера имеет следующий вид.

Пример без микроразметки

Пример с микроразметкой № 1

Пример с микроразметкой № 2

Микроразметка хлебных крошек Breadcrumbs

«хлебные крошки» это навигация цепочка, которая отражает путь до текущей страницы.

хлебные крошки на сайте

Пример без микроразметки

Пример с микроразметкой

Мое решение

Я использую функцию, которую позаимствовал на сайте Дмитрия dimox.name/wordpress-breadcrumbs-without-a-plugin

За вывод хлебных крошек отвечает следующий код:

И вот сама функция (необходимо добавить в файл functions.php)

Микроразметка комментариев Comment

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

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

Микроразметка вопрос/ответ раздел (FAQ) FAQPage

На многих сайтах встречал раздел с часто задаваемыми вопросами в конце статьи. Но в 90% случаях автор не использует микроразметку itemtype="https://schema.org/FAQPage" и лишает свой сайт вот такого сниппета:

faq

Согласитесь такой вид намного привлекательней и кликабельность по нему будет в разы больше.

Пример разметки

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

Подтверждаю условия Пользовательского соглашения и даю согласие на обработку персональных данных, в соответствии с Федеральным законом от 27.07.2006 года №152-ФЗ