21555 Знания

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

Что такое «хлебные крошки», как внедрить разметку для «хлебных крошек» на сайт интернет-магазина, проект на 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 (Искусство› Книги› Поэзия).

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

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

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

Специалист по оптимизации Сергей Кокшаров (Devaka) советует использовать потенциал первой ссылки в хлебных крошках: вместо слова «Главная» писать главное ключевое слово сайта или название бренда, если один короткий ключ подобрать не получается.

Было:
Главная > Продукция > Пиломатериалы > Брус

Стало:
Строительные материалы > Пиломатериалы > Брус

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

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

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

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

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

Один из оптимизаторов в Твиттере спросил у представителя Google Джона Мюллера:

«Скажите, как вы относитесь к такому использованию эмодзи?»
Эмодзи в сниппете в выдаче
Много эмодзи в расширенном сниппете

Джон был скептичен:

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

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

Читатель блога PR-CY и оптимизатор Витя Смертный поделился своим опытом работы с сайтом 100.ks.ua:  чтобы сделать сниппет в выдаче заметнее, он добавил тематические эмодзи в описание и «хлебные крошки». Эмодзи было мало, так что сниппет выглядел аккуратно.

Сниппет с эмодзи в выдаче
Эмодзи в хлебных крошках в сниппете сайта

После добавления эмодзи сниппет показал рост кликабельности. Он стал заметнее на белом фоне выдачи.

Как увеличить CTR сниппета
Рост CTR сниппета

Рост CTR сниппета

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

Витя заметил, что в Google бывают внезапные смены отображения эмодзи в сниппете: красивый значок может начать отображаться как монохромный символ, а потом вернуться к первоначальному виду. 

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

    Выбор эмодзи для хлебных крошек
    Отображение эмодзи из каталога


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

    Какие эмодзи не стоит брать в сниппет
    Эмодзи не отображается

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

    Выбор эмодзи для автомобильной тематики

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

    Отталкивающие символы

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

    Плагины 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


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


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


    Комментарии (25)
    Chip111   14.03.2016 13:22
    "Проверка отображения навигационной цепочки в поиске"

    Скажем, не проверка отображения, а проверка распознавания.
    Taras_Cherkassky   14.03.2016 14:55
    "Распознают" поисковые системы, а рядовой пользователь видит, как она "отображается" в поиске. Но все равно спасибо за Ваше уточнение.))
    Kattyha   22.10.2019 14:31
    У меня переход по ссылке некорректный, после настройки крошек, с чем это может быть связано?
    Elena_Zhmurina   19.05.2020 14:41
    Видимо, есть какие-то ошибки в настройке, может, ссылки не полностью вставили?
    Natalia88   22.10.2019 16:33
    А можно настроить, чтобы первой была определенная страница, типа с акциями?
    Elena_Zhmurina   19.05.2020 14:39
    В крошках отображается реальная структура, чтобы пользователю было удобно переходить в предыдущие разделы сайта.
    Oleg Lexxs   22.10.2019 17:18
    Бесполезная статья.
    1. Про DLE нет ничего по поводу плагинов.
    2. версия Google Search Console на скриншоте не актуальная, у себя я не нашёл такого в меню, ни улучшения, ни Breadcrumbs
    Вернее пункт Улучшения есть, но там всего лишь два пункта и там нет Breadcrumbs
    Elena_Zhmurina   22.10.2019 18:07
    Здравствуйте!
    По поводу DLE - мы указали плагины к нескольким самым популярным среди наших пользователей движкам, ко всем существующим при всем желании этого бы сделать не удалось.
    Насчет скриншота - этот отчет есть не во всех версиях, его внедрили в англоязычную, хотя некоторые наши читатели отмечали, что у них он тоже появился.
    viktim   19.05.2020 13:12
    1. Зачем DLE плагин для хлебные крошки? Там есть столько тегов и возможностей для персональных настроек под себя. Достаточно написать пару десяток правил для каждого раздела и подключить к showfull.
    Belkanton Group   23.10.2019 05:56
    Для опенкарт первые 2 ссылки на варезник
    Elena_Zhmurina   19.05.2020 14:42
    Все поправили!)
    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
    Я так и не смог найти решение!
    Если на сайте есть сложная навигация и хлебные крошки не справляются, как быть?
    maxklim   19.05.2020 15:32
    Сайт состоит из небольшого количества страниц, нужны ли крошки?
    Elena_Zhmurina   19.05.2020 16:17
    Я бы сделала, если есть структура и можно отразить вложенность)
    Kirill_Chekin   19.05.2020 15:55
    Как мне быть,у меня интернет-магазин и некоторые товары повторяются в разных подразделах, как сделать удобную навигацию и не запутаться
    Elena_Zhmurina   25.05.2020 11:33
    Вынесли ваш вопрос в группу ВКонтакте, посмотрите советы пользователей - https://vk.com/wall-10770370_22085
    roger3   20.05.2020 06:47
    Не советую ставить хлебные крошки на сайт, если только это не интернет-магазин. Печальный опыт уже был. URL адрес должен быть органическим, если вы рассчитываете на хороший поисковый трафик, а если установить крошки, количество запросов, по которым можно будет найти сайт, станет значительно меньше. В общем тестировал я их на киносайте и спустя пару месяцев снес и сказал в жизни не поставлю.
    Юлия Тимина   22.05.2020 14:04
    Возможно, крошки не для этой ниши, у меня все отлично сайт по дизайну, не интернет-магазин, пока не проверишь на своем опыте не поймешь!
    Всегда все должно быть органично на любой странице,чтобы клиент мог быстро вернутся обратно на выше раздел,мне нравится когда есть стрелка вверх,особенно если туча позиций на странице,а то так можно устать крутить скролл

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

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

    К данной записи нельзя добавлять комментарии, т.к. она очень старая.
    Делаем структуру сайта для SEO: 15 советов по архитектуре сайта
    Главное о микроразметке Schema.Org и Open Graph: подборка знаний для веб-мастеров
    Какие виджеты поставить на сайт интернет-магазина: подборка для улучшения конверсии