Зачем нужны хлебные крошки на сайте: разбираем по порядку

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

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

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

Дальше разберём виды крошек, каким сайтам они нужны, как они влияют на SEO и UX, как их реализовать вручную и через CMS, разберём микроразметку, типичные ошибки и мобильную адаптацию.

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

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

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

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

Что такое breadcrumb?

Breadcrumb - это английский термин, которым изначально называют тот же навигационный элемент интерфейса. Дословный перевод - «хлебная крошка», во множественном числе breadcrumbs. Термин закрепился в веб-разработке и SEO-среде ещё с ранних лет развития интернет-магазинов и крупных информационных порталов, когда стало ясно, что пользователю нужен простой навигатор по разделам сайта.

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

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

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

На английском хлебные крошки правильно переводятся как breadcrumbs, во множественном числе, потому что цепочка всегда состоит из нескольких элементов, а не одного. Именно так этот навигационный элемент называют в англоязычной документации CMS, в руководствах по SEO и в коде шаблонов. Дальше в тексте этот термин мы не используем повторно - для этого есть понятный русский аналог.

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

Какие виды хлебных крошек существуют

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

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

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

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

Обратные хлебные крошки - менее распространённый вариант, применяется там, где важно показать не путь «сверху вниз», а связанные страницы одного уровня или альтернативные маршруты к той же цели. Для большинства проектов он остаётся второстепенным вариантом.

Атрибутивные, или фасетные, крошки применяются в карточках товаров и фильтрах интернет-магазина или на маркетплейсе. Они отражают выбранные пользователем параметры: например, «Категория - Бренд - Цвет», и показывают не структуру сайта, а комбинацию фильтров, по которым человек пришёл к текущему списку товаров.

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

Зачем нужны хлебные крошки пользователю (UX)

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

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

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

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

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

Как хлебные крошки влияют на SEO

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

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

Отдельный эффект - отображение в сниппете выдачи. Если крошки размечены микроразметкой (schema.org/BreadcrumbList), поисковая система может показать в сниппете не длинный URL, а путь по разделам сайта. Корректный сниппет с крошками выглядит аккуратнее и понятнее, что повышает CTR - пользователь видит, в каком разделе лежит страница, и кликает увереннее.

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

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

Каким сайтам нужны хлебные крошки

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

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

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

Отдельно стоят визитки и небольшие сайты услуг на 5-10 страниц без общей древовидной структуры. Формально крошки там можно поставить, но пользы от них немного - такие проекты обычно решают узкие задачи продвижения конкретного предложения, а не навигацию по большому объёму контента.

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

Как создать хлебные крошки: вручную и через CMS

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

<nav aria-label="breadcrumb">
 <a href="/">Главная</a> >
 <a href="/catalog/">Каталог</a> >
 <span>Название товара</span>
</nav>

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

Но в большинстве случаев проще не писать код руками, а настроить готовый модуль CMS. В WordPress крошки создают через плагин Yoast SEO или Rank Math - в обоих есть встроенный расширенный блок breadcrumbs, который достаточно включить в настройках и один раз вставить функцию вывода в файл шаблона темы (header.php или через блок в конструкторе). Есть и отдельный плагин Breadcrumb NavXT, если SEO-плагин по какой-то причине не используется. На проектах на WordPress крошки обычно ставят именно через Yoast или Rank Math - это быстрее, чем писать свой шаблон, и работает стабильно в разных версиях темы.

В 1С-Битрикс крошки реализует встроенный компонент bitrix:breadcrumb - его достаточно вставить на нужный шаблон страницы через административную панель, настройка не требует отдельного плагина. В Joomla задачу решает модуль «Навигатор сайта» (mod_breadcrumbs), который включается в разделе модулей и привязывается к позиции шаблона. В OpenCart крошки встроены в ядро движка и настраиваются через структуру категорий - отдельно скачивать или устанавливать ничего не нужно.

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

Микроразметка хлебных крошек: JSON-LD и BreadcrumbList

Видимая цепочка ссылок на странице - это только оформление. Чтобы поисковик показал её прямо в сниппете выдачи, нужна микроразметка хлебных крошек по схеме schema.org BreadcrumbList. Без неё робот видит обычный список ссылок и не понимает, что это именно навигационная иерархия.

Разметки бывает два формата: Microdata (атрибуты прямо внутри тегов ol, li, href) и JSON-LD (отдельный блок кода в тегах script). Google рекомендует JSON-LD как предпочтительный формат - он не перемешан с контентом (content) страницы, поэтому его проще формировать и проверять на ошибки.

Разделение разметки и видимой структуры страницы снижает риск, что правки в оформлении сломают структурированные данные - это и есть причина, почему JSON-LD считается более надёжным форматом.

Каждый элемент BreadcrumbList внутри itemListElement должен содержать три обязательных свойства: position (порядковый номер уровня), name (видимое название) и item (url страницы). Для последнего, текущего уровня свойство item иногда не указывают - это стандартное допущение схемы. Пример корректного кода:

{
 "@context": "https://schema.org",
 "@type": "BreadcrumbList",
 "itemListElement": [
 {
 "@type": "ListItem",
 "position": 1,
 "name": "Главная",
 "item": "https://example.ru/"
 },
 {
 "@type": "ListItem",
 "position": 2,
 "name": "Каталог",
 "item": "https://example.ru/catalog/"
 },
 {
 "@type": "ListItem",
 "position": 3,
 "name": "Текущая страница"
 }
 ]
}

После формирования разметки её нужно проверить, иначе есть риск, что в выдаче она просто не появится. Основной инструмент - Google Rich Results Test: вставляете url или код, сервис показывает, какие элементы распознаны корректно и где ошибки. Второй обязательный шаг - валидатор в Яндекс.Вебмастере, в разделе проверки структурированных данных. Удобно смотреть вывод в консоли (console) браузера на этапе разработки - там сразу видно, если тег с разметкой не подгрузился.

Типичные ошибки при настройке хлебных крошек

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

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

Вторая ошибка - переспам ключевыми словами. Иногда в название уровня крошки вписывают не реальное название раздела, а длинную фразу с ключевыми словами ради SEO. Это ошибка переоптимизации, и она возникает именно при попытке искусственно вписать ключи в текст крошек вместо естественного названия категории. Поисковик такое распознаёт, и доверие к разметке снижается.

Третья - циклические ссылки в категориях товара. Такое часто случается на крупных интернет-магазинах, когда товар относится к нескольким категориям одновременно, и из-за неправильной настройки категорий крошка А ссылается на Б, а Б обратно на А. Робота это может запутать, а пользователя - точно.

Четвёртая - загрузка крошек через JavaScript. Если блок с хлебными крошками подгружается только на стороне клиента, без серверного рендеринга, это мешает индексации роботами поисковых систем: часть ботов просто не выполняет скрипты и не видит цепочку вообще. Разметку лучше отдавать сразу в HTML-коде страницы.

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

• Слишком длинная цепочка из шести-семи уровней вместо разумных трёх-четырёх
• Дублирование названия раздела и названия текущей страницы
• Отсутствие разделителя или непонятное оформление между уровнями

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

Мобильная адаптация и практические рекомендации

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

Такой подход решает сразу две задачи: экономит место на экране и сохраняет полную навигационную цепочку без сокращений. Дизайн крошек на смартфонах стоит сделать компактнее для улучшения восприятия: уменьшить отступы, сделать разделитель тоньше (символ «больше» или косая черта смотрится аккуратнее громоздкой стрелки), а цвет текста - менее контрастным, чем у активной кнопки раздела, чтобы крошки не отвлекали от основного контента страницы.

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

Перед тем как считать работу с крошками завершённой, рекомендуем пройти короткий чек-лист:

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

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

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

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

Список литературы

1. Google Search Central - Breadcrumb (BreadcrumbList) structured data
2. Сообщество Schema - спецификация BreadcrumbList для структурированных данных
3. Яндекс для вебмастеров - Микроразметка и расширенные сниппеты
4. Nielsen Norman Group - «Breadcrumbs: 11 Design Guidelines for Desktop and Mobile», исследование юзабилити навигации и хлебных крошек