Хлебные крошки (breadcrumbs) — это элемент навигации на сайте, который помогает пользователям ориентироваться в его структуре. Термин произошел из сказки «Гензель и Гретель», которые оставляли крошки, чтобы с их помощью вернуться домой. В веб-дизайне хлебные крошки выполняют аналогичную роль: показывают посетителям путь, который они проделали от главной страницы до текущей. Этот навигационный элемент представлен в виде последовательности ссылок, которые обычно расположены в верхней части страницы и позволяют пользователю вернуться к предыдущим разделам сайта без необходимости нажимать на кнопку «назад» в браузере.
Для чего нужны хлебные крошки
Хлебные крошки используются на сайте в следующих целях:
- улучшение навигации. Позволяют пользователям быстрее находить нужную информацию и возвращаться к ранее посещенным разделам веб-ресурса;
- повышение юзабилити. Особенно полезны на сайтах с глубокой иерархией страниц, таких как интернет-магазины, каталоги и блоги, где много подразделов и категорий;
- SEO-оптимизация. Помогают поисковым системам лучше понимать структуру ресурса и, следовательно, улучшать его индексацию. Это может повысить позиции сайта в выдаче;
- снижение показателя отказов. Когда пользователь легко ориентируется на веб-ресурсе и может быстро вернуться к другим разделам, это снижает вероятность того, что он покинет сайт, не найдя нужную информацию.
Где применяют хлебные крошки
Вот основные типы сайтов, на которых используются хлебные крошки:
- интернет-магазины. В больших онлайн-магазинах, где множество категорий и подкатегорий товаров, хлебные крошки позволяют клиентам легко перемещаться между уровнями каталога. Например, посетитель может перейти от конкретного продукта к его категории, а затем к главной странице;
- корпоративные сайты. На сайтах компаний с множеством услуг и продуктов они помогают пользователям не потеряться в разделах;
- информационные порталы и блоги. В блогах, где статьи могут быть сгруппированы по темам, рубрикам или датам, хлебные крошки обеспечивают быструю навигацию по материалам;
- каталоги и базы данных. В сложных базах данных или каталогах они позволяют пользователю видеть структуру навигации и возвращаться на нужные уровни.
Виды хлебных крошек
Хлебные крошки бывают:
- иерархическими. Отображают путь от главной страницы до текущей, показывая все промежуточные уровни иерархии. Например: Главная → Категория → Подкатегория → Текущая страница;
- хронологическими. Отражают последовательность страниц, которые пользователь просматривал в ходе своей сессии. Этот вид хлебных крошек применяется реже, но может быть полезен для отслеживания последовательности действий посетителя;
- атрибутными. Используются на сайтах, где товары или контент могут быть отфильтрованы по различным атрибутам, например по цене, цвету или размеру. Пользователь видит хлебные крошки, которые отображают выбранные фильтры. К примеру: Главная → Одежда → Мужская → Фильтр: Черный, Размер: L.
Вопросы-ответы
Как правило, они размещаются в верхней части страницы, под основным меню, но выше контента. Это привычное место для пользователей, которое делает навигацию интуитивно понятной.
С помощью микроразметки schema.org.
Microdata и RDFa.
