Хлебные крошки — элемент интерфейса, который облегчает навигацию на сайте. Показывает весь путь от главной страницы до текущей.
Зачем нужны хлебные крошки
- улучшают навигацию, особенно когда на сайте много разделов (например, как в интернет магазине)
- снижают показатель отказов, позволяют вернуться назад без использования кнопок в браузере
- повышают SEO, поскольку поисковики используют структуру хлебных крошек для построения сниппета сайта
Читайте далее
Подробнее о поисковиках и SEO-оптимизации читайте в статье «SEO для разработчиков: как оптимизировать код и сайт»
Какими должны быть хлебные крошки?
- простыми и предсказуемыми
- удобными на всех устройствах (в том числе и мобильных)
- минималистичными (не нужно перегружать интерфейс лишними элементами или стилями)
- визуально аккуратными
Требования к дизайну
- размер шрифта не менее 14px
- отступ между крошками не меньше 0.5rem (8px)
- цвет по контрасту минимум 4.5:1
Принципы удобных хлебных крошек
- Стандартное расположение: под шапкой сайта и над заголовком страницы
- Не прячьте хлебные крошки — иначе они теряют смысл
- Каждый элемент цепочки должен быть кликабельным, кроме последнего
- Чтобы избежать путаницы, лишних кликов и улучшить доступность для экранных читалок, текущую страницу в цепочке лучше не оформлять ссылкой
- Предыдущая страница всегда должна быть видна
- Текущую страницу можно не указывать в хлебных крошках, если сразу после идет заголовок
- Все элементы должны вести туда, где пользователь ожидает оказаться
- Разделитель должен указывать направо (в LTR интерфейсах) и быть привычным для пользователя
Если крошки ведут на неочевидные страницы, или последняя страница ссылается на ту же страницу — пользователь теряется. Появляется фрустрация: интерфейс не помогает, а мешает. Пропадает доверие к сайту. Снижается вовлеченность и время проведенное на странице, возрастает показатель отказов — что напрямую влияет на SEO.
> / →Дизайн хлебных крошек на мобильных
Нельзя
- Растягивать хлебные крошки на несколько строк — это усложняет восприятие и перегружает интерфейс
- Делать хлебные крошки и другие кликабельные элементы меньше минимума для сенсорных экранов — 1х1 см (Google рекомендует минимальный tap target 48x48 px)
- Скрывать хлебные крошки на мобильных, но оставлять их на десктопе — рискованно в точки зрения SEO, может привести к проблемам индексации сайта из-за скрытия контента от пользователя (cloaking)
- Использовать аккордеоны или динамическую подгрузку для крошек — для SEO весь путь должен быть виден в HTML
Можно
- Сокращать хлебные крошки до последнего уровня (при условии, что весь путь остается в коде)
- Реализовать горизонтальный скролл для длинных крошек, не обрезая контент — главное, чтобы скролл был очевидным и интуитивным
- Частично заменить навигацию по хлебным крошкам выпадающим меню при клике (при условии что структура сохраняется в коде и доступна поисковикам)
- Реализовать свайп-жест для прокрутки хлебных крошек на мобильных
Источники
Опубликовано: 10 июл. 2025 г.