Что такое «хлебные крошки»

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

Время прочтения:

4 минуты

Дата публикации:

16.09.25

63

Главная

Что такое «хлебные крошки»

глоссарий

a

b

c

d

e

f

g

h

i

j

l

m

o

p

r

s

t

u

v

w

y

А

Y

А

Б

В

Г

Д

Е

з

и

к

л

м

н

о

п

р

с

т

у

ф

х

ц

ч

ш

А

Я

метрика месяца

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

ROMI

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

Иерархические — отражают структуру разделов (самые распространённые);
По истории — «вы посетили: …» (редко используют; не стабильно для SEO);
По атрибутам/вложенности фильтров — показывают выбранные характеристики (нельзя подменять ими иерархию).

Для SEO и UX обычно используют иерархические крошки: от Главной к «родительским» разделам.

Польза: UX и SEO

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

Правила хороших крошек

Показывайте от корня: Главная → … → Текущая страница;
Последний элемент крошек — без ссылки (вы уже здесь);
Используйте чистые канонические URL в ссылках (без ?utm=, ?sort=);
Крошки должны соответствовать реальной иерархии, а не истории действий;
Размещайте вверху основного контента, продублировать можно внизу;
На мобильном — допускается обрезка середины (Главная … Клинкерная) с доступом ко всем уровням по тапу;
Для доступности: nav с aria-label="breadcrumb", список ol > li, достаточно контраста и кликабельной области.

Разметка для поисковиков

Рекомендуется JSON-LD (проще поддерживать) — тип BreadcrumbList.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li><a href="https://example.ru/">Главная</a></li>
    <li><a href="https://example.ru/katalog/">Каталог</a></li>
    <li><a href="https://example.ru/katalog/plitka/">Плитка</a></li>
    <li aria-current="page">Клинкерная</li>
  </ol>
</nav>

<script type="application/ld+json">
{
  "@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/katalog/"},
    {"@type": "ListItem","position": 3,
     "name": "Плитка","item": "https://example.ru/katalog/plitka/"},
    {"@type": "ListItem","position": 4,
     "name": "Клинкерная","item": "https://example.ru/katalog/plitka/klinker/"}
  ]
}
</script>

Важно: видимые крошки и JSON-LD должны совпадать. Не размечайте то, чего нет в интерфейсе.
Если нужна встроенная разметка, можно Microdata:

<ol itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.ru/"><span itemprop="name">Главная</span></a>
    <meta itemprop="position" content="1">
  </li>
  <!-- ... -->
</ol>

Крошки и разные структуры

Несколько категорий у товара: выберите основную (primary category) для крошек, чтобы не плодить варианты;
Фасетные фильтры: не включайте параметры (?color=blue) в крошки; их место — в отдельном блоке «Вы выбрали: …»;
Мультирегион/мультиязык: крошки ведут по иерархии внутри текущего языка/региона; используйте hreflang отдельно;
Блог: рубрика → подрубрика → статья; можно добавить «Глоссарий»/«Рубрики» как верхний уровень.

Частые ошибки

Нет крошек на карточках и лонгридах — теряете навигацию и внутренний «вес»;
Несоответствие: одно в UI, другое в JSON-LD;
Ссылки на редиректы/параметры — увеличивают «глубину клика», портят индексацию;
Последний элемент — ссылка (лишний переход «на самого себя»);
Слишком длинные названия — «ломают» верстку; сокращайте аккуратно, добавляйте title-подсказку;
Дубли цепочек (несколько разных «путей» на одной странице) — путаница для пользователя и робота.

Измерение и отладка

Проверьте валидаторы разметки (Rich Results Test);
В краулере смотрите: inlinks на родительские страницы выросли ли после внедрения;
В аналитике пометьте клики по крошкам как событие — оцените влияние на глубину/конверсии;
В Search Console отслеживайте улучшения «Хлебные крошки» (ошибки/предупреждения).

Мини-чек-лист

Крошки есть на всех важных типах страниц (категории, товары, статьи);
Верстка доступная: nav[aria-label="breadcrumb"], ol > li, последний — без ссылки;
Ссылки ведут на канонические 200-OK URL, без параметров и 3xx;
JSON-LD BreadcrumbList совпадает с видимой цепочкой;
На мобильном крошки читаемы (обрезка/скролл), кликабельная область достаточна;
Для товаров с несколькими категориями определена основная для крошек.

заключение

Хлебные крошки — это простой, но мощный элемент: навигация для людей, сигналы структуры для роботов и аккуратный путь в сниппете. Делайте крошки иерархическими, ведите на канонические URL, размечайте BreadcrumbList и держите UI и разметку в согласии — получите лучший UX, более «плоскую» глубину клика и прибавку к CTR в поиске.