Хлебные крошки на сайте: что это и как сделать

Хлебные крошки на сайте: что это и как сделать

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

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

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

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

Хлебные крошки сайта это выглядит так:

Главная → Каталог → Смартфоны → iPhone → iPhone 15 Pro

Каждый элемент цепочки (кроме последнего) — кликабельная ссылка. Пользователь может перейти на любой уровень иерархии одним кликом.

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

Основные характеристики хлебных крошек:

• Показывают иерархию от главной до текущей страницы
• Все элементы кроме последнего — ссылки
• Последний элемент — текущая страница (не ссылка)
• Разделители между элементами (>, →, /)
• Располагаются обычно под шапкой сайта

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

Хлебные крошки в SEO и юзабилити выполняют несколько важных функций.

Преимущества для пользователей:

• Улучшение навигации — пользователь видит своё местоположение и может быстро перейти на любой уровень
• Снижение отказов — вместо ухода с сайта пользователь переходит в категорию или раздел
• Понимание структуры — даже при прямом заходе на страницу понятно, к какому разделу она относится
• Экономия времени — не нужно использовать кнопку «Назад» или искать меню

Преимущества для SEO:

• Помощь поисковикам — роботы лучше понимают структуру и иерархию сайта
• Внутренняя перелинковка — каждая страница ссылается на родительские разделы
• Улучшение сниппетов — при наличии микроразметки хлебные крошки отображаются в выдаче
• Распределение ссылочного веса — ссылки передают PageRank на категории

Преимущества для бизнеса:

• Увеличение глубины просмотра
• Снижение показателя отказов
• Улучшение конверсии (пользователь не теряется)

Хлебные крошки и SEO

Хлебные крошки в SEO играют важную роль, хотя и не являются прямым фактором ранжирования. Их влияние на SEO проявляется через несколько механизмов.

Понимание структуры поисковиками

Хлебные крошки помогают Google и Яндексу понять иерархию сайта. Робот видит, что страница товара относится к определённой категории, категория — к разделу, и так до главной. Это улучшает понимание тематики и связей между страницами.

Внутренняя перелинковка

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

Отображение в сниппетах

При правильной микроразметке Schema.org хлебные крошки отображаются в результатах поиска Google вместо URL. Вместо:

example.com › catalog › smartphones › iphone-15

Пользователь видит:

Главная › Каталог › Смартфоны › iPhone 15

Это улучшает понимание контента и может повысить CTR.

Поведенческие факторы

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

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

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

Тип	Принцип	Пример	Когда использовать
Иерархические (Location-based)	Показывают путь в структуре сайта	Главная → Одежда → Куртки → Зимние куртки	Интернет-магазины, каталоги, порталы
На основе истории (Path-based)	Показывают путь пользователя по сайту	Поиск → Результаты → Товар	Редко используются, неудобны
На основе атрибутов (Attribute-based)	Показывают выбранные фильтры	Ноутбуки → Apple → 16 дюймов → до 100 000 ₽	Каталоги с фильтрацией

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

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

Атрибутные хлебные крошки — показывают выбранные фильтры. Полезны в сложных каталогах с фасетной навигацией. Часто комбинируются с иерархическими.

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

Хлебные крошки по-английски

Хлебные крошки по английски — breadcrumbs (дословно «хлебные крошки»). Термин пришёл из сказки братьев Гримм «Гензель и Гретель», где дети оставляли хлебные крошки, чтобы найти дорогу домой.

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

Альтернативные названия:

• Breadcrumb navigation — навигация хлебными крошками
• Breadcrumb trail — след из хлебных крошек
• Location breadcrumbs — хлебные крошки местоположения

В русскоязычном SEO также используют термины:

• Навигационная цепочка
• Путь навигации
• Навигационный путь

Как сделать хлебные крошки на сайте

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

1. Вручную (HTML + CSS)

Для статических сайтов или кастомных CMS. Требует ручного создания разметки на каждой странице или шаблоне. Подходит для небольших сайтов.

2. Через CMS или плагины

Большинство современных CMS имеют встроенные функции или плагины для хлебных крошек:

• WordPress — Yoast SEO, Rank Math, Breadcrumb NavXT
• Joomla — встроенные или через расширения
• Drupal — модуль Easy Breadcrumb
• Bitrix — встроенный компонент
• OpenCart, PrestaShop — встроенные функции

3. JavaScript-генерация

Для SPA-приложений (React, Vue, Angular). Хлебные крошки генерируются на основе роутинга. Важно: убедитесь, что поисковики видят результат (серверный рендеринг или prerendering).

4. Автоматическая генерация по URL

Некоторые решения автоматически создают хлебные крошки на основе структуры URL. Работает, если URL соответствует иерархии сайта.

Хлебные крошки HTML — код

Как сделать хлебные крошки на сайте html — базовая структура:

<nav aria-label="Breadcrumb" class="breadcrumbs">
  <ol>
    <li><a href="/">Главная</a></li>
    <li><a href="/catalog/">Каталог</a></li>
    <li><a href="/catalog/smartphones/">Смартфоны</a></li>
    <li aria-current="page">iPhone 15 Pro</li>
  </ol>
</nav>

Ключевые моменты:

• <nav> — семантический тег для навигации
• aria-label="Breadcrumb" — для доступности (screen readers)
• <ol> — упорядоченный список (порядок важен)
• aria-current="page" — указывает текущую страницу
• Последний элемент — текст без ссылки

Пример CSS для оформления:

.breadcrumbs ol {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
}

.breadcrumbs li:not(:last-child)::after {
  content: "→";
  margin: 0 8px;
  color: #666;
}

.breadcrumbs a {
  color: #0066cc;
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

Микроразметка хлебных крошек Schema.org

Микроразметка Schema.org позволяет Google отображать хлебные крошки в сниппетах. Рекомендуемый формат — JSON-LD. Микроразметка Schema.org для сайта — подробнее о микроразметке.

Пример JSON-LD разметки BreadcrumbList:

<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": "iPhone 15 Pro"
    }
  ]
}
</script>

Важные правила:

• position — порядковый номер, начиная с 1
• name — название элемента
• item — URL (для последнего элемента можно не указывать)
• Разместите скрипт в <head> или <body>

Проверка разметки:

• Google Rich Results Test: search.google.com/test/rich-results
• Schema.org Validator: validator.schema.org

Хлебные крошки в WordPress

WordPress хлебные крошки проще всего добавить через плагины. Популярные решения:

Yoast SEO

1. Установите и активируйте Yoast SEO
2. Перейдите в SEO → Настройки → Хлебные крошки
3. Включите «Включить хлебные крошки»
4. Настройте разделитель, текст главной страницы
5. Добавьте код в тему: <?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb('<p id="breadcrumbs">','</p>'); } ?>

Rank Math

1. Установите Rank Math
2. Перейдите в Rank Math → Общие настройки → Хлебные крошки
3. Включите и настройте параметры
4. Добавьте шорткод [rank_math_breadcrumb] или функцию в тему

Breadcrumb NavXT

Специализированный плагин с расширенными настройками:

• Поддержка кастомных типов записей
• Гибкая настройка иерархии
• Встроенная микроразметка
• Шаблоны для разных типов страниц

Рекомендация: если уже используете Yoast SEO или Rank Math — используйте их встроенные хлебные крошки. Для сложных случаев — Breadcrumb NavXT.

Хлебные крошки в мобильной версии

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

Проблемы на мобильных:

• Длинные цепочки не помещаются в одну строку
• Мелкий текст сложно нажимать
• Занимают ценное пространство над контентом

Решения:

1. Сокращение средних элементов

Главная → ... → Подкатегория → Товар

Показываются только первый, предпоследний и последний элементы. Остальные скрыты под «...».

2. Горизонтальная прокрутка

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

3. Только родительская категория

← Смартфоны

Показывается только ссылка на родительский раздел. Минималистично, но достаточно для навигации.

4. Скрытие на мобильных

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

Мобильная версия сайта для SEO — оптимизация мобильной версии для поисковиков.

CSS для адаптивных хлебных крошек:

@media (max-width: 768px) {
  .breadcrumbs {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .breadcrumbs ol {
    display: inline-flex;
  }
}

Где размещать хлебные крошки

Стандартное расположение хлебных крошек — вверху страницы, под шапкой (header), над основным контентом и заголовком H1.

Рекомендуемая позиция:

[Шапка сайта]
[Хлебные крошки]
[H1 заголовок]
[Основной контент]

Почему именно там:

• Пользователь сразу видит своё местоположение
• Логично — сначала навигация, потом контент
• Соответствует паттерну сканирования страницы (F-образный)
• Привычно для пользователей

Альтернативные варианты:

• В боковой панели — редко, неудобно
• В подвале — не имеет смысла, пользователь уже прочитал страницу
• После H1 — допустимо, но менее удобно

Рекомендации по оформлению:

• Размер шрифта меньше основного текста (12–14px)
• Неяркий цвет, чтобы не отвлекать от контента
• Достаточный контраст для читаемости
• Ссылки визуально отличаются от текста
• Разделители не должны сливаться с текстом

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

Типичные ошибки и как их избежать:

Ошибка	Проблема	Решение
Нет главной страницы	Цепочка начинается с категории	Всегда начинайте с «Главная»
Последний элемент — ссылка	Ссылка на текущую страницу бессмысленна	Последний элемент — текст без ссылки
Неправильная иерархия	Путь не соответствует структуре сайта	Проверьте логику категорий
Нет микроразметки	Google не показывает в сниппетах	Добавьте Schema.org разметку
Ошибки в микроразметке	Разметка не валидна	Проверьте в Rich Results Test
Слишком длинные названия	Не помещаются на экране	Сокращайте до 2–4 слов
Отсутствие на мобильных	Нет навигации на мобильных	Адаптируйте, не скрывайте
Несоответствие URL и крошек	Путь в крошках отличается от URL	Синхронизируйте структуру

Дополнительные рекомендации:

• Не дублируйте хлебные крошки на странице
• Не используйте хлебные крошки на главной странице
• Убедитесь, что все ссылки работают
• Не добавляйте nofollow на ссылки в хлебных крошках

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

Пункт	Проверка	Статус
Наличие	Хлебные крошки есть на всех внутренних страницах	☐
Главная	Цепочка начинается с «Главная»	☐
Текущая страница	Последний элемент — текст, не ссылка	☐
Иерархия	Путь соответствует реальной структуре сайта	☐
Ссылки	Все ссылки работают корректно	☐
Микроразметка	Добавлена разметка BreadcrumbList	☐
Валидация	Разметка проходит проверку в Rich Results Test	☐
Расположение	Хлебные крошки вверху страницы, под шапкой	☐
Мобильная версия	Корректно отображаются на мобильных	☐
Доступность	Есть aria-label для screen readers	☐
Оформление	Читаемый шрифт, достаточный контраст	☐
Отсутствие на главной	На главной странице хлебных крошек нет	☐

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

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

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

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

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

Как добавить хлебные крошки в WordPress?

Самый простой способ — использовать SEO-плагин. В Yoast SEO или Rank Math есть встроенная функция хлебных крошек с микроразметкой. Включите её в настройках плагина и добавьте соответствующий шорткод или PHP-код в шаблон темы.

Нужна ли микроразметка для хлебных крошек?

Да, рекомендуется. Микроразметка Schema.org (тип BreadcrumbList) позволяет Google отображать хлебные крошки в сниппете вместо URL. Это улучшает внешний вид результата в выдаче и может повысить кликабельность. Используйте формат JSON-LD.

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

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

Нужна помощь с навигацией сайта?