Внедрение микроразметки Schema.org на WordPress
Здравствуйте! Пришло время рассказать о том, как я внедрял микроразметку Schema.org на своем блоге в конце прошлого года и что из этого получилось.
Schema.org является единым общепризнанным стандартом, который распознают наиболее популярные поисковые системы, такие как Google, Яндекс, Yahoo и Bing. Его разработкой занимается международная группа начиная с лета 2011 года.
Приведу пару доводов в пользу разметки:
- логическая структура информации на странице помогает поисковым системам извлекать и обрабатывать данные;
- формирование расширенных сниппетов на странице с результатами поискового запроса улучшает кликабельность.
Спецификация стандарта предлагает владельцам сайтов разнообразные схемы, которые можно использовать для карточек товаров в интернет-магазинах, кулинарных рецептов с пошаговыми инструкциями и необходимыми ингредиентами, адресов организаций и размещения отзывов. Полный список схем Вы найдете на официальной странице проекта.
Блоги, как правило, состоят из страниц ориентированных на информационные запросы. Они не содержат отзывов или галерей изображений, не продают товары и не имеют адреса организации. Поэтому для блогов больше всего подходит схема CreativeWork — Творческие работы.
Пример семантической верстки с помощью микроразметки
А сейчас я приведу пример верстки блога на WordPress с применением атрибутов Schema.org. Нам потребуется добавить атрибуты itemscope , itemtype , itemprop и присвоить им свойства в соответствии с принятой схемой CreativeWork.
Имеются в виду заголовки, секционные и блочные элементы, теги. Обращайте внимание на стандартные функции WordPress и к ним добавляйте необходимые атрибуты по аналогии с примером.
Разметка верхней части страницыФормирование конечной страницы в WordPress осуществляется путем объединения нескольких файлов шаблона. Исходный код верхней части страницы как правило располагается в файле header.php. Добавим атрибуты тегу <body> чтобы обозначить тело веб-страницы. Тип разметки — WebPage.
Теперь добавим микроразметку к тегу <header> — это секционный элемент HTML5, который используется для шапки сайта. Тип разметки — WPHeader.
В моем случае название блога динамически обертывается в различные теги в зависимости от того, на какой странице мы находимся. Открывая главную страницу название заключено в заголовок H1, а названия анонсов в H2. В свою очередь, переходя на страницу с одной записью, в заголовок верхнего уровня помещается название статьи, а название блога является обычной ссылкой, ведущей на главную страницу.
Таким вот образом у меня сформирована логическая структура заголовков, правильная с моей точки зрения. Добавляю в конструкцию свойство name :
И сразу после добавляю описание, которое размечается атрибутом itemprop со свойством description :
Разметка навигационного менюВ верхнем меню сайта, как правило, находятся ссылки, ведущие на статические страницы, важные разделы или отдельные категории. Для меню сайта схемой предусмотрен тип разметки — SiteNavigationElement.
Здесь применяются свойства name и url для атрибута itemprop . Подобная разметка поможет поисковым системам определить для сайта быстрые ссылки, которые не редко встречаются в результатах поиска.
Разметка основного содержимогоОсновное содержимое страницы формируется в файлах single.php (одна запись) и page.php (страница). Для начала задаю статье тип разметки Article:
Указываю рубрику или категорию, в которой расположена запись:
Но есть одно НО. ПС находят эти данные и выводят дату в сниппете, получается что статьи, написанные давно, вроде как и остаются актуальными по сей день, но CTR выдачи сильно падает.
Имя автора, разместившего статью:
Как я уже говорил, заголовок статьи заключен в тег H1, дополним его тегом itemprop с присвоенным свойством headline :
В справке сервиса Яндекс.Вебмастер сообщается, что если в документе одновременно используются атрибуты headline и name , то обрабатываться и участвовать в формировании сниппета будет только последнее значение свойства.
С помощью свойства articleBody атрибута itemprop делаем микроразметку для основного текста записи:
Разметка комментариевДля комментариев в стандарте Schema.org также есть все необходимые атрибуты и свойства, которые позволяют поисковым роботам правильно идентифицировать текст комментария, автора и дату размещения. Ниже привожу фрагмент файла comments.php, однако в Вашей теме код может находиться в другом файле, даже в functions.php. Тип разметки — Comment.
Добавим информацию об авторе с помощью свойства creator , принадлежащего атрибуту itemprop :
Укажем время размещения комментария. Обратите внимание, свойство commentTime я применил только к дате, исключив время (часы и минуты). Дата должна быть в формате ISO 8601, иначе это приведет к ошибке валидации микроданных. Про формат дат с приведенными примерами можно почитать в Википедии.
И, наконец, используем text чтобы выделить сам текст комментария:
Разметка боковой колонки (сайдбара)Боковая колонка sidebar.php является неотъемлемым элементом большинства блогов. В сайдбаре удобно располагать список категорий, информацию об авторе, дополнительные элементы навигации и блоки важной информации. Добавим микроразметку Schema.org, используя тип WPSideBar:
Разметка нижней части страницы (футера или подвала)В подвале блога мы можем использовать тип разметки WPFooter. Таким образом мы сообщаем поисковикам, что это нижняя часть страницы и она не содержит важной информации для большинства пользователей.
Соответствующие атрибуты я добавляю к секционному элементу <footer> современного стандарта HTML5.
На самом деле, внедрить микроразметку Schema.org на WordPress не такое уж и сложное занятие, если Вы хорошо разбираетесь в верстке. У меня больше времени ушло на написание этой статьи, чем на добавление в код новых элементов.
В следующей записи я расскажу о том, как проверить разметку на ошибки. С удовольствием отвечу на вопросы и комментарии 🙂