15142 Знания

Хлебные крошки: как сделать и добавить на сайт

Что такое «хлебные крошки», как внедрить разметку для «хлебных крошек» на сайте интернет-магазина, проекта на Wordpress, Joomla и других CMS. Обновленное руководство.

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

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

Хлебные крошки на странице
«Хлебные крошки» на странице сайта

С помощью разметки настраивают отображение «Breadcrumbs» в сниппете:

Сниппет с разметкой хлебных крошек в выдаче Google
«Хлебные крошки» в сниппете

В сниппете они заменяют обычную ссылку в поиске названием разделов и подразделов, в которых находится страница.

Зачем нужна разметка с «крошками»

Преимущества разметки «Breadcrumbs»:

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

Откуда взялось название и причем здесь хлеб

«Хлебные крошки» показывают путь по иерархии сайта от главной до страницы, на которую переходит пользователь. Похожим образом путь отмечали персонажи из немецкой сказки «Гензель и Гретель»: они рассыпали хлебные крошки по пути в лес, чтобы по ним вернуться домой. Только в сказке крошки съели птицы, а на сайте путь «хлебных крошек» от главной до искомой страницы будет надежным.

Как добавить «хлебные крошки» самостоятельно

Яндекс формирует «крошки» по своему алгоритму, а настроить разметку для Google можно вручную, самостоятельно изменив код сайта. Разметка «BreadcrumbList» — это разновидность «ItemList» Schema.org, этот вариант предполагает использование микроданных или RDFa.

Почитать по теме:
Как внедрить микроразметку информации 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>


Пример разметки «BreadcrumbList» через язык RDFa:

<ol vocab="http://schema.org/" typeof="BreadcrumbList">
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" <br="">href="http://www.theguardian.com/arts">
<span property="name">Arts</span></a>
<meta property="position" content="1">
</li>
 ›
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" <br="">href="http://www.theguardian.com/arts/books">
<span property="name">Books</span></a>
<meta property="position" content="2">
</li>
 ›
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" <br="">href="http://www.theguardian.com/arts/books/poetry">
<span property="name">Poetry</span></a>
<meta property="position" content="3">
</li>
</ol>

С помощью разметки страницы с книгой Тима Минчина на сниппете видна детализация URL-адреса — Arts› Books› Poetry (Искусство› Книги› Поэзия).

Хлебные крошки в сниппете
Сниппет с разметкой

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

Почитать по теме:
Микроразметка для сайта интернет-магазина

Плагины CMS для «хлебных крошек»

Добавить навигационную цепочку в сниппет можно при помощи специальных плагинов для CMS.

Wordpress

Самым популярным плагином хлебных крошек для WordPress считается Breadcrumb NavXT. Есть и другие: Instant Breadcrumbs, Flexy Breadcrumb, Surbma | Yoast SEO Breadcrumb Shortcode, Breadcrumb, breadcrumb simple и еще множество. Все они позволяют установить хлебные крошки не только в поисковой выдаче, но и на страницах сайта.

Joomla

Добавить «Хлебные крошки» в CMS Joomla можно с помощью модуля «Навигатор сайта», тип модуля — «mod_breadcrumbs». Он находится в Панели управления — Расширения – Менеджер модулей.

Хлебные крошки, модуль для Joomla
Настройка модуля

Настройте модуль под свой сайт и укажите:

  • позицию модуля, в которой он будет выводиться на странице (отображение позиций включается так: Расширения — Менеджер шаблонов — Настройки — опция Просмотр позиций модулей — Включено);
  • название главной страницы;
  • разделитель текста для элементов навигации (обычно «/»).

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

Opencart

«Хлебные крошки» для движка Opencart устанавливают с помощью модуля. Под разные версии CMS есть разные модули: «Умные хлебные крошки» для Opencart 3.0, Правильные хлебные крошки для Opencart 2.x. Есть бесплатный модификатор, который делает неактивной ссылку на текущую страницу в хлебных крошках.

Webasyst

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

Плагин хлебных крошек для Webasyst
Настройка плагина

1С Битрикс

«Хлебные крошки» обычно находятся в комплекте решений для SEO, но есть и отдельный компонент «Умные хлебные крошки». Его можно использовать в каталоге или в многоуровневых разделах, которые связаны с инфоблоками.

Moguta

Для этого движка есть бесплатный плагин «Хлебные крошки». Для установки в Панели управления сайтом зайдите в раздел Маркетплейс, там найдите бесплатный плагин и запустите установку.

Плагин для CMS Moguta
Установка плагина

Правильно внедренная навигационная цепочка будет одинаково успешно распознаваться Google и другими поисковыми системами – Яндексом, Yahoo!, Bing и прочими. Без разницы, внедрили вы ее самостоятельно или с помощью плагина.

Как проверить отображение разметки «хлебных крошек»

Проверить внедрение микроразметки «хлебных крошек» можно с помощью инструментов Google и Яндекса.

В обновленной версии Google Search Console внедрили отчет «Breadcrumbs», в котором можно найти и исправить ошибки, связанные с отображением микроразметки в выдаче Google. Он находится в категории «Enhancements» (Улучшения).

Хлебные крошки в консоли Google
Отчет «Breadcrumbs» в Google Search Console


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


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

У Google проблемы с «хлебными крошками»
Google представил отчет по «хлебным крошкам»
Микроразметка для сайта интернет-магазина: как настроить разметку Schema.org для товаров и категорий
Комментарии (13)
Chip111   14.03.2016 13:22
"Проверка отображения навигационной цепочки в поиске" Скажем, не проверка отображения, а проверка распознавания.
Taras_Cherkassky   14.03.2016 14:55
"Распознают" поисковые системы, а рядовой пользователь видит, как она "отображается" в поиске. Но все равно спасибо за Ваше уточнение.))
Kattyha   22.10.2019 14:31
У меня переход по ссылке некорректный, после настройки крошек, с чем это может быть связано?
Natalia88   22.10.2019 16:33
А можно настроить, чтобы первой была определенная страница, типа с акциями?
Oleg Lexxs   22.10.2019 17:18
Бесполезная статья. 1. Про DLE нет ничего по поводу плагинов. 2. версия Google Search Console на скриншоте не актуальная, у себя я не нашёл такого в меню, ни улучшения, ни Breadcrumbs Вернее пункт Улучшения есть, но там всего лишь два пункта и там нет Breadcrumbs
Elena_Zhmurina   22.10.2019 18:07
Здравствуйте! По поводу DLE - мы указали плагины к нескольким самым популярным среди наших пользователей движкам, ко всем существующим при всем желании этого бы сделать не удалось. Насчет скриншота - этот отчет есть не во всех версиях, его внедрили в англоязычную, хотя некоторые наши читатели отмечали, что у них он тоже появился.
Belkanton Group   23.10.2019 05:56
Для опенкарт первые 2 ссылки на варезник
ricoberd   23.10.2019 06:41
т.е. для Яндекса никто не знает как делать?)
NatTi   23.10.2019 07:16
Хлебные крошки, хоть для яндекса, хоть для гугл, имеют привлекательный вид и работают одинаково
yorgiy   23.10.2019 07:43
Скажите пожалуйста, как исправить на вордпрес ошибки: Строки навигации - Отсутствует поле "id" Эти ошибки прислал гугл вебмастер. Спасибо!
psyleads   23.10.2019 09:54
У меня тоже. Строки навигации - Отсутствует поле "id" . Сайт сделан на wordpress
betb   27.10.2019 22:30
Ну че, нашли решение?
yorg   30.10.2019 19:34
Я так и не смог найти решение!

Чтобы оставлять комментарии, вам нужно войти в систему

Авторизоваться