Проверить сайт

Хлебные крошки breadcrumbs: как сделать и разметить для навигации и SEO

Представьте, что вы зашли в огромный торговый центр без карты: искали зимнюю обувь, прошли три этажа, перепутали лестницы и уже теряли ориентир. А потом над головой мигает тонкая полоска — Главная > Одежда > Обувь > Зимняя — и всё становится на места. Это и есть хлебные крошки (breadcrumbs): незаметный элемент, который одновременно улучшает навигацию для человека и помогает поисковикам понять структуру страницы. Разбираем, что такое хлебные крошки, зачем они нужны в SEO и UX, как сделать их визуально в HTML и добавить микроразметку BreadcrumbList через JSON-LD — с готовым примером кода и чек-листом типичных ошибок.

Что такое хлебные крошки и зачем они нужны

Хлебные крошки — это навигационная цепочка, которая отображает путь пользователя от главной страницы до текущей. Визуально это последовательность ссылок, разделённых символами «>» или «/». Например: Главная > Каталог > Электроника > Телевизоры > Samsung QLED 65".

Этот элемент выполняет сразу три задачи — и только одна из них «техническая»:

  1. Улучшает пользовательский опыт (UX). Человеку не нужно тыкать кнопку «Назад» браузеры через несколько переходов — достаточно кликнуть по нужному уровню в цепочке. Особенно это важно на глубоких сайтах, где легко заблудиться после нескольких переходов.
  2. Помогает поисковым системам понимать структуру. Когда Google видит «Главная > Каталог > Электроника», он понимает, что текущая страница — подкатегория каталога. Это упрощает индексацию и даёт странице дополнительный контекст.
  3. Повышает CTR в поисковой выдаче. Когда поисковик показывает страницу вместе со структурой пути, это создаёт ощущение надёжности и логичности сайта. По косвенным оценкам наличие крошек в сниппете может поднять CTR на 15–30% для конкурентных страниц.

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

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

На практике встречаются три основных типа. Понимание разницы помогает не перепутать навигацию и микроразметку.

Навигационные (иерархические) крошки

Самый распространённый тип — та самая полоска «Главная > Раздел > Страница» в верхней части страницы. Она показывает, где пользователь находится прямо сейчас, и даёт быстрый верный ход на уровень выше. Именно про них речь в первую очередь: это и есть breadcrumb навигация в классическом понимании.

Каталогные крошки

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

Крошки из URL (автоматические)

Иногда путь строят автоматически на основе структуры адреса страницы. Это работает только если URL точно повторяет пользовательскую иерархию. Фильтры, технические сегменты и ID часто не имеют смысла для человека — поэтому структуру лучше брать из данных каталога, а не из «хвоста» ссылки.

Тип Когда нужен Пример
Навигационные Блоги, база знаний, глубокие разделы Главная > Блог > SEO
Каталогные Интернет-магазины Главная > Электроника > Телевизоры
Из URL Только при чистом ЧПУ, повторяющем иерархию Главная > /category/page

Как сделать хлебные крошки визуально (HTML-список)

Визуальные крошки — это то, что видит пользователь. Оформлять их лучше семантическим HTML: навигационным блоком <nav> со списком ссылок. Такой подход понят и людям, и скринридерам.

Базовый пример:

<nav aria-label="Хлебные крошки">
  <a href="/">Главная</a> →
  <a href="/catalog">Каталог</a> →
  <a href="/catalog/kofemashiny">Кофемашины</a> →
  <span aria-current="page">Espresso MA-900</span>
</nav>

Правила оформления, которые реально работают:

  • Расположение. Верхняя часть страницы, под шапкой/меню и над основным контентом. Пользователь сразу видит, где он находится.
  • Последний пункт — без ссылки. Текущая страница показывается текстом (лучше с aria-current="page"), потому что переход на тот же URL не даёт нового действия. Ссылками остаются только родительские уровни.
  • Минималистичный стиль. Серый цвет текста, шрифт примерно на 1–2 пункта меньше основного, едва заметные разделители («>» или «/»). Никаких стрелок и иконок без текста — они неочевидны для людей с нарушениями зрения.
  • Разумная глубина. Если уровней больше 5, пересмотрите структуру сайта. Слишком длинные цепочки ухудшают UX и могут не отобразиться в сниппете (Google обычно показывает 3–4 уровня).

Отдельно про фильтры: крошки отражают иерархию категорий, а не параметры фильтрации. Путь «Платья > Цвет: красный > Размер: S» — это ошибка. Для страниц с фильтрами используйте rel="nofollow" или noindex, чтобы не получать дубли URL.

Микроразметка Schema.org BreadcrumbList через JSON-LD

Визуальные крошки видит человек, но поисковики не всегда корректно интерпретируют обычные HTML-ссылки. Чтобы Google точно понял иерархию и мог отобразить расширенный сниппет, рекомендуется добавить структурированные данные — Schema.org BreadcrumbList в формате JSON-LD. Это скрытый код в <head> (или перед </body>), который не виден пользователю.

Готовый пример для страницы женских платьев:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Главная",
      "item": "https://вашсайт.ру/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Женщинам",
      "item": "https://вашсайт.ru/zhenshchinam/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Одежда",
      "item": "https://вашсайт.ru/zhenshchinam/odezhda/"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "Платья",
      "item": "https://вашсайт.ru/zhenshchinam/odezhda/platya/"
    }
  ]
}
</script>

На что обращать внимание в коде:

  • @context — указывает, что данные следуют схеме Schema.org.
  • @type — обязательно BreadcrumbList.
  • itemListElement — массив элементов цепочки.
  • position — порядковый номер с 1, от главной к текущей странице. Каждая позиция уникальна и не должна нарушаться.
  • name — текст, который видит пользователь.
  • item — абсолютный URL со схемой https://. Относительные ссылки Google не распознаёт.

Самое главное правило: визуальные крошки и JSON-LD должны быть идентичны по содержанию. Если на странице «Главная > Женщинам > Платья», а в разметке «Главная > Женщины > Платья» — это противоречие, которое поисковик может посчитать манипуляцией.

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

Даже опытные разработчики допускают одни и те же промахи. Самые частые:

  • Относительные URL в JSON-LD. "/zhenshchinam/odezhda/" вместо полного https://... — ссылка не распознаётся.
  • Неправильный порядок позиций. «Главная» на позиции 2, а не 1 — Google проигнорирует блок.
  • Отсутствует "@type": "BreadcrumbList". Без типа система не поймёт, что это именно крошки.
  • Дублирование кода. Два блока JSON-LD с хлебными крошками на странице — рискуете потерять оба.
  • Кликабельный текущий пункт. Ссылка на саму себя путает и пользователей, и поисковики.
  • Крошки по каждому фильтру и параметру URL. Превращают навигацию в длинную техническую строку и создают дубли.
  • Разрыв между интерфейсом и разметкой. Визуально «Женщины», в JSON-LD «Женщинам» — несогласованность снижает доверие.

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

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

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

  1. Бесплатная проверка сайта на /check/free покажет общую структуру страниц, проблемные ссылки и покажет, как элементы навигации выглядят в аудите.
  2. Проверка Schema.org (/tools/schema-markup) и генератор JSON-LD (/tools/json-ld) определят, распознаётся ли на странице BreadcrumbList, и укажут на ошибки: пропущен URL, неверный порядок или отсутствует тип.
  3. Google Search Console — раздел «Структурированные данные»: если «Хлебные крошки» в списке распознанных схем, всё настроено верно.

Небольшая, но эффективная оптимизация, которую почти никто не делает до конца. И именно здесь обычно находят 80% реальных проблем с навигацией.

Часто задаваемые вопросы

Нужны ли хлебные крошки на главной странице?

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

Должна ли последняя крошка быть ссылкой?

Нет. Текущая страница показывается текстом с aria-current="page", потому что переход на тот же URL не даёт нового действия. Ссылками остаются только предыдущие уровни.

Можно ли брать крошки из URL автоматически?

Только если URL точно повторяет пользовательскую иерархию. Фильтры, технические сегменты и ID часто бессмысленны для человека, поэтому структуру лучше строить из данных каталога.

BreadcrumbList гарантирует крошки в поисковой выдаче?

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

Внутренние ссылки по теме

Вывод

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

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