что такое хлебные крошки
Алекс Цельный

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

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

Хлебные крошки (русский перевод с английского языка слова «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)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *