Проведем эксперимент. С чем у вас ассоциируется словосочетание "хлебные крошки"? Если с голубями или птицами вообще - вы нормальный человек. Если же вы в первую очередь подумали о навигации по сайту, поздравляем, вы - заядлый SEO-шник! Люди, давно занимающиеся дизайном и продвижением, знают, что такое хлебные крошки. Наша статья ориентирована на новичков - прочитав ее, вы узнаете о том, что это за инструмент такой и для чего он нужен. Для более продвинутых - возможность освежить имеющиеся знания. И для начала давайте рассмотрим, что представляет собой данный элемент навигации, как они влияют на поисковую оптимизацию (SEO) и дизайн. Также вы узнаете о том, когда их лучше избегать.
Что такое хлебные крошки
Помните, как в сказке "Гензель и Гретель" находчивый братец оставил за собой дорожку из крошек хлеба, когда злая мачеха увела их в темный лес? Он сделал это, чтобы найти дорогу домой. Именно эта аналогия используется, когда говорят о хлебных крошках на сайте - описание того пути, который проделал пользователь. Это своего рода вторичный навигационный элемент, который отображает местоположения пользователя в структуре сайта. Большинство сайтов имеют иерархическую структуру. Находясь на главной, вы можете видеть на ней ссылки на другие страницы: контакты, о нас, прайс, услуги и т.д. Перейдя на страницу второго уровня вложенности (например, "Цены"), с большой долей вероятности вы найдете на ней ссылки на другие страницы, описывающие типы услуг. Например, на сайте салона красоты это могут быть следующие подразделы: "Маникюр", "Педикюр", "Парикмахерские услуги" и т.д. В этом случае навигационный путь может выглядеть так: Главная Цены Косметология Макияж 
С этой страницы пользователь может в один клик вернуться на одну из четырех страниц и продолжить дальнейшее путешествие по сайту салона красоты. Удобно, не правда ли? Навигация с помощью хлебных крошек помогает пользователю сайта ответить на следующие вопросы:
- В каком разделе сайта я сейчас нахожусь;
- Как я могу отсюда перейти в другой раздел сайта.
Преимущества хлебных крошек
Одним из главных преимуществ хлебных крошек на сайте - упрощение навигации и улучшение юзабилити. Вот за счет чего они это делают:
- Меньше кликов и переходов. Если пользователь ищет необходимый ему контент, то покинуть данную страницу, чтобы перейти на главную, а затем на интересующую - очень долго. Вместо того, чтобы нажимать кнопку «Назад», пользователи продолжает двигаться вперед с данной страницы;
- Уточняют навигацию по сайту. Практика показывает, что очень часто пользователи не уверены в том, что они ищут. Пока они плавно движутся со страницы на страницу вперед, они сконцентрированы. Но если в конечной точке своего путешествия по сайту они не находят то, чего ищут, обратный путь до главной страницы или нужного раздела может сыграть злую шутку - они просто потеряют след, по которому шли, и уйдут с сайта;
- Эффективное использование пространства. Поскольку хлебные крошки представляют собой простой текст с горизонтальными ссылками, они не перегружают пространство страницы.
Типы хлебных крошек
1. Позиция. Когда сайт имеет более двух уровней в своей структуре, хлебные крошки отображают текущее местоположение пользователя на сайте по отношению к другим разделам и страницам. Например, пользователь ищет мебель для ванной комнаты, а точнее - тумбу под раковину. Заходя на сайт, он выбирает тот пункт меню и ту ссылку, которая приведет его к интересующему предмету мебели. Посмотрев тумбу, он может решить, что неплохо бы ознакомиться и с другими товарами в этой категории. Хлебные крошки позволят ему в один клик перейти в каталог "Тумбы для ванн". Каждая текстовая ссылка слева ведет пользователей к странице на один уровень выше.
2. Путь. В этом случае хлебные крошки показывают каждый шаг, по которому пользователь прошел, чтобы добраться до необходимой страницы на сайте. Они не помогут, если переход на страницу совершен из поисковой системы. Их основная функция - указать, где был пользователь и где он находится сейчас. 
3. Характеристика. Интернет-магазины очень часто используют этот тип крошек для организации разделов схожих товаров или услуг. При создании сайта дизайнеры могут сочетать между собой различные типы хлебных крошек, чтобы упростить пользователю поиск и навигацию по сайту и улучшить юзабилити. Например, навигация в интернет-магазине одежды может выглядеть следующим образом: Главная> Одежда> Детская одежда> Для мальчиков > Рубашки > Рубашки с длинным рукавом Первые три категории основаны на местоположении. Последние три разбивают предметы на аналогичные характеристики, причем каждый уровень становится все более конкретным.
Хлебные крошки и SEO
Многие дизайнеры и создатели сайтов не согласны с важностью хлебных крошек в поисковой оптимизации. Большинство из них утверждают, что они могут помочь, но их основная функция - улучшить использование сайтом с точки зрения пользователя. Однако стоит заметить, что даже Google предлагает использовать хлебные крошки для указания позиции страницы в иерархии вашего сайта. Предоставление доступа ко всем страницам проекта является популярным поисковым механизмом. Они снижают показатели отказов и добавляют структурированные данные, улучшая внутреннюю структуру ссылок вашего сайта. В иерархии они могут использовать ключевые слова для привязки одной страницы к другой.
Когда и как использовать хлебные крошки на сайте
Решение о необходимости внедрения этого элемента навигации необходимо отработать еще на этапе создания сайта. Если вы разделяете контент на разделы и подразделы, сгруппированные по смежным категориям, хлебные крошки улучшают юзабилити сайта. В блоге их использование будет нецелесообразным, так как публикации в блоге охватывают различные темы, которые не связаны между собой. Используйте хлебные крошки и на сайтах, оптимизированных под мобильные устройства. Это избавит страницу от перегруженности обычным меню и упростит навигацию по сайту. Если пространство ограничено, предложите урезанную версию, которая показывает пользователям только предыдущий шаг. Помните, что хлебные крошки не должны заменять основную навигацию, они только обеспечивают дополнительный уровень удобства. Практические советы
- Оформляя хлебные крошки, используйте пробелы между страницами или разделители: большие символы, слэш, стрелка вправо - все это указывает на движение вперед и вглубь сайта;
- Используйте адекватный размер текста и количество свободного пространства между словами. Они должны быть инструментом, который легко найти, но в то же время не перетягивать на себя внимание с основного контента;
- Для придания хлебным крошкам уникальности на последней ссылке добавьте раскрывающееся меню, которое предоставляет дополнительные страницы для дальнейшего просмотра;
- Следите за актуальностью хлебных крошек. Если в структуру сайта добавлен новый раздел, подраздел или страница, проверьте, чтобы она адекватно отображалась в этом меню.
