Хлебные крошки: что это

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

1. Улучшение юзабилити (UX)
   Пользователь легко понимает, где он находится в структуре сайта, и может быстро вернуться на любой предыдущий уровень.
2. Снижение показателя отказов (Bounce Rate)
   Предоставляют альтернативный способ навигации, что удерживает посетителей на сайте дольше.
3. SEO-преимущества
   Поисковые системы, такие как Google и Яндекс, используют хлебные крошки для лучшего понимания структуры сайта и могут отображать их в сниппетах.

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

1. Иерархические
   Отображают путь к текущей странице по структуре сайта.
   Пример:
   Главная > Каталог > Смартфоны > Apple > iPhone 15
2. Путевые (по истории действий)
   Показывают, как пользователь перемещался по сайту. Встречаются редко.
   Пример:
   Главная > Акции > Распродажа > Смартфоны > iPhone 15
3. Атрибутивные
   Используются на сайтах с фильтрами (например, интернет-магазинах) и показывают параметры выбора.
   Пример:
   Главная > Обувь > Женская > Размер: 39 > Цвет: черный

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

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

Разметка хлебных крошек

Для SEO важно использовать структурированную разметку (schema.org), чтобы поисковики могли корректно считывать хлебные крошки.

Пример на HTML + schema.org (JSON-LD):

<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",

"item": "https://example.com/catalog/smartphones/iphone-15"

}

]

}

</script>

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

<nav aria-label="Хлебные крошки">

<ol itemscope itemtype="https://schema.org/BreadcrumbList">

<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">

<a href="/" itemprop="item"><span itemprop="name">Главная</span></a>

<meta itemprop="position" content="1" />

</li>

<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">

<a href="/catalog/" itemprop="item"><span itemprop="name">Каталог</span></a>

<meta itemprop="position" content="2" />

</li>

<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">

<span itemprop="name">iPhone 15</span>

<meta itemprop="position" content="3" />

</li>

</ol>

</nav>

Вывод

Хлебные крошки — это не просто декоративный элемент, а важный инструмент навигации и SEO. Они должны быть:

• логичными;
• полезными для пользователя;
• корректно размеченными для поисковых систем.

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