Хлебные крошки микроразметка пример. Хлебные крошки с микроразметкой для WordPress. Влияние хлебных крошек на SEO

20.11.2019 Уроки по Windows

"; } if (($key != $penult_item_key) || $show_last) { echo "" . $separator . ""; } echo "";

найдите строки:

"; echo "" . $item->name . ""; echo "

";

и замените их на строки:

// Render last item if reqd. echo "

"; echo "" . $item->name . ""; echo "

";

Готово. Сохраняйте переопределение и после переиндексации страниц поисковой системой увидите результат.

«Руководитель проектов команды "Бизнес-Мотор", вебмастер, копирайтер.
Хлебные крошки полезны для пользователей и для поисковиков. Микроразметка легче ориентирует пользователя на сайте и используется поисковиками для формирования расширенного сниппета. Рассказываем, что к чему»

Даже весьма серьезные успехи в части повышения позиций могут быть нивелированы непривлекательными сниппетами с низким CTR. И напротив, интересный, мотивирующий сниппет может выделять сайт среди прочих даже в том случае, если он не находится на первых строках выдачи. Именно по этой причине любые возможности по расширению сниппета можно и нужно использовать максимально. Одна из таких — микроразметка «хлебных крошек», которая позволяет показывать в выдаче рубрику, к которой относится материал, в читабельном и понятном пользователю виде.

Что такое «хлебные крошки»?

«Хлебные крошки» (Breadcrumbs) — это общепринятое название навигационной цепочки, которая отражает путь к данной странице сайта с учетом структуры категорий и подкатегорий. Выглядеть она может примерно следующим образом:

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

Как выглядит расширенный сниппет?

Проиллюстрируем сниппет на примере конкретного сайта до и после применения микроразметки «хлебных крошек». Вот так выглядел типичный сниппет обзора книги в Google ранее:

А вот такая информация появилась в выдаче после того, как микроразметка была внедрена, а страница повторно проиндексировалась поисковой системой:

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

Микроразметка «хлебных крошек» в Google и Яндекс

Стоит отметить, что расширенный сниппет в части навигационной цепочки в Google и Яндекс имеет определенные различия, которые следует учитывать. Так, в частности, если применение микроразметки «хлебных крошек» (при условии отсутствия ошибок) практически наверняка отразятся в выдаче Google, то в Яндексе этого гарантировать нельзя. В Яндекс.Вебмастере по этому поводу приводится следующее пояснение:

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

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

Интересно и другое наблюдение . В расширенный сниппет Google рубрикация подтягивается в строгом соответствии с навигационной цепочкой, размеченной на сайте. В то же время Яндекс «хлебные крошки» может вообще проигнорировать, а показать структуру согласно url-адреса (даже если в реальной размеченной навигационной цепочке больше или меньше уровней).

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

Как использовать микроразметку навигационной цепочки?

Существует несколько стандартов, которые позволяют выполнить микроразметку навигационной цепочки, и все они в равной степени поддерживаются как Яндексом, так и Google. В их числе — OpenGraph, RDF, Schema.org и microdata. Никаких существенных преимуществ у каждого из них нет, так что можно использовать тот, который понятнее администратору сайта или верстальщику.

В качестве примера приведем микроразметку «хлебных крошек» с помощью RDF-маркеров data-vocabulary.org. Для этого необходимо заключить всю навигационную цепочку в тэг

, после чего пометить каждый ее элемент в отдельности.

Сегодняшняя статья будет посвящена микроразметке хлебных крошек под Google на основе микроданных http://data-vocabulary.org/.
Вопрос : зачем вообще нужна микроразметка для хлебных крошек?
Ответ : чтобы придать сниппету более красивый вид, информация будет выглядеть понятней и удобнее для пользователя, тем самым мы повысим конверсию. Рассмотрим на примере результата выдачи по запросу «микроразметка хлебных крошек»(рис. 1).

рис.1 Выдача гугла(сайты, которые используют микроразметку цепочки навигации подчеркнуты зеленым)

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

Как использовать микроданные и разметить хлебные крошки?

Предположим у нас такая цепочка:
Мебель — Корпусная мебель –тумбы
Во первых нужно обернуть каждый элемент цепочки навигации в блок(например div) с атрибутами itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”.
Itemscope означает, что данный блок описывает элемент.
Itemtype какого типа элемент(в нашем случае наш элемент для навигации)
Должна получиться обертка:

Далее вставляем в обертку ссылку и добавляем атрибут itemprop= «url» . Он указывает разметке, что это ссылка. И последний шаг для первого элемента хлебных крошек – добавляем блок внутрь ссылки с названием первого элемента. В этот блок добавляем атрибут itemprop= «title» .
Получился первый элемент навигационной цепочки:

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

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

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

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

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

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

– микроразметка, встроенная в ядро 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

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

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

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

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

%htitle%

%htitle%

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

1. Dresses
2. Real Dresses

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

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

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

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

Это не обязательно, можно использовать

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


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


Рис 16 – код который обрамляет Breadcrumb NavXT
Находим в файле breadcrumb_navxt_widget.php следующий код:
Echo "
"; И меняем его: echo "
"; //Display the regular output breadcrumb bcn_display(false, $instance["linked"], $instance["reverse"]); echo "
";
Сохраняем файл и перезаписываем его на сервере, в результате получаем то что нам нужно.


Рис 17 –обозначение разметки BreadcrumbList
Он обозначает новую принадлежность к другому типу данных - schema.org/ListItem
А также он описывает свойство – itemListElement. Это свойство уже относится к размечаемым элементам в хлебных крошках. То есть это свойство нам нужно использовать в нашем исходном коде при выводе непосредственно хлебных крошек.
В нашем случае мы будем использовать это в плагине Breadcrumb NavXT.
В начало кода, отвечающего за хлебные кошки –
%htitle%
Мы добавим строку:
%htitle%
Нужно разметить элемент itemprop=”item”, из примера видим, что он отвечает за разметку URL адреса хлебных крошек.
Добавляем его перед href=”%link%” Получаем в итоге:
Далее размечаем свойство itemprop=”name”, то есть имя, которое соответствует нашему URL адресу, уже размещенному нами. Нам необходимо %htitle%, который в нашем случае отвечает за нужное имя – обрамить свойством itemprop=”name”.
Получаем
%htitle%
В конце нам нужно добавить обозначение позиции элемента в иерархической системе, используя свойство itemprop=”position”.
Для этого добавляем строку кода
Главное – делать все аккуратно и в пределах открытых
или
И так, исходя из имеющегося исходного кода:
%htitle%
На основе примера получается следующий код:
%htitle%
Также приведем примеры уже готовых кодов разметки для Breadcrumb NavXT.
%htitle% %htitle%
%htitle%
%htitle%
С Микроразметкой:
%htitle%
В итоге, после успешного добавления микроразметки, мы увидим следующие результаты проверки с помощью .


Рис 18 – валидная микроразметка хлебных крошек
Видео
ИНН: 772578776588
ОГРН: 315774600103615
ОКПО: 0194004627
ОКТМО: 45914000000
ОКАТО: 45296559000
р/с: 40802810300310000244
в АКБ «БАНК МОСКВЫ» (ОАО) отделение «Перовское»
к/с: 30101810500000000219
БИК: 044525219
Фактический адрес: г. Москва, шоссе Энтузиастов, дом 56, строение 26, офис 304
Юридический адрес: 115191, г. Москва, 4-й Рощинский проезд д.7/16
Давайте для начала разберемся — что это такое — хлебные крошки на сайте и зачем они нужны.
Первоначально хлебные крошки использовались для удобства навигации пользователей. По сути — это блок ссылок вверху страницы, отображающие иерархию сайта. Т.е. пользователь может вернуться, к примеру, на предыдущую страницу каталога в интернет-магазине.
Вот яркий пример:

Влияние хлебных крошек на SEO
Со временем SEO-оптимизаторы заметили, что данный блок ссылок положительно влияет на продвижение ресурса. И работает это вот почему:
1. Внутренняя перелинковка
По иерархии практически любого сайта — чем меньше уровень вложенности раздела — тем он важнее. Поэтому необходимо обеспечивать такую структуру сайта, чтобы ссылки с более глубоких страниц вели на менее глубокие. Проще объяснить на примере.
Как видно на изображении — каждый товар ссылается на категорию, а каждая категория ссылается на главную страницу сайта.
Такая перелинковка стала неким стандартом в области продвижения и поэтому ее даже начали использовать поисковые системы прям в собственной выдаче. Делается это при помощи микроразметки Schema, но об этом позже.
2. Поведенческие факторы
Несколько лет назад поисковые системы начали анализировать поведение пользователей на сайте и в зависимости от него — ставить страницы на ту или иную позицию по запросам. Как вы понимаете, один из из этих поведенческих факторов — количество внутренних переходов на сайте. Хлебные крошки в некоторых случаях могут серьезно улучшить этот показатель.
Микроразметка Schema для хлебных крошек
Микроразметка позволяет поисковым системам точнее определить хлебные крошки и даже бонусом добавить их в свою выдачу. Выглядеть это будет примерно так:
И если сами хлебные крошки чаще всего на сайтах установлены по умолчанию, то вот микроразметку чаще всего приходится добавлять вручную. Поэтому напишем небольшую инструкцию, как это реализовать.
Главная
Теперь рассмотрим, что это такое.
Первое, что нам необходимо сделать — это обернуть каждую ссылку в тег и в самом теге прописать
itemscope=»» itemprop=»itemListElement» itemtype=»http://schema.org/ListItem»
ССЫЛКА
Этот тег у нас остается по умолчанию. В нем мы говорим поисковикам — что вот это разметка schema и элемент этой разметки называется itemListElement. Данная конструкция используется во всех ссылках.
Главная
Соответственно, если бы у нас был второй уровень вложенности, надо было бы написать content=»2″.
2016-05-11