г. Москва, ул. Дубининская, д. 57, стр. 2, пом. III, офис 208.29
info@maximusmedia.pro
г. Москва, ул. Дубининская, д. 57, стр. 2, пом. III, офис 208.29

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

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

20
Время чтения: 2 минуты
Дата публикации

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

  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. Они должны быть:

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

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

Дмитрий Ларионов
Основатель маркетингового агентства полного цикла Maximus Media

Напишем или позвоним Вам первыми в течение 10 минут

    Другие термины
    Семантическое ядро

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

    447
    Время чтения 1 минута
    Видимость сайта

    Видимость сайта — это один из ключевых аспектов, определяющих его успех в интернете. Этот термин относится к тому, насколько часто и насколько высоко веб-страницы сайта появляются в поисковых системах (например, Google, Яндекс) по запросам пользователей.

    384
    Время чтения 1 минута
    Iframe

    Iframe (Inline Frame) — это HTML-элемент, который позволяет встроить одну веб-страницу внутрь другой. Он работает как “окно” или “рамка” внутри основной страницы, через которое загружается и отображается другой независимый документ (другая HTML-страница, видео, карта и т.д.).

    19
    Время чтения 1 минута
    Персонализация выдачи

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

    96
    Время чтения 1 минута
    Поддомен

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

    439
    Время чтения 1 минута
    Ранжирование

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

    461
    Время чтения 1 минута
    ×
    Владислав Панов
    Владислав Панов Здравствуйте! Готов помочь вам. Напишите мне, если у вас появятся вопросы.
    +7 (123) 456-78-90 info@maximusmedia.pro Отдел работы с клиентами
    ул. Дубининская, д. 57, стр. 2, пом. III, офис 208.29, Москва, Московская область, 115054, Россия