RigWEB

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

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

Schema.org для WordPress

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

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

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

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

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

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

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

А сейчас я приведу пример верстки блога на WordPress с применением атрибутов Schema.org. Нам потребуется добавить атрибуты itemscope, itemtype, itemprop и присвоить им свойства в соответствии с принятой схемой 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="http://webliberty.ru/">Главная</a></li>
		<li itemprop="name"><a itemprop="url" href="http://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 не такое уж и сложное занятие, если Вы хорошо разбираетесь в верстке. У меня больше времени ушло на написание этой статьи, чем на добавление в код новых элементов.

В следующей записи я расскажу о том, как проверить разметку на ошибки. С удовольствием отвечу на вопросы и комментарии :smile:

  1. Юлия Штрелер

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

    1
    
    "@context": "http://schema.org", "@type": "WebSite"

    Вы не подскажете, что это значит? Там упоминается schema.org. Надо ли в таком случае заняться микроразметкой или seo плагин уже берет на себя некоторые функции по разметке? Заранее благодарю за ответ.

    Ответить

  2. Webliberty

    Юлия, это значит, что с помощью разметки задан тип веб-страницы WebSite. Этого недостаточно.

    Ответить

  3. Дмитрий

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

    Ответить

  4. Webliberty

    Дмитрий, для элемента меню необходимо изменить отступы. Все изменения вносятся в файл style.css.

    В каждом браузере есть встроенный инструмент Web Inspector — просмотр кода элемента (не путать с просмотром кода страницы). С его помощью можно просматривать все стили для выбранного элемента и даже менять их без внесения изменений на самом сайте. Новые настройки будут применены к странице сразу и Вы увидите это на странице.

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

    Ответить

  5. Александр

    Я про микроразметку пока ничего не знаю. Но знаю, что она должна быть на сайте. Так что может попробую и себе добавить. А у Вас на сайте она уже давно? И что после внедрения изменилось?

    Ответить

  6. Webliberty

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

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

    Ответить

  7. Андрей Andrdov

    В принципе я так, как ты в статье не копался в микроразметки. Просто взял тип Article и у всех страницах с статьями внедрил микроразметку. Так проще и эффект тот же, наверное ;-)

    Ответить

  8. Webliberty

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

    Ответить

  9. GladWeb

    Вы опередили меня, у меня все никак руки не доходили написать про ручной способ добавления Schema.

    Для тех кто не хочет это делать руками, я писал у себя про автоматический метод с помощью плагина. Кому интересно — Welcome. Что скажете Денис про этот метод? Лучше вручную или и так неплохо?

    Ответить

  10. Webliberty

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

    В ручном режиме все эти недостатки исключены.

    Ответить

  11. Княгиня

    Про размётку типа WP я и не знала. Она на схеме.орг действительно есть, но так спрятана, что без поиска не найдёшь…

    Ответить

  12. Дмитрий

    Webliberty, большое спасибо, разобрался во всем и благополучно исправил!

    Ответить

  13. Сергей

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

    Ответить

  14. GladWeb

    Webliberty, тут не поспоришь ;-)

    Ответить

  15. Java

    Есть такой вопрос: стоит плагин All In SEO. Он перекрывает h1 и description. Как быть?

    Еще такая ситуация у меня получается: «WPHeader Узел пуст. Если он вам не нужен, удалите его». Что посоветуете?

    Ответить

  16. Webliberty

    Java, в настройках плагина уберите галочку напротив пункта «Use Schema.org Markup». В пустом узле нет ничего страшного, это не ошибка, а предупреждение. Можете убрать. Я разметил эту область чтобы в будущем дополнить вложенными элементами, нужно дальше изучать стандарт.

    Ответить

  17. Тим

    Спасибо, чутка разобрался. А то все пишут шема шема.. срочно надо! Вот теперь стало более менее понятно.

    Ответить

  18. Роман

    Здравствуйте! Достаточно ли интеграции схема.орг в плагине All in Seo? Или необходимо делать микроразметку собственноручно?

    Ответить

  19. Webliberty

    Здравствуйте, Роман. Нет, этого не достаточно. All In One SEO Pack добавляет разметку только к мета-тегу description, добавляя атрибут itemprop.

    Ответить

  20. Дмитрий

    Спасибо за статью! Так как с этим минусом:

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

    Как-то решается? Нельзя же с ним «жить»))

    Ответить

  21. Webliberty

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

    1
    
    <?php the_time('d.m.Y')?>

    После:

    1
    
    <span class="time" title="<?php the_time('d.m.Y')?>"></span>

    Таким образом мы убрали непосредственный вывод даты, переместив вызывающий ее код в атрибут title для тега span.

    Для того чтобы показать ее добавим в style.css псевдоэлемент before для тега:

    1
    2
    3
    
    .time:before {
    	content:attr(title);
    }

    Ответить

  22. Павел

    Добрый день. У меня несколько вопросов по микроразметке schema.org.

    1. На странице помощи перечислены схемы, которые поддерживает Яндекс. Вопрос: стоит ли использовать на сайте для микроразметки другие сущности, которых нет в этом списке Яндекса (к примеру, Article, User comments и т.д.)? Будет ли как-то различать их поисковый робот или для него это просто будет лишним кодом на странице?
    2. У схемы «Article» есть поле «description». Будет ли содержимое этого поля как-то влиять на сниппет статьи в поисковой выдаче? Или лучше не ставить на сайт эту схему микроразметки schema.org и использовать обычный мета тег «description» как более действенный инструмент влияния на выдачу в сниппете?
    3. На одной странице есть статья и под ней комментарии. Если для статьи использовать схему «article», а для комментариев «user comments», то будет ли их разделять поисковый робот? Или для него все равно комментарии будут продолжением статьи?
    Большое спасибо!!

    Ответить

  23. Webliberty

    Павел, здравствуйте, буду рад ответить на Ваши вопросы!

    1. Однозначно стоит. Яндекс ведет работу по расширению списка поддерживаемых схем и их компонентов — об этом не раз сообщалось на страницах блога сервиса Яндекс Вебмастер. Те атрибуты, которые Яндекс пока не обрабатывает, не будут мешать роботу, он просто не будет их выделять среди прочих. К тому же, есть другие поисковые системы, которые прочитают разметку должным образом.
    2. По сути, поле «description» в составе разметки выполняет ту же роль, что и общепринятый мета-тег description. Дублировать описание — не лучшее решение (переспам). Если используете плагин All In One SEO Pack, то в его настройках можете поставить флажок напротив пункта «Использовать разметку Schema.org» — это добавит к мета-тегу нужные атрибуты.
    3. Да, будет. Впрочем ПС способны отделять основной текст от пользовательских комментариев и без разметки. Комментарии, как правило, собирают поисковый трафик по низкочастотным запросам и оказывают положительное влияние на поведенческие факторы.

    Ответить

  24. Ольга

    Добрый день. Глупый, наверное, вопрос, но я чайник совсем, уж простите. У меня установлен плагин All in One Seo Pack, галку в графе «Использовать Scheme» поставила не сразу. Со старыми записями надо что-то делать, или они, так сказать, сами разметятся? Это единственное, что мне доступно, все, что вы в статье написали — я не осилю, я и понимаю-то десятую часть, а делать что-то вручную вообще боюсь.

    Ответить

  25. Webliberty

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

    Что касается этой статьи — на самом деле все не так сложно, как кажется на первый взгляд) Постепенно начните и я уверен, у Вас все получится!

    Ответить

  26. Ольга

    Спасибо за ответ. Не сложно, наверное, но страшно. Скажите, пожалуйста, это очень плохо, если в записях отсутствует автор и дата? Я их убрала сознательно, сочла, что для моего сайта это лишнее. А вот Гугл недоволен, считает ошибкой. Говорит, hatom: updated, author отсутствует. Дату я как-то легко убрала, а с автором попыхтеть пришлось. И столько нервов опять же. И теперь что мне за это грозит?

    Ответить

  27. Webliberty

    Ольга, не переживайте, ничем не грозит. Если считаете нужным убрать, значит убирайте. Поля с автором у меня тоже нет, да и зачем на каждой странице повторять одно и тоже? Из авторов на этом блоге я один, вот если было бы несколько, тогда и смысл понятен, а так…

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

    Ответить

  28. Ольга

    Спасибо за подробные ответы!

    Ответить

  29. Ирина

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

    1
    
    <article id="post" itemscope itemtype="http://schema.org/Article">

    Помогите пожалуйста :cry:

    Ответить

  30. Webliberty

    Ирина, здравствуйте. Заголовок должен быть в любом случае. Быть может код, который Вы хотели отправить в комментарии, не полностью прошел. Напишите мне на почту, постараюсь помочь)

    Ответить

  31. Александр

    Денис, а ничего, что для этой твоей страницы Гугл выдает 15 ошибок разметки Article?

    Ответить

  32. Webliberty

    На момент написания статьи ошибок не было) С недавних пор он ввел свои правила, по его мнению, некоторые дополнительные свойства для Article являются обязательными, в то время как стандарт Schema.org на это не указывает. По результатам проверки микроразметки в Яндекс ошибки не выявлены.

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

    Ответить

  33. Артем Губтор

    Webliberty, Хороший дипломатичный ответ :twisted: Я тоже стараюсь ориентироваться в этом вопросе на яндекс, все таки мне кажется он русскоязычному населению ближе и от соблюдения его требований толку соответственно больше.

    Ответить

  34. Webliberty

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

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

    Значение mainEntityOfPage по сути дублирует атрибут rel="canonical" тега <link>.

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

    Ответить

  35. Сергей

    Спасибо автору за подробную инструкцию. Планировал внедрить микроразметку, но как-то боязно ковыряться в коде. Теперь думаю справлюсь)

    Ответить

  36. Женя

    Вопрос: можно использовать не все разметки? Выделить шапку, подвал и контент (article)?

    Ответить

  37. Webliberty

    Женя, конечно можно, именно так у меня и сделано.

    Ответить

  38. Андрей

    Webliberty, подскажи пожалуйста! Около месяца появилась ошибка типа: (Отсутствует: homeLocation) Как можно исправить?

    Ответить

  39. Webliberty

    Андрей, а где эта ошибка появляется? Вы наверное используете другую схему, где homeLocation является обязательным свойством…

    Ответить

  40. Электрик

    Хорошая статья все просто и понятно. Спасибо автору за правильное направление куда идти так как у меня тема другая и код нужно просто пробовать подставлять в похожие файлы например автор предлагает single.php (одна запись) и page.php (страница), а я подставил в моей теме сюда content-page.php, page.php :cool:

    Ответить

Ваш комментарий:

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: