План статьи:
- Ошибки микрорзметки
- Добавляем микроразметку хлебных крошек
В Google Search Console – есть пункт «Структурированные данные».
Рис 1 – ошибки в микроразметке
Начать микроразметку своего сайта лучше с проверки этого раздела. Часто бывает, что инструменты по проверке микроразметки не показывают никаких предупреждений или ошибок, но на самом деле поисковые системы имеют трудности в структурировании данных на вашем сайте.
Рис 2 – ошибки микроразметки Hentry
В нашем случае мы видим, что имеются 106 ошибок, которые относятся к разметке формата hentry (microformats.org)
hentry – микроразметка, встроенная в ядро WordPress. Так как она встраивается автоматически и не адаптирована под сторонние шаблоны — чаще всего работает неправильно, и это приводит к тому, что Google Search Console обнаруживает такие ошибки:
Рис 2.1 – ошибки Hentry: author, entry-title, updated
Но, при этом инструмент для проверки микроразметки от 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 вы увидите положительную динамику уменьшения количества ошибок. С течением времени они исчезнут вовсе, остается только ждать.
Рис 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.
Рис 10 – правильная разметка Open Graph
После всех изменений валидатор разметки Яндекс больше не выдает никаких ошибок:
Рис 11 – валидная разметка Open Graph
Добавляем микроразметку хлебных крошек
Хлебные крошки — это цепочка ссылок от главной страницы до страницы, где сейчас находится пользователь.
Для начала нужно проанализировать сайт на наличие хлебных крошек.
Рис 12 – хлебные крошки на сайте
Хлебные крошки на сайте присутствуют. Теперь нужно понять, каким образом они выводятся. В исходном коде хлебных крошек находим название плагина, с помощью которого они функционируют — Breadcrumb NavXT 4.0.2
Рис 13 – хлебные крошки выводятся через 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.
Рис 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.
Рис 18 – валидная микроразметка хлебных крошек
Видео
Автор: Максим Глотов – MaxGlot
08 Апр 2024
150616