Как исправить ошибки микроразметки сайта

Как удалить ошибки микроразметки

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

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

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

Что значит микроразметка Schema.org?

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

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

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

На что влияет микроразметка у ПС?

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

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

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

Надо заметить, что многие просто удаляют микроразметку на сайте. Я считаю это не совсем правильно. Конечно можно удалить её, но вместо неё нужно внедрить какую-то другую, но только не устаревшую, ту которой пользуются ПС.

На данный момент является актуальной разметка Schema.org, и если у вас отличная от этой разметка(например Open Graf, Data Vocabulary), которые являются устаревшими, то нужно заморочаться и поменять её. Про устаревшие разметки рассказывать не буду(хотя в инете полно этой информации), но скажу точно, что её еще применяют и например гугл использует её. Может дальше вовсе откажется, но поживём, как говорится, увидим.

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

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

То есть введя урл страницы, вы можете сделать проверку микроразметки сайта.

Как исправить ошибки: отсутствует: author, entry-title, updated

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

На своем примере, я вставил следующий код, который исправил данную ошибку.Найдите файл index.php или single.php или как у меня content.php, который выводит содержимое записей и страниц (я не зря выделил этот текст) в своей теме на сайте и открыв найдите код похожий на этот:

1

<h2 class="title"><?php the_title();?></h2>

который нужно видоизменить, а точнее добавить класс entry-title, после чего у вас должно получиться примерно так:

1

<h2 class="title entry-title"><?php the_title();?></h2>

Или некоторые просто обворачивают тегом span, в атрибутах указывая класс, пример:

1

<h2 class="title"><span class="entry-title"><?php the_title();?></span></h2>

Хочу сразу добавить, что у меня был такой тег, я обернул его как положено, но всё равно ошибка не пропала. Я подробно занялся выяснением, оказалось, что сам title у меня выводился только на главной странице, а в записях и на страницах он (the_title) уже не участвовал, что может быть и у вас. Темы пишутся разными программистами и каждый видит свое детище по разному, поэтому и код может сильно отличаться. Если такое и у вас, тогда просто пропишите этот код вместе с автором и датой. Пусть отображается сразу всё вместе (тема, автор и дата), расположите эти коды в конце статьи, а если хотите, чтобы не бросались в глаза, то можно сделать маленьким шрифтом или совсем скрыть.

А сразу после этих строчек вставьте эти строки:

1
2

<span class="vcard author"><span class="fn"><?php the_author(); ?></span></span>
<span class="updated"><?php the_date(); ?></span>

Часто бывает так, что в сложных шаблонах не удается решить проблему с entry-title, в таком случае можно пойти другим путем. Открывайте файл functions.php и туда скопируйте код который ниже:

1
2
3
4
5
6
7
8

function wpc_add_class($classes) {
//этот цикл проверяет на каких страницах выполнять действие, если класс необходимо добавлять на все страницы, то проверку можно и убрать.
if ( is_single() || is_page() ) {
$classes[] = 'entry-title'; 
}
return $classes;
}
add_filter('post_class', 'wpc_add_class');

Далее сохраняем файл и теперь можно проверить микроразметку онлайн в валидаторе (вебмастер). После внесения этих данных в гугле ошибок больше не должно быть.

Важная информация.

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

Если посмотреть в валидаторе микроразметки яндекса, то мы обнаружим ошибку:

Которая говорит о том, что вывод даты не в формате стандарта iso 8601. Исправить проще простого, для этого в админке вордпресс открываем Настройки->Общие и в разделе Формат даты ставим галочку в строке где отображена дата такого вида 2017-01-18 Y-m-d. После чего опять сбрасываем кеш и проверяем, убеждаемся, что ошибка исчезла.

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

Используем плагин для создания микроразметки сайта

Так же можно найти способ установки микроразметки проще, т.е. установить плагин, например Schema Creator by Raven.

С его помощью не нужно править код, ведь всё за вас сделает этот плагин. После его установки, в админке появится кнопка, которая генерирует форму разметки.

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

В итоге у вас должны быть видны следующие результаты в валидаторе разметки Гугла и Яндекса:

Насколько я долго вычитывал о проблеме микроразметки, скажу, что нюансов великое множество, и как правило никто не даёт вам готовый ответ, так что если вы можете сами разобраться, то пожалуйста, а если нет — прямая дорога к профи по этому вопросу. Средняя цена исправления разметки от 300р. Так что дерзайте.

После всех исправлений и убедившись в валидаторе разметки, что ошибки исправлены, нужно подождать не меньше недели, а то и 2, чтобы убедиться, что ошибок entry-title, author, updated больше не возникает.

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

Если желаете посмотреть другие решения в WordPress, то можете пройти на страницу УРОКИ.

Удачного вам внедрения микроразметки на сайте!

Здравствуйте, дорогие посетители блога «Я блоггер». Поговорим сегодня об ошибках структурированных данных (микроразметке) в шаблоне блога HTML.

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

Что такое Schema.org  и hCard

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

Микроформаты разметок hCard  и  Schema.org уже встроены в шаблоны на бесплатном блогохостинге Blogger (Blogspot).

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

1. Валидатор микроразметки структурированных данных в Яндексе
2. Проверка микроразметки в Google —  сервис Structured Data Testing Tool

Как проверить сайт валидатором микроразметки в Яндекс Вебмастер. Заходим на сервис, открываем вкладку «Мои сайты» > «Содержимое сайта».

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

Проверяем структурированные данные через вебмастер Гугле. Заходим на сайт Google Search Console открываем свой сайт, нажимаем вкладку «Вид в поиске» > «Структурированные данные». На  Google Search Console можно другим путем проверить микроразметку сайта. Заходим на сайт по ссылке выше, открываем вкладку  «Другие ресурсы» > Инструмент проверки структурированных данных, прямая ссылка>>>

Как исправить ошибки микроразметки Schema.org

Распространенные ошибки микроразметки:

« author »
« image_url »
« blogid »
« postid »
« updated »
« headline»
« datePublished »

Что бы исправить ошибку « author » (автор), нужно зайти в Административную панель Blogger > Дизайн > Сообщения блога и установить галочку как на скриншоте.

Если блог привязан к профилю Google+ , заходим в профиль, открываем вкладку «О себе» > Ссылки > Добавить ссылку > вписываем название и Url-адрес своего блога.

Ошибка « image_url ». В шаблоне блога найти строку:

<meta expr:content=’data:post.firstImageUrl’ itemprop=’image_url’/>

Удаляем и вставляем другой код:

<meta expr:content=’data:post.firstImageUrl’ itemprop=’image’/>

Ошибки « blogid » и « postid » удаляются таким способом.

Находим в шаблоне блога строки:

<meta expr:content=’data:blog.blogId’ itemprop=’blogId’/>

<meta expr:content=’data:post.id’ itemprop=’postId’/>

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

Что бы исправить ошибку « updated », находим в шаблоне слова hentry и hfeed, таких слов может быть несколько. Что бы найти все, выделяем слово в поиске и нажимаем Enter.

Во всех вхождениях изменяем слова:

hentry на h-entry
hfeed на h-feed

Ошибка « headline ».

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

<h3 class=’post-title entry-title’ itemprop=’name’><h2 class=’post-title entry-title’ itemprop=’name’><h2 class=’post-title entry-title’ itemprop=’name headline’>

Изменяем строчку на:

<h3 class=’post-title entry-title’ itemprop=’headline’>

С каким тегом найдете код с таким, и отмечайте заголовок (h2 или h3).

Ошибка datePublished (Дата публикации) исправляется, как и ошибка «автор».

Заходим в Административную панель Blogger > Дизайн > Сообщения блога, устанавливаем галочку напротив вкладки дата и изменяем параметры.

Проверяйте сайт в разных валидаторах микроразметки. Что хорошо для Яндекса, может быть плохо для Google.

Говорят: «Всем не угодишь», но тут не тот вариант. У каждой поисковой системы свои алгоритмы, свои фильтры, требования и стандарты и ничего не поделаешь! Надо идти в ногу с поисковыми системами. И будет нам всем счастье!:-)

Будь вместе с Я Блоггер

Я даю согласие на сбор и обработку своих персональных и не
персональных данных согласно действующей на сайте — политике конфиденциальности.

*

Привет, читатели блога! Если вы здесь оказались, значит, столкнулись с частой проблемой вебмастеров. Это ошибки и предупреждения в Яндекс Вебмастер при проверке валидации микроразметки сайта.

Мы рассмотрим наиболее распространённые. Чтобы от них избавиться, потребуется небольшая правка кода. Так что, сделайте предварительно дочернюю тему. А также резервное копирование файлов. И начинаем по порядку.

ПРЕДУПРЕЖДЕНИЕ: поле https://schema.org/query-input не определено в спецификации http://schema.org/SearchAction

Итак, первым делом обратим внимание на такое предупреждение:

ПРЕДУПРЕЖДЕНИЕ: поле https://schema.org/query-input не определено в спецификации http://schema.org/SearchAction

Возникает оно в валидаторе микроразметки Яндекс из-за некоторых настроек Yoast SEO. Это великолепный плагин. Но он выводит в микроразметку строку поиска. А нам это не надо. Как его убрать? Сделаем фильтрацию. Для исправления нужно добавить в файл functions.php такой код:

add_filter( 'disable_wpseo_json_ld_search', '__return_true' );

Если кто пока не знает, файл functions.php находится в корневой папке сайта. И располагается примерно по такому адресу:

wordpress/public_html/wp-content/themes/ваша_тема/functions.php

А вставка делается в конце файла перед закрывающим тегом ?>

Прилагаю для наглядности скриншот:

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

Далее по списку идёт ошибка в валидаторе микроразметки Яндекс такого вида:

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

И опять же она связана с плагином  Yoast SEO. Но на этот раз исправления нужно производить в настройках самого плагина. А именно, в разделе «Социальные сети» заполнить вкладки и вставить ссылку на изображение в библиотеке. Вот так просто убирается данная ошибка.

ОШИБКА: префикс article неизвестен валидатору, укажите его явно атрибутом prefix

И переходим к следующей распространённое ошибке. Выглядит она таким образом:

ОШИБКА: префикс article неизвестен валидатору, укажите его явно атрибутом prefix

Для исправления требуется вставить префикс в код HTML в файл header.php. Находится он тоже в корневом каталоге сайта. По пути, который я указала выше. Только ищете header.

Давайте посмотрим, куда именно вставляется данный префикс. Где-то в начале файла должна быть строка примерно такого вида (может отличаться):

<html <?php language_attributes(); ?>>

И для наглядности посмотрим скриншот:

Именно в эту функцию добавляем после тега ?> и перед закрывающим символом > такой префикс:

prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article# profile: http://ogp.me/ns/profile# fb: http://ogp.me/ns/fb#"

После этого должен получиться такой код:

<html <?php language_attributes(); ?> 
      prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article# profile: http://ogp.me/ns/profile# fb: http://ogp.me/ns/fb#"
      >

И посмотрим изменения на скриншоте:

Рекомендации

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

Поэтому первым делом необходимо убедиться, что в валидаторе Яндекс Вебмастер ошибки отсутствуют. Для этого исследуйте несколько страниц сайта, чтобы сделать полную проверку. Всё чисто? Тогда можно спокойно спать по ночам.

Полезные статьи:

Исправление неправильных кавычек в WordPress.

Вставка блока кода на сайт и придание уникального стиля.

Как присвоить тень тексту в файле style.css.

Правильно настроенная микроразметка вашего сайта играет важную роль в SEO оптимизации. Это упрощает взаимодействие с поисковыми системами и повышает доверие ресурса в их глазах, что непосредственно влияет на позиции в поисковой выдачи.

В Blogger внедрена разметка schema.org. И если в новых темах она настроена более-менее корректно, то в шаблонах старых тем необходимо делать корректировки, чтобы устранить ошибки.

Проверить наличие ошибок в микроразметки вашего сайта вы можете в валидаторах от Яндекса или Гугла. Ошибки у них могут отличаться, т.к. алгоритмы работы у них разные. Поэтому, проверяйте и там, и там. Делается это очень просто: вставляете адрес своего интернет ресурса, запускаете тест и получаете данные.

А сегодня мы разберемся с распространённые ошибки schema.org и их исправим.

Ошибка: image_url

Описание ошибки: 

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

<b:if cond=’data:post.thumbnailUrl’>

<meta expr:content=’data:post.thumbnailUrl’ itemprop=’image_url’/>

</b:if> 

И замените его на:

План статьи:

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

В 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