Все посты
Обновлено 9999+ 29 Знания

Как сделать хлебные крошки на сайте 🍞 [Полное руководство + бонус]

Всё о хлебных крошках в SEO: зачем нужны, как добавить на сайт, какую разметку внедрить. Решения для Wordpress, Bitrix, Joomla и других CMS.

Обновленный материал.

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

Разберемся, каким сайтам нужна такая разметка и как ее настроить правильно.

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

Разметка на странице
Товарная страница citilink.ru

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

Сниппет в Google
Выдача Google

Отображаемая цепочка в сниппете может меняться в зависимости от пользовательского запроса, но с помощью крошек поисковику будет проще определить категорию контента для поискового запроса.

Каким сайтам нужны хлебные крошки и чем они полезны в SEO

Польза разметки «Breadcrumbs»:

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

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

  • Делают сниппет нагляднее.
    В сниппете благодаря крошкам появляются понятные названия категорий. Это может повысить кликабельность сниппета. Пользователи могут сразу перейти на нужный раздел прямо из выдачи.

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

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

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

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

Советы для создания правильных хлебных крошек

  • На главной крошки не нужны.

Главная страница — стартовая, в цепочке навигации на главной просто нечего отображать.

Разметка навигации на сайте
Главная и товарная страницы petshop.ru
  • Ссылка на страницу, где находится пользователь, не нужна.

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

Есть два варианта оформления хлебных крошек, чтобы избежать циклической ссылки. Название текущей страницы делают некликабельным, как на сайте apteka.ru:

Разметка на товарной странице
Страница товара

Второй вариант — текущую страницу убирают из цепочки. В этом примере с lamoda.ru крошки заканчиваются на разделе «Декор настольный», это предыдущая страница для товара Philippi.

Разметка breadcrumbs
Cтраница товара
  • Привычное место для хлебных крошек — верхняя часть страницы.

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

Разметка на новостной странице
Новость на seroundtable.com
  • Замените первую ссылку на ключ или бренд.

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

Вместо крошек вида «Главная > Продукция > Пиломатериалы > Брус» сделать «Строительные материалы > Продукция > Пиломатериалы > Брус».

Как настроить разметку BreadcrumbList на сайте

Яндекс формирует крошки по своему алгоритму. Для Google настроить разметку можно вручную с помощью разметки Schema.org.

Еще по теме:
Как внедрить микроразметку информации Schema.Org на сайт

Разметка «BreadcrumbList» — разновидность «ItemList». Она предполагает использование форматов Microdata и RDFa.

Пример разметки «BreadcrumbList» через Microdata:

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="/">
<span itemprop="name">Главная</span></a>
<meta itemprop="position" content="1″ />
</li>
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="/catalog/">
<span itemprop="name">Каталог</span></a>
<meta itemprop="position" content="2″ />
</li>
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="/catalog/woman/">
<span itemprop="name">Женская одежда</span></a>
<meta itemprop="position" content="3″ />
</li>
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href=" /catalog/woman/dress/">
<span itemprop="name">Платья</span></a>
<meta itemprop="position" content="4″ />
</li>
</ol>

Типичная ошибка разметки хлебных крошек

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

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

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

Проверить внедрение микроразметки можно с помощью инструментов от ПС: инструмента Google и валидатора Яндекса.

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

Проверить разметку на сайте в консоли
Отчет в Google Search Console

Плагины разметки для разных CMS

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

Wordpress

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

Код разметки хлебных крошек нужно поместить в файлы:

  • показать крошки везде — в файл header.php;

  • для всех записей — в файл single.php;

  • для статистических страниц — в файл page.php;

  • для всех рубрик — в файл category.php.

В меню плагинов можно настроить ссылки, задать значок разделителя для ссылок.

Joomla

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

Модуль для Joomla
Настройка модуля

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

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

  • название главной страницы;

  • разделитель текста для элементов навигации (обычно «/»).

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

Opencart

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

Webasyst

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


Плагин разметки для Webasyst
Настройка плагина

1С Битрикс

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

Moguta

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

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

Проверьте правильность настройки с помощью валидатора Яндекса или Google.

Бонус: фишка для повышения CTR в выдаче с помощью хлебных крошек

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

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

Эмодзи в сниппете в выдаче
Сниппет сайта в выдаче

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

Как увеличить кликабельность сниппета
График с CTR сниппета
Показатели роста CTR сниппета
Рост CTR сниппета

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

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

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

Смайлы для сайта
Эмодзи не отображается

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

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

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

Эмодзи для размещения на сайте
Красные маркеры

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


Сайт в выдаче
Перебор элементов

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


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

Обновила Елена Жмурина

Возьмите под контроль продвижение своего сайта
Исправьте ошибки, которые мешают сайту выйти в топ, и вы увидите рост трафика и дохода.
🔍 Подпишись на @prcynews в телеграм — оставайся в курсе последних SEO новостей и свежих материалов.

Теги поста или какие разделы почитать еще:

Комментарии (29)
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
Возможно, крошки не для этой ниши, у меня все отлично сайт по дизайну, не интернет-магазин, пока не проверишь на своем опыте не поймешь!
Всегда все должно быть органично на любой странице,чтобы клиент мог быстро вернутся обратно на выше раздел,мне нравится когда есть стрелка вверх,особенно если туча позиций на странице,а то так можно устать крутить скролл
Veronika Keiner   20.09.2021 01:25
Добрый! У меня так я настроила с Yoast вывела в начале странице. Но в поисковой выдаче показывает линк а не хлебные крошки. Что может быть за проблема? https://property-in-munich.ru/kupit-dom-v-myunhene/
Elena_Zhmurina   20.09.2021 16:45
Давно настраивали?
Некоторые сниппеты выглядят, к примеру, так https://prnt.sc/1sysxcw То есть поисковик все-таки вывел цепочку.
assessor   21.09.2021 16:48
Мне крошки не помогают. Хотя все настроено правильно.
Elena_Zhmurina   13.10.2021 18:02
Тут нужно разобраться с ожиданиями, какой эффект вы от них ждете?
К данной записи нельзя добавлять комментарии, т.к. она очень старая.
🔥 Внутренняя оптимизация сайта — большой гайд по самостоятельной проверке
Эффективная внутренняя перелинковка: как работать с ссылками на сайте
Микроразметка Schema.org для контента — статей, QA и FAQ