заказать звонок
+38 057 782-28-00
заказать звонок
Starting a new project?
получить консультацию
Читайте наш Telegram 👈
127
4

Что такое хлебные крошки и почему они должны быть на сайте? Разъясняем все от и до начинающим разбираться с SEO.

Хлебные крошки (breadcrumbs) - цепочка, которая указывает путь пользователя от Главной страницы до текущей.

Хлебные крошки простыми словами - аналог пути в Windows:

Хлебные крошки Windows

Рис. 1 - Крошки в Windows

Как они выглядят на сайтах:

Хлебные крошки ITForce

Рис. 2 - На сайте ITForce

Типичная структура крошек:

Главная - Раздел - Подраздел - Текущая страница 


1. Структура хлебных крошек

Разделяют 4 вида хлебных крошек.

Линейный:

Хлебные крошки линейные

Рис. 3 — Линейный тип структуры

На рисунке 4 уровня вложенности:

  1. Главная страница;
  2. Категория товара;
  3. Подраздел товара (выбранная ТМ);
  4. Страница нужного товара.

Вариант с кнопкой Назад:

Хлебные крошки Назад в цепочке

Рис. 4 — Кнопка Назад в цепочке

Внедрена и линейная структура, и кнопка Назад.

Выпадающее меню:

Хлебные крошки Выпадающее меню

Рис. 5 — Выпадающее меню

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

Динамический:

Когда один и тот же товар находится в разных подкатегориях. Обычно это раздел Распродажа и родительская категория товара.

Хлебные крошки динамические

Рис. 6 — Динамические

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


2. Задачи хлебных крошек

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

Вторая — цепочка навигации показывает структуру сайта (Главную страницу, Разделы и подразделы).

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

Структура сайта:

Блог структура

Рис. 7 — Структура сайта ecommerce

Бонусы использования хлебных крошек со стороны SEO:

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

Хлебные крошки сниппет Google

Рис. 8 — Сниппет в Google с микроразметкой

У Яндекс в приоритете ресурсы с четкой структурой, и цепочка формируется автоматически. Причем мы видим, что в Дескрипшн подтянулась и анкорная ссылка:

Хлебные крошки сниппет Яндекс

Рис. 9 — Сниппет в Яндекс

Название публикации берется из Title.


3. Требования к хлебным крошкам

Прежде чем внедрять цепочку навигации, учтите следующее:

  • на Главной странице хлебных крошек быть не должно;
  • необходимы всем сайтам с уровнем вложенности страниц больше 2;
  • наследуют общую стилистику ресурса (цвет, шрифт);
  • располагаются в верхней части страницы и разделяются знаком “>”. Вместо него можно прописать и любой другой элемент, например, стрелку;
  • последний элемент навигационного меню стилистически отличается от остальной цепочки + на странице отсутствует ссылка на саму себя;
  • отображаются и на десктопной, и в мобильной версиях сайта.

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


4. Как хлебные крошки прописать на сайте

Для CMS WordPress.

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

Для включения цепочки навигации заходите в:

  • Консоль;
  • Плагин Yoast SEO;
  • Отображение в поисковой выдаче;
  • Цепочки навигации;
  • Включить.

Breadcrumbs Yoast SEO

Рис. 10 — Yoast SEO

Хлебные крошки Yoast SEO

Рис. 11 — Yoast SEO

  • Вручную.

В файл functions.php добавляете функцию get_breadcrumb(). Далее в single.php прописываете функцию:

<div class=»breadcrumb»><?php get_breadcrumb(); ?></div>

Так вы вносите крошки во все записи сайта. Для страниц код добавляется в page.php над заголовком страницы, для рубрик — в category.php, и в header.php в конце файла.

Проверить, правильно ли настроена микроразметка крошек, можно в валидаторе Google. Вот что показала проверка сайта нашей компании:

Хлебные крошки валидатор

Рис. 12 — Проверка в валидаторе Гугл

Bitrix.

В header.php (файл шаблона сайта) размещаете код вызова элемента bitrix.breadcrumb:

<?$APPLICATION->IncludeComponent(«bitrix:breadcrumb»,»», Array(
«START_FROM» => «0» — показываете уровень вложенности раздела, с которого нужно начинать цепочку;
«PATH» => «» — путь, по которому располагается цепочка. Остается пустым, если нужно, чтоб цепочка строилась для текущего пути.
«SITE_ID» => «s1» — ID сайта, для которого создается цепочка навигации
));
?>

Joomla.

Отображение цепочки активируется в панели управления в Менеджере модулей:

  • Создать;
  • Навигатор сайта;
  • Окно настроек модуля;
  • Включить позицию модуля и название главной страницы;
  • Внести разделитель текста;
  • Сохранить.

Чтоб не показывать цепочку на Главной, зайдите во вкладку “Привязка к пунктам меню”, выберите опцию “На всех страницах, кроме указанных”, и отметьте пункт меню Главной.

Также их можно внести вручную: добавьте код в header.php или в раздел functions.php.

Opencart.

Есть несколько модулей для установки: 

Учитывайте требования из п. 3 к созданию хлебных крошек и внедряйте их на сайт.


Как стать сеошником?

Дайджест обновлений алгоритмов Google (лето 2021)

Как оформить футер сайта?

Подпишитесь на наши обновления
Больше полезных статей и мануалов еще впереди. Будьте в курсе!

Вы уже подписаны на нашу рассылку!

Подтвердите свой Email для завершения подписки.

Заказать
продвижение
Больше полезных статей и мануалов еще впереди. Будьте в курсе!

Спасибо! Скоро с Вами свяжется наш менеджер.