Хлебные крошки: что это, зачем нужны на сайте и как их создать

Что такое хлебные крошки

Хлебные крошки (русский перевод с английского языка слова «breadcrumb») — это термин, попавший в наш обиход из сказки про Гензель и Гретель, где мальчик Гензель разбрасывал сначала камушки, а потом хлебные крошки для того, чтобы вернуться по ним домой.

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

А как же хлебные крошки на сайте? Что это такое? Ответ аналогичный: точно такая же цепочка со ссылками на все посещенные ранее страницы сайта.

Стоит ли добавлять на сайт хлебные крошки (ХК), как их сделать, какие бывают виды — читай в данной статье.

Структура хлебных крошек

Что значит этот термин, мы разобрались, поэтому углубимся в суть.

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

Возьмём, например, магазин техники. Получается, что путь к холодильникам будет выглядеть следующим образом: главная страница → холодильники и морозильные камеры (категория) → страница конкретного изделия.

И если потребуется вернуться к главной странице, а путь к открытой был длинным, то не придётся загружать все пройденные ранее ссылки.

Какие задачи они решают

Перед хлебными крошками стоят три задачи, с решением которых они успешно справляются:

• показывают человеку его местоположение на сайте;
• отражают понятную простому пользователю схему строения сайта;
• позволяют не использовать кнопку «назад» для того, чтобы вернуться сразу на нужный.

Помимо удобства для пользователя крошки также влияют на охваты и поисковое продвижение, то есть повышают SEO-эффективность:

• это элемент внешней и внутренней перелинковки (связывания) страниц сайта с помощью гиперссылок;
• они увеличивают время просмотра сайта через улучшение навигации, интуитивно понятной каждому юзеру;
• если микроразметка настроена правильно, то качественно меняется внешний вид, повышается кликабельность в Яндекс, Google.

Виды

В зависимости от структуры сайта и от того, как сформированы в нем страницы, выбирается тот или иной принцип построения навигационной цепочки. Их всего шесть:

• хлебные крошки с выпадающим списком меню;
• динамический принцип построения;
• атрибутивный;
• обратные крошки;
• линейный;
• сочетание линейного и обратного принципов.

Дальше пойдет объяснение принципа работы каждого из видов.

Крошки с выпадающим списком меню

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

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

Путь к разделу в данном случае показывается не так, как он отражен на самом сайте, а так, как пользователь к нему дошёл.

Например, к разделу «джинсы» юзер мог двигаться через распродажу, а мог искать конкретно джинсы.

Так, навигационная цепочка в первом случае будет выглядеть следующим образом: «Главное меню → Распродажа → джинсы», а во втором «Главное меню → Мужчины → брюки, джинсы → джинсы». Вернуться можно будет по выбранным ранее страницам. Значит, ссылки определяются в этом принципе не по иерархии, а по выбранному пути.

Атрибутивный

Создается на основе фильтров и категорий, которые выбирает пользователь.

Эта цепочка полностью сформирована человеком, который ищет что-то конкретное. Можно формировать свой список, выдачи товаров в онлайн-магазине, который и будет являться путём к странице. Выбрать, например «пальто», «розовый цвет», «длину до колена» и перед тобой появится каталог с представленными по запросу товарами.

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

Обратные крошки

Суть обратного принципа заключается в том, чтобы помимо навигационной цепочки на странице размещалась ссылка на предыдущую страницу. Эта ссылка дублирует кнопку «назад», только, если «назад» это функция поисковика, то обратная кнопка находится на странице и называется так же, как и предыдущий раздел. То есть, если путь «Главная страница → Женская обувь → ботинки» то, на странице будет расположена строка и ссылка «женская обувь».

Линейный

Самый простой и самый распространённый принцип.

Здесь система указывает полный порядок разделов от главной до текущей страницы.

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

Сочетание линейного и обратного принципа

Как уже понятно из названия, это принцип при котором строится линейная навигационная цепочка и добавляется кнопка «назад». Это упрощает работу, если поиск осуществлялся через соответствующую строку поиска на сайте.

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

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

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

Важные нюансы

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

Размер имеет значение

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

Используй сервис Микроразметка

Чтобы поисковый робот понимал и корректно обрабатывал элементы сайта, необходимо воспользоваться сервисом Микроразметка schema org, в результате чего получится таблица, где:

• type — сами хлебные крошки;
• itemListElement — все пункты списка, каждый из его элементов;
• словом name прописан тег с наименованием ХК;
• item — то, какая разметка будет у ссылки.

Это поможет использовать меньше кодов.

Обрати внимание на дизайн

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

А также имей в виду, что:

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

При создании крошек используется HTML — язык разметки документации и веб-страниц (на нём, в отличие от языков программирования, невозможно произвести вычисления).

Как сделать хлебные крошки? Всё достаточно просто.

Для WordPress

С помощью плагина

1. Скачай и установи плагин.
2. Добавь код ХК на страницы:
   • page.php — контроль отображаемого на страницах;
   • single.php — отображение полного формата страниц (главное не используй the_excerpt (…) вместо the_content (…), иначе полного отображения не будет);
   • category.php или header.php — страница категорий или отображаемых файлов.
3. Далее нужна лишь настройка отображения через разделитель «>» в меню плагина.

Без плагина

• В файле functions.php прописывается get_breadcrumb();
• А в single.php пропиши

 <div class=»breadcrumb»><?php get_breadcrumb(); ?></div>.

Для 1С Битрикс

В Битриксе на странице отображаемых файлов header.php вызываем функцию ХК кодом >IncludeComponent(«bitrix:breadcrumb).

Для Opencart

Можно установить модуль 3.0 версии, в котором заранее устранена ссылка на самом последнем уровне.

Принцип установки модуля следующий:

1. Установить архив модуля Опенкарт 3.0 в администрации сайта.
2. Запустить обновление модификации.
3. Сбросить кеш twig шаблона в Opencart.

Для Joomla

1. Четко определи позицию модуля ХК.
2. Отключи просмотр модулей.
3. В менеджере модулей создай «навигатор сайта».
4. Открой настройки и укажи название главной страницы, позицию «Навигатора», добавь разделитель и сохрани результат.

Для Tilda

Чтобы создать навигационную строку на Тильде, нужно просто разместить блок ME605 «Хлебные крошки» (лучше всего в шапке страницы).

Как проверить правильность их настройки

Проверить можно, воспользовавшись инструментом от Google или валидатором от Yandex. Гугловский сервис можно найти по строкам навигации в категории улучшений.

Заключение

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

Комментарии (0)