Что такое хлебные крошки (Breadcrumbs)?

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

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

Этот навигационный элемент обычно выглядит как строка текста со ссылками, расположенная в верхней части страницы. Например: Главная → Блог → SEO → Текущая статья. Каждый элемент этой цепочки, кроме последнего, является ссылкой на соответствующий раздел, или уровень иерархии сайта.

Зачем нужны хлебные крошки?

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

Польза для пользователей (UX)

  • Ориентация в пространстве сайта. Хлебные крошки — это визуальная карта. Пользователь всегда понимает, в каком разделе сайта он находится и какова структура этого раздела.
  • Удобная навигация. Вместо того чтобы нажимать кнопку «Назад» в браузере или возвращаться в основное меню, пользователь может в один клик перейти на любой из предыдущих уровней (например, из карточки товара в категорию).
  • Снижение показателя отказов. Предоставляя понятные пути для навигации, вы удерживаете посетителей. Если текущая страница не совсем то, что искал пользователь, он с большей вероятностью перейдет в родительскую категорию, а не закроет вкладку.

Польза для поисковых систем (SEO)

  • Улучшение понимания структуры сайта. Поисковые роботы используют навигационную цепочку для лучшего понимания иерархии и связей между страницами. Это помогает им эффективнее сканировать и индексировать ваш веб-сайт.
  • Улучшение сниппета в поиске. Google и другие поисковики могут использовать данные из хлебных крошек (при наличии микроразметки) для отображения пути к странице прямо в результатах поиска. Это делает сниппет более информативным и привлекательным, что может повысить кликабельность (CTR).
  • Распределение внутреннего ссылочного веса. Каждая ссылка в хлебных крошках передает небольшой вес на родительские страницы, усиливая их значимость в глазах поисковых систем.

Виды хлебных крошек

Существует три основных типа хлебных крошек. Выбор конкретного вида зависит от структуры и типа вашего сайта.

  1. Иерархические (Location-based). Это самый распространенный и интуитивно понятный тип. Цепочка строится на основе иерархии сайта и показывает, где расположена текущая страница. Это стандарт для большинства сайтов.
    Пример: Главная → Мужская одежда → Рубашки → Рубашка в клетку
  2. Атрибутивные (Attribute-based). Такой тип навигации строится на основе атрибутов или фильтров, которые пользователь выбрал для просмотра товаров. Чаще всего они встречаются в крупных интернет-магазинах со сложной фильтрацией.
    Пример: Главная → Ноутбуки → Бренд: Apple → Диагональ: 16" → Память: 512 ГБ
  3. Хронологические (History-based). Этот тип показывает последовательность страниц, которые посетил пользователь, чтобы попасть на текущую. На практике он используется редко, так как его функционал частично дублирует кнопка «Назад» в браузере и может вносить путаницу.
    Пример: Главная → Статья о SEO → Страница контактов → Текущая страница

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

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

Общие рекомендации

  • Расположение: Классическое место — верхняя часть контентной области, под «шапкой» сайта и над заголовком H1.
  • Начальный элемент: Цепочка всегда должна начинаться со ссылки на главную страницу сайта.
  • Последний элемент: Название текущей страницы должно быть последним в цепочке и не должно быть активной ссылкой. Это предотвращает создание бессмысленных циклических ссылок.
  • Разделители: Чаще всего используется символ «>», но также подходят «/» или «→». Главное — придерживаться единого стиля на всем сайте.
  • Адаптивность: На мобильной версии сайта хлебные крошки особенно важны. Их не следует скрывать. Если цепочка слишком длинная, ее можно сократить, показав, например, только первый и последний элементы.

Микроразметка Schema.org

Чтобы поисковые системы гарантированно поняли, что на странице есть хлебные крошки, и могли использовать их в сниппете, необходимо внедрить специальную микроразметку. Рекомендованный Google формат — JSON-LD.

Вот как выглядит пример кода для страницы товара:

<pre>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Главная",
"item": "https://example.com/"
},{
"@type": "ListItem",
"position": 2,
"name": "Каталог",
"item": "https://example.com/catalog/"
},{
"@type": "ListItem",
"position": 3,
"name": "Смартфоны",
"item": "https://example.com/catalog/smartphones/"
},{
"@type": "ListItem",
"position": 4,
"name": "Смартфон Model X"
}]
}
</script>
</pre>

В этом коде мы с помощью словаря Schema.org последовательно описываем каждый элемент навигационной цепочки: его порядковый номер (position), название (name) и URL (item). Обратите внимание, что у последнего элемента нет поля item, так как он не является ссылкой.

Частые ошибки при внедрении

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

Ошибка Почему это плохо
Дублирование основного меню Хлебные крошки — это вспомогательная, а не основная навигация. Они должны показывать иерархию, а не просто повторять пункты главного меню.
Последний элемент является ссылкой Это создает циклическую ссылку на ту же страницу, что бесполезно и сбивает с толку пользователя.
Использование в качестве заголовка страницы Хлебные крошки и заголовок H1 — это два разных элемента с разными задачами. Не нужно их подменять.
Отсутствие на мобильной версии На маленьких экранах ценность быстрой и понятной навигации только возрастает. Прятать или убирать крошки на мобильных устройствах — ошибка.
Нелогичный или неполный путь Цепочка должна отражать канонический, основной путь к странице. Если к странице можно прийти несколькими путями, в крошках должен быть показан самый логичный и короткий.

Заключение

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