Внедрение микроразметки Schema.org на WordPress

Здравствуйте! Пришло время рассказать о том, как я внедрял микроразметку Schema.org на своем блоге в конце прошлого года и что из этого получилось.

Schema.org является единым общепризнанным стандартом, который распознают наиболее популярные поисковые системы, такие как Google, Яндекс, Yahoo и Bing. Его разработкой занимается международная группа начиная с лета 2011 года.

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

Приведу пару доводов в пользу разметки:

  • логическая структура информации на странице помогает поисковым системам извлекать и обрабатывать данные;
  • формирование расширенных сниппетов на странице с результатами поискового запроса улучшает кликабельность.

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

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

Пример семантической верстки с помощью микроразметки

А сейчас я приведу пример верстки блога на WordPress с применением атрибутов Schema.org. Нам потребуется добавить атрибуты itemscopeitemtypeitemprop и присвоить им свойства в соответствии с принятой схемой CreativeWork.

Обратите внимание, в основе примера я рассматриваю свой блог webliberty.ru, сверстанный на HTML5, поэтому допускаю любые несоответствия с Вашей версткой.

Имеются в виду заголовки, секционные и блочные элементы, теги. Обращайте внимание на стандартные функции WordPress и к ним добавляйте необходимые атрибуты по аналогии с примером.

Разметка верхней части страницы

Формирование конечной страницы в WordPress осуществляется путем объединения нескольких файлов шаблона. Исходный код верхней части страницы как правило располагается в файле header.php. Добавим атрибуты тегу <body> чтобы обозначить тело веб-страницы. Тип разметки — WebPage.

1
<body itemscope="itemscope" itemtype="http://schema.org/WebPage">

Теперь добавим микроразметку к тегу <header> — это секционный элемент HTML5, который используется для шапки сайта. Тип разметки — WPHeader.

1
<header itemscope itemtype="http://schema.org/WPHeader">

В моем случае название блога динамически обертывается в различные теги в зависимости от того, на какой странице мы находимся. Открывая главную страницу название заключено в заголовок H1, а названия анонсов в H2. В свою очередь, переходя на страницу с одной записью, в заголовок верхнего уровня помещается название статьи, а название блога является обычной ссылкой, ведущей на главную страницу.

Таким вот образом у меня сформирована логическая структура заголовков, правильная с моей точки зрения. Добавляю в конструкцию свойство name:

1
2
3
4
5
6
7
<?php if (!is_home()): ?>
<a itemprop="name" href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
 
<?php else : ?>
<h1 itemprop="name"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
 
<?php endif; ?>

И сразу после добавляю описание, которое размечается атрибутом itemprop со свойством description:

1
2
3
<span itemprop="description">
	<?php bloginfo('description'); ?>
</span>

Разметка навигационного меню

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

1
2
3
4
5
6
<nav itemscope itemtype="http://www.schema.org/SiteNavigationElement">
	<ul class="menu">
		<li itemprop="name"><a itemprop="url" href="https://webliberty.ru/">Главная</a></li>
		<li itemprop="name"><a itemprop="url" href="https://webliberty.ru/author-bloga/">Автор</a></li>
	</ul>
</nav>

Здесь применяются свойства name и url для атрибута itemprop. Подобная разметка поможет поисковым системам определить для сайта быстрые ссылки, которые не редко встречаются в результатах поиска.

Разметка основного содержимого

Основное содержимое страницы формируется в файлах single.php (одна запись) и page.php (страница). Для начала задаю статье тип разметки Article:

1
<div class="PostText" itemscope itemtype="http://schema.org/Article">

Указываю рубрику или категорию, в которой расположена запись:

1
<span itemprop="articleSection"><?php the_category(',') ?></span>

Дата публикации:

1
<span itemprop="datePublished"><?php the_time('Y-m-d')?></span>

Но есть одно НО. ПС находят эти данные и выводят дату в сниппете, получается что статьи, написанные давно, вроде как и остаются актуальными по сей день, но CTR выдачи сильно падает.

Имя автора, разместившего статью:

1
<span itemprop="author"><?php the_author() ?></span>

Как я уже говорил, заголовок статьи заключен в тег H1, дополним его тегом itemprop с присвоенным свойством headline:

1
2
3
<div class="postheader">
	<h1 itemprop="headline"><?php the_title(); ?></h1>
</div>

В справке сервиса Яндекс.Вебмастер сообщается, что если в документе одновременно используются атрибуты headline и name, то обрабатываться и участвовать в формировании сниппета будет только последнее значение свойства.

С помощью свойства articleBody атрибута itemprop делаем микроразметку для основного текста записи:

1
2
3
<div class="postcontent" itemprop="articleBody">
	<?php the_content(); ?>
</div>

Разметка комментариев

Для комментариев в стандарте Schema.org также есть все необходимые атрибуты и свойства, которые позволяют поисковым роботам правильно идентифицировать текст комментария, автора и дату размещения. Ниже привожу фрагмент файла comments.php, однако в Вашей теме код может находиться в другом файле, даже в functions.php. Тип разметки — Comment.

1
<?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ) ?> id="comment-<?php comment_ID() ?>" itemprop="comment" itemscope="itemscope" itemtype="http://schema.org/Comment">

Добавим информацию об авторе с помощью свойства creator, принадлежащего атрибуту itemprop:

1
<?php printf( __( '<cite class="fn" itemprop="creator">%s</cite>' ), get_comment_author_link() ); ?>

Укажем время размещения комментария. Обратите внимание, свойство commentTime я применил только к дате, исключив время (часы и минуты). Дата должна быть в формате ISO 8601, иначе это приведет к ошибке валидации микроданных. Про формат дат с приведенными примерами можно почитать в Википедии.

1
2
3
4
<span itemprop="datePublished">
	<?php printf( __('%1$s'), get_comment_date('Y-m-d')); ?>
</span>
в <?php comment_time('H:i'); ?>

И, наконец, используем text чтобы выделить сам текст комментария:

1
<div itemprop="text"><?php comment_text(); ?></div>

Разметка боковой колонки (сайдбара)

Боковая колонка sidebar.php является неотъемлемым элементом большинства блогов. В сайдбаре удобно располагать список категорий, информацию об авторе, дополнительные элементы навигации и блоки важной информации. Добавим микроразметку Schema.org, используя тип WPSideBar:

1
<aside itemscope itemtype="http://schema.org/WPSideBar">

Разметка нижней части страницы (футера или подвала)

В подвале блога мы можем использовать тип разметки WPFooter. Таким образом мы сообщаем поисковикам, что это нижняя часть страницы и она не содержит важной информации для большинства пользователей.

1
<footer itemscope="itemscope" itemtype="http://schema.org/WPFooter">

Соответствующие атрибуты я добавляю к секционному элементу <footer> современного стандарта HTML5.

Типы схем, новые атрибуты и их свойства не нуждаются в применении дополнительных элементах верстки (div, span или других). Добавляйте микроразметку к уже имеющимся тегам.

На самом деле, внедрить микроразметку Schema.org на WordPress не такое уж и сложное занятие, если Вы хорошо разбираетесь в верстке. У меня больше времени ушло на написание этой статьи, чем на добавление в код новых элементов.

Статья взята с сайта