Приветствую вас, уважаемые читатели!

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

Определение

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

Для понимания проще всего увидеть живой пример.

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

Почему последний элемент не должен быть кликабельным? Если сделать наоборот, то вы получите циклическую ссылку, которая будет вести на эту же страницу, что не очень хорошо для внутренней СЕО-оптимизации.

Для чего нужны?

Основная функция – улучшение юзабилити веб-сайта, повышение удобства пользования ресурсом. Согласитесь, что находиться на сайте с продуманной навигацией и чётко выстроенной структурой гораздо приятнее, чем на том, где удобство пользования находилось при разработке не на приоритетном месте.

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

Если крошки будут отсутствовать, то для совершения такого же действия вам нужно будет снова заходить в общий каталог, искать там технику для кухни, а уже затем искать нужную категорию. Неудобно и занимает гораздо больше времени, не правда ли?

Давайте небольшим пунктиром подытожим – для чего же необходимы breadcrumbs?

  • Удобство навигации – быстрый переход на раздел, расположенный уровнем выше.
  • Информативность – понимание того, в какой части сайта и на каком уровне вы сейчас находитесь.
  • Внутренняя перелинковка – так как хлебные крошки являются ссылками, то они обеспечивают дополнительную перелинковку страниц сайта, что является положительным фактором при SEO-продвижении. Желательно также включить их в микроразметку.
  • Улучшение поведенческих факторов. Если посетителю удобно ориентироваться на сайте, то он задерживается на нём дольше и просматривает большее число страниц. Всё это в сумме улучшает поведенческие факторы, а это – хороший знак для поисковых систем.

Когда нужно использовать?

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

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

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

Скажу, что размещать крошки на сайтах из 5-10 страничек особого смысла нет, но если вы их всё-таки сделаете, то минусом это не является. Самое главное – чтобы навигационная цепочка гармонично вписывалась в дизайн и не отвлекала пользователя от просмотра основного контента (о том, насколько важен дизайн сайта-визитки, вы можете прочитать ЗДЕСЬ).

Как выглядят?

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

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

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

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

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

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

Если у вас есть вопросы по теме статьи, я отвечу на них в комментариях. Поэтому пишите, не стесняйтесь!

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

С уважением, Сергей Чесноков