Микроразметка Яндекс и Google – как настроить schema.org

План статьи:

Ошибки микрорзметки
Добавляем микроразметку хлебных крошек

В Google Search Console – есть пункт «Структурированные данные».

Структурированные данные

Рис 1 – ошибки в микроразметке

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

Рис 2 – ошибки микроразметки Hentry

В нашем случае мы видим, что имеются 106 ошибок, которые относятся к разметке формата hentry (microformats.org)

hentry – микроразметка, встроенная в ядро WordPress. Так как она встраивается автоматически и не адаптирована под сторонние шаблоны — чаще всего работает неправильно, и это приводит к тому, что Google Search Console обнаруживает такие ошибки:

hentry

Рис 2.1 – ошибки Hentry: author, entry-title, updated

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

Инструмент для проверки микроразметки от Google

Рис 3 – гугл не видит ошибок hentry

На нашем сайте мы будем использовать признанную всеми поисковыми системами единогласно микроразметку – schema.org.

Этот стандарт поддерживает как Яндекс, так и Google.

Поэтому, встроенную микроразметку hentry, которая в Google Search Console выдает нам 106 ошибок – необходимо просто удалить.

Так как hentry добавляется в ядро wordpress —,что позволяет удалить ее через фильтры, потому как в шаблонах этих классов не видно.

Исходный код для удаления hentry:

add_filter('post_class', 'fc_remove_hentry', 20);
function fc_remove_hentry($classes) {
if (($key = array_search('hentry', $classes)) !== false) {
unset( $classes[$key] );
}
return $classes;
}

Код необходимо добавить в functions.php

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

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

Рис 4 – удаление разметки hentry со всего сайта

После сохранение файла и повторной валидации страницы через инструмент для проверки микроразметки от Google – hentry должна будет пропасть.

Проверьте несколько страниц, которые имели ошибки, чтобы убедится, что hentry полностью удалена с сайта.

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

Google Search Console

Рис 5 – положительная динамика уменьшения ошибок hentry

Как удалить ошибку:

Подпишитесь на авторский телеграм-канал про предпринимательство в России.

ОШИБКА: поле http://ogp.me/ns#image отсутствует или пусто

Ошибка микроразметки

Рис 6 – ошибка Open Graph ns#image

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

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

В нашем случае на сайте присутствует плагин — SEO Ultimate, который имеет специальный раздел, отвечающий за разметку Open Graph. А это значит, что ошибка связанная с http://ogp.me содержится именно в плагине SEO Ultimate.

Заходим по следующему пути SEO Ultimate -> Open Graph -> Default Values -> Default Image

Находим настройку картинки, которая будет применяться по умолчанию на тех страницах сайта, на которых не будет найдено нужной картинки.

Настройка картинки

Рис 7 – как исправить ошибку Open Graph ns#image

Добавляем URL адрес картинки, которую бы мы хотели видеть по умолчанию. Напомню что The Open Graph protocol отвечает за вывод красивых постов в социальных сетях, в фейсбуке, твиттере, вконтакте и так далее. То есть эта картинка, которую вы зададите по умолчанию, будет фигурировать в постах социальных сетей, репостах и так далее. Выбирайте брендовую и респектабельную фотографию.

После сохранения изменений – ошибка пропадает.

Исправление ошибки

Рис 8 – ошибка Open Graph ns#article

Но по-прежнему остается ошибка, связанная с неизвестным префиксом article.

Мы с вами уже в курсе, что у нас на сайте установлен плагин SEO Ultimate. Продолжаем копать в этом же направлении.

Продолжение настройки микроразметки

Рис 9 – как исправить ошибку Open Graph ns#article

Устанавливаем Open Graph Type – Website.

Установка Open Graph

Рис 10 – правильная разметка Open Graph

После всех изменений валидатор разметки Яндекс больше не выдает никаких ошибок:

Отсутствие ошибок микроразметки

Рис 11 – валидная разметка Open Graph

Добавляем микроразметку хлебных крошек

Хлебные крошки — это цепочка ссылок от главной страницы до страницы, где сейчас находится пользователь.

Для начала нужно проанализировать сайт на наличие хлебных крошек.

Анализ хлебных крошек

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

Хлебные крошки на сайте присутствуют. Теперь нужно понять, каким образом они выводятся. В исходном коде хлебных крошек находим название плагина, с помощью которого они функционируют — Breadcrumb NavXT 4.0.2

Хлебные крошки функционал

Рис 13 – хлебные крошки выводятся через Breadcrumb NavXT

Открываем админ панель нашего сайта и заходим в редактирование плагина Breadcrumb NavXT.

Редактирование плагина Breadcrumb NavXT

Рис 14 – Настройки Breadcrumb NavXT

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

В нашем случае нас интересуют:

Шаблон ссылки на страницу блога
Шаблон на главную
Рубрика блога Шаблон
Шаблон ссылки на рубрику

Все шаблоны имеют стандартный вид типа:

<a title=»Перейти к %title%.» href=»%link%»>%htitle%</a>

Или

<a title=»Перейти к рубрике ‘%title%’.» href=»%link%»>%htitle%</a>

Чтобы получить правильную микроразметку, нам нужно разметить этот исходный код с помощью стандарта http://schema.org/BreadcrumbList

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/dresses">
<span itemprop="name">Dresses</span></a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/dresses/real">
<span itemprop="name">Real Dresses</span></a>
<meta itemprop="position" content="2" />
</li>
</ol>

Разберем по порядку, какие элементы содержит разметка, и как их следует применять:

itemscope itemtype=”http://schema.org/BreadcrumbList”

Этот элемент обозначает начало размечаемой области. Все что будет внутри этого элемента – это будет разметка хлебных крошек.

В примере элемент находится внутри нумерованного списка – тег <ol >

Это не обязательно, можно использовать <div>, <span> или другие подобные теги.

Нужно смотреть по обстоятельствам и помнить что от того какой тег вы используете такой CSS и подключится к хлебным крошкам. То есть внешний вид ваших хлебных крошек зависит от того в какие теги вы обрамите http://schema.org/BreadcrumbList.

В нашем случае мы добавим эту строку кода через исходный код виджета breadcrumb_navxt_widget.php

Так как через стандартный редактор кода админ панели WordPress это файл недоступен, мы будем использовать фтп доступ через filezilla.

Filezilla

Рис 15 – Настройки виджета Breadcrumb NavXT

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

Код который отвечает за микроразметку

Рис 16 – код который обрамляет Breadcrumb NavXT

Находим в файле breadcrumb_navxt_widget.php следующий код:

echo '<div >';
//Display the regular output breadcrumb
bcn_display(false, $instance['linked'], $instance['reverse']);
echo '</div>';
И меняем его:
echo '<div itemscope itemtype="http://schema.org/BreadcrumbList">';
//Display the regular output breadcrumb
bcn_display(false, $instance['linked'], $instance['reverse']);
echo '</div>';

Сохраняем файл и перезаписываем его на сервере, в результате получаем то что нам нужно.

Сохранение файла

Рис 17 –обозначение разметки BreadcrumbList

Далее мы видим элемент itemprop=»itemListElement» itemscope itemtype=»http://schema.org/ListItem»

Он обозначает новую принадлежность к другому типу данных — schema.org/ListItem

А также он описывает свойство – itemListElement. Это свойство уже относится к размечаемым элементам в хлебных крошках. То есть это свойство нам нужно использовать в нашем исходном коде при выводе непосредственно хлебных крошек.

В нашем случае мы будем использовать это в плагине Breadcrumb NavXT.

В начало кода, отвечающего за хлебные кошки –

<a title=»Перейти к %title%.» href=»%link%»>%htitle%</a>

Мы добавим строку:

<span itemprop=»itemListElement» itemscope itemtype=»http://schema.org/ListItem»>

В конце кода добавим </span>

Далее, внутри кода

<a title=»Перейти к %title%.» href=»%link%»>%htitle%</a>

Нужно разметить элемент itemprop=”item”, из примера видим, что он отвечает за разметку URL адреса хлебных крошек.

Добавляем его перед href=”%link%” Получаем в итоге:

<a title=»Перейти к %title%.» itemprop=»item» href=»%link%»>

Далее размечаем свойство itemprop=”name”, то есть имя, которое соответствует нашему URL адресу, уже размещенному нами. Нам необходимо %htitle%, который в нашем случае отвечает за нужное имя – обрамить свойством itemprop=”name”.

Получаем

<span itemprop=»name»>%htitle%</span>

В конце нам нужно добавить обозначение позиции элемента в иерархической системе, используя свойство itemprop=”position”.

Для этого добавляем строку кода

<meta itemprop=»position» content=»1″ />

Главное – делать все аккуратно и в пределах открытых <div> или <span>

Вывод:

И так, исходя из имеющегося исходного кода:

<a title=»Перейти к %title%.» href=»%link%»>%htitle%</a>

На основе примера получается следующий код:

<span itemprop=»itemListElement» itemscope itemtype=»http://schema.org/ListItem»>
<a title=»Перейти к %title%.» itemprop=»item» href=»%link%»>
<span itemprop=»name»>%htitle%</span>
</a>
<meta itemprop=»position» content=»1″ />
</span>

Также приведем примеры уже готовых кодов разметки для Breadcrumb NavXT.

Шаблон ссылки на блог с микроразметкой

<span itemprop=»itemListElement» itemscope itemtype=»http://schema.org/ListItem»> <a title=»Перейти к %title%.» itemprop=»item» href=»%link%»> <span itemprop=»name»>%htitle%</span></a><meta itemprop=»position» content=»1″ /></span><span itemprop=»itemListElement» itemscope itemtype=»http://schema.org/ListItem»> <a title=»Перейти к %title%.» itemprop=»item» href=»%link%»> <span itemprop=»name»>%htitle%</span></a><meta itemprop=»position» content=»2″ /></span>

Шаблон ссылки на главную с микроразметкой

<span itemprop=»itemListElement» itemscope itemtype=»http://schema.org/ListItem»> <a title=»Перейти к %title%.» itemprop=»item» href=»%link%»> <span itemprop=»name»>%htitle%</span></a><meta itemprop=»position» content=»1″ /></span>

Рубрика блога Шаблон с микроразметкой

<span itemprop=»itemListElement» itemscope itemtype=»http://schema.org/ListItem»> <a title=»Go to the %title% Рубрика блога archives.» itemprop=»item» href=»%link%»> <span itemprop=»name»>%htitle%</span></a><meta itemprop=»position» content=»2″ /></span>

Шаблон ссылки на рубрику с микроразметкой

С Микроразметкой:

<span itemprop=»itemListElement» itemscope itemtype=»http://schema.org/ListItem»> <a title=»Перейти к рубрике %title%.» itemprop=»item» href=»%link%»> <span itemprop=»name»>%htitle%</span></a><meta itemprop=»position» content=»2″ /></span>

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

Правильная микроразметка