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

Как помочь Гензель и Гретель не потеряться на сайте

На языке разработчиков «хлебные крошки» или ХК (англ. «breadcrumbs») — это составная часть интерфейса, которая отображает цепочку переходов, путь до страницы, на который мы сейчас находимся. Обычно мы видим такие элементы на сайтах. Еще их можно встретить в системах управления контентом, файловых менеджерах, в папках ОС Windows и Mac OS. Во как это выглядит на сайте OkoCRM.

Почему ХК? Это отсылка к сказке Братьев Гримм «Гензель и Гретель». В ней дети раскидывали по лесу хлебные крошки, чтобы не забыть дорогу и вернуться обратно. В сказке крошки не сработали — хлеб склевали птицы. Хорошо, что, нашему сайту птицы не угрожают.

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

 Для юзабилити. Один из принципов Usability-дизайна по Якобу Нильсену — «Видимость статуса системы». Чтобы человеку было удобно, он должен знать, куда он зашел в поисках нужного товара или информации, в какой части сайта в данный момент находится. Навигационная цепочка наглядно показывает это.

В практике улучшения Usability, ХК решают 3 задачи:

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

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

Для SEO. Еще это один из шагов поисковой оптимизации. Размещение ХК в целом хорошо воспринимается поисковиками при формировании выдачи:

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

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

Мы знаем, что поисковики отдают предпочтение сайтам с хорошей структурой. ХК — как раз про хорошую структуру. Они дополняют функционал карты сайта, файлов robots.txt и sitemap.xml. А значит, у нас есть шанс получить более высокое место в выдаче.

Для прокачки сниппета. Если у нас на сайте настроена микроразметка, Гугл и Яндекс покажут его в поисковой выдаче с наглядными цепочками категорий. Поисковики автоматически формируют навигацию — они подтягивают названия категорий из тайтла или анкоров.

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

Сайтам со сложной структурой и целым составом категорий. Не имеет значения, что у нас за ресурс, что мы продаем и на какую аудиторию работаем. Главное всегда — не вид ресурса, а его структура.

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

Если мы следуем этому принципу, то ХК нужны на сайтах:

• интернет-магазинов
• СМИ
• корпоративных сайтах
• информационных порталов
• форумов и блогов
• электронных услуг
• агрегаторах и т.д.

Есть разные подходы к организации навигационной цепочки. Какой выбрать — зависит от организации сайта. Вот какие бывают варианты.

Линейные ХК. Это традиционный способ организации навигации. Вот как у нас на сайте. Это путь в корневом каталоге до страницы, на которой мы видим эту самую цепочку ссылок.

Например: Магазин → Подарки → Мужчинам → Носки 1.

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

Например: Раздел «Дом и кухня» → Подраздел «Домашний декор» → Подраздел «Часы» → Подраздел «Настольные часы» → Товар.

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

Допустим, у нас сайт необычных подарков. Одни и те же товары у нас могут встречаться в разных категориях сайта. Например, в разделах «Подарки для друзей» и «Подарки для парней». Тогда у одного и того же товара будет разная навигационная цепочка — в зависимости от пути, который прошел покупатель.

Допустим, у нас сайт необычных подарков. Одни и те же товары у нас могут встречаться в разных категориях сайта. Например, в разделах «Подарки для друзей» и «Подарки для парней». Тогда у одного и того же товара будет разная навигационная цепочка — в зависимости от пути, который прошел покупатель. ХК с выпадающим списком. Такие еще больше упрощают навигацию. Выглядит как обычная линейная цепочка навигации. Но как только мы наводим курсор на один из разделов — появляется выпадающий список из смежных подразделов. Пользователь сможет не только быстро передвигаться по своей цепочке, но и перейти в любую другую категорию. Удобно.

Кнопка «Назад». Такой подход к организации навигации используют маркетплейсы и большие сайты с функцией поиска по каталогу. Вместо навигационной цепочки в интерфейсе размещают кнопку «Назад», «В каталог», «К результатам поиска». Так сделал, например, Amazon.

Атрибутивные ХК. Еще один подход интернет-магазинов, агрегаторов и каталогов. Пользователь задает определенные атрибуты, на основании которых сайт задает и содержание и путь страницы.

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

На самом деле, это очень просто. Чтобы сделать все правильно, мы соблюдаем общие правила и проверяем микроразметку перед размещением кода. Вот на какие нюансы мы всегда обращаем внимание:

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

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

Главная — без ХК. Иначе цепочка навигации будет состоять из одной страницы и ссылаться на саму себя. Не надо так. Это плохо для SEO и противоречит здравому смыслу.

Без ссылки на текущую страницу. Чтобы текущая страница не ссылалась на саму себя, последний элемент в цепочке делают некликабельным. Для этого прописываем название страницы текстом. Остальные элементы — обязательно со ссылками.

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

Если используете ХК — прописывайте их до конца. Чтобы путь навигации не обрывался на каком-то разделе. Иначе мы только больше запутаем нашего клиента. Вот как на примере ниже.

Чтобы путь к странице отражался в поисковой выдаче, нужно сделать микроразметку по словарю Schema.org в формате Microdata. Для этого используют контейнер Breadcrumb List как минимум с двумя элементами ListItems — тут нужно задать все обязательные свойства. Подробную информацию, как это сделать, смотрите в Центре поиска Гугл.

Не забудьте проверить — соответствует ли разметка формату. Для этого у Гугла и Яндекса есть специальные инструменты. Ошибок и предупреждений быть не должно.

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

Допустим, что наш сайт работает на WordPress. Тогда мы можем скачать и использовать официальный плагин — Breadcrumb NavXT. Сначала мы пишем код. Вот как он может выглядеть.

Затем добавляем его в header.php, чтобы ХК была сразу на всех страницах. А потом — находим в административной панели CMS меню нашего плагина, настраиваем значки, задаем урл, разбираемся с другими настройками.

В Joomla и других CMS тоже есть подходящие плагины. Информацию о них можно найти на сайте нужной системы управления. То есть люди, которые самостоятельно администрируют свой сайт, смогут найти инструкции, разобраться и добавить ХК. .

Еще можно вручную добавить код в functions.php и расставить команды вызова в те места, где должна отображаться навигация. Но такую работу лучше поручить айтишнику или админу, они решат эту задачу быстрее.

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

Если добавить навигацию, мы получим улучшения поведенческих характеристик, приоритет поисковых систем и как результат — рост в выдаче Гугла и Яндекса. А еще наши клиенты почувствуют внимание, заботу и станут больше покупать.