Что такое хлебные крошки на сайте — и почему они не про историю твоих кликов

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

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

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

Что это такое

Хлебные крошки — строка ссылок над содержимым страницы:

Главная > Обувь > Кроссовки > Беговые

Первая ссылка ведёт на главную, каждая следующая — на раздел поуже. Последний пункт — страница, на которой ты сейчас. Разделитель — обычно > или /. NN/g советует >, но оговаривается: функциональной разницы нет.

Крошки — вспомогательная навигация. Они не заменяют главное меню, а дополняют его.

Иерархия, а не история — и почему это важно

Представь интернет-магазин. Человек гуглит «беговые кроссовки с широкой колодкой» и попадает на карточку одной модели. Главную он не видел. Меню ещё не открывал.

Модель ему не подошла. Что дальше? Если на странице есть «Кроссовки > Беговые», он в один тап уходит к соседним моделям. Если нет — закрывает вкладку и идёт обратно в поиск.

Теперь попробуй сделать крошки «по истории». Человек пришёл из поиска — истории у него нет, строка пустая. Ровно там, где крошки нужнее всего, они бесполезны. А у того, кто долго бродил по сайту, строка разрастётся в длинную ленту с повторами.

Отсюда же следующее правило. Если страница живёт в двух разделах сразу (кроссовки есть и в «Беговых», и в «Распродаже»), выбери один основной путь. Не подстраивай крошки под маршрут каждого посетителя.

Как сделать правильно: пять правил

1. Начинай с главной. Исключение — если ссылка «Главная» уже есть в шапке, дублировать не обязательно.
2. Последний пункт — текущая страница, и он не ссылка. Ссылка, которая ведёт туда же, где ты стоишь, только путает. Выдели его визуально, чтобы было видно, что это «ты здесь».
3. В крошках только настоящие страницы. Если в меню есть подгруппа «Сетевое оборудование», но своей страницы у неё нет — в крошки её не ставь. Каждый пункт должен куда-то вести.
4. Не нужны на плоских сайтах. Лендинг, сайт из пяти страниц, пошаговая форма — там всего один-два уровня, крошки ничего не объясняют. Хватит подсвеченного пункта в меню.
5. На телефоне — коротко. Крошки, которые переносятся на две-три строки, съедают экран и выталкивают заголовок вниз. Мелкие ссылки впритык не попасть пальцем: NN/g называет минимум касания около 1 × 1 см. Частое решение — показывать один шаг вверх: «‹ Беговые».

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

Как это выглядит в коде

Разметку для доступности описывает руководство W3C по ARIA-паттернам: крошки лежат внутри nav с подписью, у текущей страницы стоит aria-current="page".

<nav aria-label="Хлебные крошки">
  <ol>
    <li><a href="/">Главная</a></li>
    <li><a href="/shoes/">Обувь</a></li>
    <li><a href="/shoes/running/">Беговые</a></li>
    <li aria-current="page">Кроссовки Stride 3</li>
  </ol>
</nav>

Список ol — потому что порядок важен. Скринридер прочитает примерно так: «навигация, хлебные крошки, список из четырёх пунктов» — и отдельно объявит, какая страница текущая.

Попроси ИИ сгенерировать крошки — и почти наверняка получишь последний пункт ссылкой и никакого aria-current. Проверь эти две вещи в первую очередь.

Крошки и поиск Google

Для поисковика есть отдельная разметка — BreadcrumbList в формате JSON-LD. В документации Google сказано, что поиск использует её, чтобы категоризировать информацию со страницы в выдаче.

А 23 января 2025 года Google убрал крошки из мобильной выдачи: там теперь виден только домен. Причина из их блога — на маленьком экране крошки всё равно обрезались. На десктопе крошки в выдаче остались, а сама разметка продолжает работать, переделывать ничего не нужно.

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

Хлебные крошки могут заменить меню?

Нет. Они показывают путь только вверх по одной ветке и не дают перейти в соседний раздел. Главное меню остаётся, крошки — дополнение к нему.

Нужны ли крошки на лендинге?

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

Какой разделитель ставить — «>» или «/»?

Любой. NN/g рекомендует >, потому что он читается как направление, но исследователи прямо пишут, что разницы в работе нет. Главное — один символ на весь сайт.