Хлебные крошки на сайте: что это и зачем нужна такая навигация?

Хлебные крошки (breadcrumbs) – это навигационный элемент в интерфейсе сайта. Они представляются в виде цепочки ссылок, которые отражают путь от главной страницы до текущей страницы пользователя.

Название “хлебные крошки” происходит из сказки о Гензель и Гретель, где герои сыпали хлебные крошки на своем пути, чтобы не потеряться в лесу. Термин “хлебные крошки” был впервые использован в компьютерных терминах Дженом Спонгом в 1995 году.

Преимущества использования хлебных крошек на сайте

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

• Легкая навигация. Хлебные крошки дают прямой доступ к родительским или вышестоящим разделам сайта. Если пользователь хочет вернуться на предыдущий уровень или на главную страницу, он может кликнуть на соответствующую ссылку в хлебных крошках. Это делает навигацию более интуитивной.

• Снижение отказов. Благодаря хлебным крошкам пользователи могут легко вернуться на предыдущие уровни сайта или на главную страницу без необходимости использовать кнопку “Назад” в браузере. Это создает положительный пользовательский опыт от юзабилити и помогает поддерживать вовлеченность посетителя без риска ухода с сайта.

• Улучшение поисковой оптимизации. Хлебные крошки имеют положительное влияние на SEO. Они предоставляют данные о местоположении страниц, а это улучшает понимание контекста поисковиками. Хлебные крошки с метатегами (микроразметкой) могут быть отображены в результатах поиска, а именно в сниппете, что привлекает внимание и повышает вероятность клика. Наконец, крошки способствует качественной внутренней перелинковке и помогают распределить вес ссылок.

Каким сайтам точно нужны хлебные крошки

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

• Интернет-магазины. На сайтах, где представлены различные категории товаров/услуг и фильтры, хлебные крошки помогают пользователям следить за своим путем выбора. Они также позволяют легко вернуться к ранее просмотренным категориям. В магазинах навигационная цепочка часто начинается не с главной страницы, а с каталога.
• Сайты с многоуровневыми разделами и подразделами. Это образовательные порталы и информационные ресурсы, где большой объем контента требует хорошо структурированной навигации.
• Новостные порталы и блоги. На сайтах, где контент разбит на категории или помечен тегами, хлебные крошки помогают пользователям понять текущий контекст и быстрее найти информацию по интересующим темам.
• Сложные веб-приложения. CRM-системы или панели управления могут иметь сложную структуру с различными модулями и подстраницами. Хлебные крошки позволяют пользователям определить, где они находятся в системе, и легко перемещаться между разделами.

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

Существуют различные типы хлебных крошек, которые могут быть использованы в зависимости от особенностей сайта и потребностей пользователей:

Иерархические или линейные (от общего к конкретному)

Это наиболее распространенный вид, который отображает иерархию страниц на сайте. Крошки начинаются с главной страницы и расширяются до текущей страницы пользователя. Например: “Главная > Категория > Подкатегория > Текущая страница”.

Динамические (ориентация на посетителей)

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

Локализованные (адаптация под языки)

Этот вид полезен для мультиязычных сайтов или сайтов, ориентированных на разные регионы. Он позволяет пользователям выбрать язык или регион и отображает соответствующий путь. Например: “Главная > Категория > Страница” на английском языке или же “Главная > Категория > Страница” на испанском.

Атрибутивные (дополнительные данные)

Этот тип крошек предоставляет информацию о странице или объекте. Они могут включать атрибуты: теги, ключевые слова, характеристики продукта. Например, на странице товара можно увидеть: “Главная > Категория > Подкатегория > Товар X > Цвет: Синий”. Такие хлебные крошки помогают точно определить контекст и связь с другими элементами на сайте.

Обратные

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

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

1С-Битрикс

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

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

Их позволяют создать специальные плагины, например, Breadcrumb NavXT или “Yoast SEO”. Установите и активируйте выбранный плагин, перейдите в раздел “Внешний вид” или “Настройки” и выберите нужные параметры. Вставьте код вывода крошек в шаблоне или файле страницы. Обычно это делается с использованием функции breadcrumb() или шорткода, предоставляемого плагином. Сохраните изменения и обновите страницу. Отдельные бесплатные и платные плагины по навигации есть также для Webasyst и Moguta.

Joomla

Есть модуль, отвечающий за показ хлебных крошек, – это mod_breadcrumbs или навигатор сайта. Ищите его через административную панель управления и расширения. В настройках модуля можно выбрать разделители, названия и т.д. Отключите кэширование и сохраните параметры. Модули для навигации также есть в Opencart.

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

Можно создать через блок, который будет отображаться в виде навигации. Например, блок “Текст” или “Меню”. Внутри него надо добавить названия страниц и установить ссылки, указывая адреса URL. Можно использовать “Редактирование URL” для динамических ссылок. Разместите блок с хлебными крошками на нужных страницах. Сохранитесь и опубликуйте проект.

Кроме использования плагинов, модулей и компонентов возможно создание хлебных крошек вручную с помощью HTML и CSS. Это требует более продвинутых знаний разработки сайтов, но дает большую гибкость при настройке их внешнего вида и функциональности.

Микроразметка для хлебных крошек

Микроразметка — это специальный набор HTML-тегов, который добавляют к коду страницы, чтобы предоставить поисковикам структурированную информацию о её содержимом. В случае с хлебными крошками это означает, что элементы навигационной цепочки становятся доступными поисковым системам, помогая им лучше понять, как страницы связаны друг с другом. То есть, что указанный набор ссылок — это не просто список, а навигационная цепочка. В то же время микроразметка позволяет улучшить результаты SEO: Google использует её для создания расширенных сниппетов в выдаче, что повышает видимость сайта и увеличивает кликабельность. 

Для обозначения хлебных крошек используют разметку, соответствующую стандарту Schema.org с типом BreadcrumbList. Пример микроразметки хлебных крошек со структурой «Главная/Раздел/Подраздел/Текущая страница»:

<nav aria-label=”breadcrumb”>

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

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

      <a href=”https://example.com” itemprop=”item”>

        <span itemprop=”name”>Главная</span>

      </a>

      <meta itemprop=”position” content=”1″ />

    </li>

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

      <a href=”https://example.com/section” itemprop=”item”>

        <span itemprop=”name”>Раздел</span>

      </a>

      <meta itemprop=”position” content=”2″ />

    </li>

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

      <a href=”https://example.com/section/subsection” itemprop=”item”>

        <span itemprop=”name”>Подраздел</span>

      </a>

      <meta itemprop=”position” content=”3″ />

    </li>

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

      <span itemprop=”name”>Текущая страница</span>

      <meta itemprop=”position” content=”4″ />

    </li>

  </ol>

</nav>

Расшифруем атрибуты и параметры разметки: 

• Itemscope и itemtype. Определяют, что данный элемент является частью структуры, которую описывает схема Schema.org.
• Itemprop=”itemListElement”. Указывает, что элемент является частью списка.
• Itemprop=”item”. Определяет URL-адрес элемента списка.
• Itemprop=”name”. Показывает текст ссылки, который будет отображаться в цепочке.
• Itemprop=”position”. Сообщает позицию элемента в иерархии хлебных крошек.

Важно: Данные не должны быть размечены с ошибками валидации. В противном случае поисковики не смогут правильно их воспринять. Чтобы проверить корректность микроразметки, используйте сервисы валидации: https://search.google.com/test/rich-results или https://validator.schema.org/.

Секреты оформления хлебных крошек

1. Добавить хлебные крошки следует на самом видном месте: в верхней части страницы под структурным меню или в начале контента. Это обеспечит их доступность для пользователей.
2. Хлебные крошки не должны содержать ссылку на страницу, где сейчас находится пользователь. Также навигационной цепочки не должно быть на главной странице, чтобы она не ссылалась на саму себя.
3. Используйте символы или иконки в качестве разделителей между элементами хлебных крошек. Разделители помогают создать визуально понятную иерархию.
4. Применяйте шрифты, которые хорошо читаемы и соответствуют общему стилю на сайте. Размер шрифта должен быть достаточным, чтобы пользователи могли комфортно прочитать текст.
5. Выберите цвета, которые соответствуют дизайну сайта. Хлебные крошки могут быть оформлены в основных цветах или в контрастных оттенках, которые помогают выделяться на фоне страницы.
6. Сделайте крошки интерактивными элементами, на которые можно нажимать. При клике на каждый элемент пользователь должен быть перенаправлен на соответствующую страницу.
7. Можно сделать крошки с выпадающим списком. При наведении на элемент списка пользователю будут отображаться смежные разделы, чтобы он мог перейти, куда ему хочется, а не только на уровень выше.
8. Учтите, что хлебные крошки должны быть отзывчивыми и хорошо выглядеть на разных экранах. Убедитесь, что их размер и внешний вид соответствуют требованиям мобильных устройств.
9. Не злоупотребляйте ключевыми словами в тексте навигационной цепочки. Поисковая система может “разозлиться” из-за подобного переспама.
10. Поддерживайте одинаковый стиль и расположение хлебных крошек на всем сайте. Это поможет сориентироваться и упростит пользовательский опыт.

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