Навигация по типу «хлебные крошки»
Многостраничный сайт можно сравнить с высотным зданием, где на каждом уровне расположено множество секций и помещений. Без вспомогательных указателей перемещение по зданию уподобляется прохождению квеста. Чтобы не заставлять посетителей вашего сайта блуждать в поисках нужной информации, важно снабдить их понятной и удобной навигацией, одним из элементов которой являются «хлебные крошки». Что это такое и в чем их значение – читайте далее.
Что такое хлебные крошки
Основным элементом навигации по сайту выступает меню, которое является указателем направления. Хлебные крошки (англ. термин – «Breadcrumbs») дополняют его функционал и выступают своего рода метками, фиксирующими этапы движения по заданному маршруту. Они позволяют видеть исходную точку – главную страницу сайта и пройденный путь от нее до текущей страницы. Технически навигационная цепочка представлена рядом текстовых ссылок и размещается в верхней части страницы, под «шапкой». (Рис. 1).
![]() |
Рис. 1 Пример «хлебных крошек» на сайте интернет-магазина
Это удобное и полезное решение для сайтов со сложной иерархией и большим объемом контента (интернет-магазин, новостной портал, доска объявлений, форум). Навигационная цепочка помогает пользователю не потеряться при переходе с одной страницы на другую внутри одной ветви и при необходимости быстро вернуться в корневой раздел.
Своим происхождением термин «хлебные крошки» обязан сюжету детской сказки про Гензеля и Гретель, которые бросали крошки хлеба на землю, чтобы оставить своеобразные метки и суметь вернуться по ним домой. Однако пользователям сайтов, в отличие от персонажей сказки, повезло гораздо больше: навигационная цепочка ссылок всегда остается на своем месте, помогая максимально быстро находить нужную информацию.
Цель использования
1. Удобство для пользователей
Прежде всего, навигационная цепочка ориентирована на интересы пользователей. В частности, она просто незаменима, когда на сайте не предусмотрено боковое меню с каталогом. Такая ситуация типична для новостных порталов и форумов или обусловлена особенностями дизайна, когда каталог размещается на главной странице. В этом случае строка «хлебных крошек» позволяет переходить на предыдущий шаг с минимальным количеством кликов, минуя возврат к первичной навигации.
![]() |
Рис. 2 Пример интернет-магазина без бокового меню каталога товаров
Например, если пользователь попадет на страницу товара (Рис. 2) из поисковой выдачи и решит посмотреть другие предметы мебели из той же серии, то без навигационной цепочки поставленная задача будет сложно выполнимой (в карточке товара отсутствуют какие-либо указания на название серии и коллекции). Чтобы найти интересующий контент, покупателю придется изучить весь ассортимент. За счет «хлебных крошек» время на поиски значительно сократится и при этом снизится показатель отказов.
2. Польза для SEO
«Хлебные крошки» дают положительный эффект для поискового продвижения сайта, участвуя в перелинковке страниц. Может возникнуть вполне логичный вопрос относительно дублирующих ссылок в основном меню и в строке навигации. Ведь, как известно, поисковики не жалуют дублирование, в данном случае – ссылок и анкоров, которые ведут на одну страницу. Как быть в такой ситуации? Мнения насчет дублирования и сокрытия анкоров сквозных ссылок меню разделяются у разных SEO-специалистов: кто-то говорит о закрытии ссылок меню в <noindex> (для неучета анкоров Яндексом), а кто-то говорит, что делать этого не стоит. Поисковые роботы хорошо умеют отличать навигацию как элемент юзабилити сайта и применяют к таким ссылкам другие правила относительно обычных внутренних ссылок. К сожалению, бывают ситуации с запутанной структурой сайта, где поисковый робот ошибается в определении навигации. В этом случае стоит исключить лишние анкоры, заключив меню в <noindex>. Но это лишь частная практика и делать это для всех сайтов не рекомендуется.
Второе полезное свойство «хлебных крошек» для SEO – помощь в оптимизации сниппетов. Поисковая система (на данный момент только Google!) использует их для отображения навигационной цепочки, что делает сниппет более привлекательным и дает пользователю представление о структуре сайта (Рис. 3).
![]() |
Рис. 3 Пример сниппета с использованием микроразметки в «хлебных крошках»
Чтобы добиться этого, необходимо использовать микроразметку (любые из доступных форматов). Примеры реализации кода представлены в соответствующей справке Google для вебмастеров. Если «хлебные крошки» не оптимизированы данным образом, то цепочка навигации в сниппете выглядит неинформативно (используются URL страниц) (Рис.4).
![]() |
Рис. 4 Пример сниппета без использования микроразметки в «хлебных крошках»
О принципе формирования навигационных цепочек для сниппетов в Яндексе можно узнать из его справки.
Оформление «хлебных крошек»
В рамках данного выпуска мы не будем рассматривать примеры технической реализации «хлебных крошек» (правила построения кода можно найти на профильных ресурсах для вебмастеров), а уделим внимание важным моментам визуализации, которые зачастую упускаются из виду:
-
навигационная строка содержит ссылки, которые зрительно рекомендуется отделить от текста; достигается это стандартными приемами верстки – путем подчеркивания и/или выделения синим цветом (см. Рис. 5);
-
страница, на которой находится пользователь, не должна ссылаться сама на себя, поэтому ее необходимо оформить исключительно текстовым маркером (см. Рис. 5);
![]() |
Рис. 5 Пример оформления «хлебных крошек»
-
навигационную строку необходимо разместить на всех страницах сайта, кроме главной;
-
«хлебные крошки» должны иметь анкоры, называющие конкретный раздел или страницу сайта и не заспамленные ключевыми словами; допустимо – «пластиковые окна Rehau», не допустимо – «пластиковые окна Rehau в Москве недорого»;
-
для разграничения гиперссылок в цепочке навигации используются специальные знаки: тире, символ «больше чем» (>), закрывающие кавычки (»), реже – символ слеша (/);
-
«хлебные крошки» можно представить не только в классическом виде, но и органично вписать их в дизайн сайта посредством каскадных таблиц стилей (CSS).
![]() |
Рис. 6 Дизайн «хлебных крошек» на сайте интернет-гипермаркета Walmart
Выводы «Хлебные крошки» – это лаконичный, ненавязчивый и в то же время удобный элемент навигации. Если вы используете этот функционал на вашем сайте, то всегда можете проверить, насколько часто пользователи прибегают к нему для взаимодействия с ресурсом. В этом поможет инструмент Яндекса «Карта путей по сайту». Аналитика позволит не только получить статистику, но и выявить возможные ошибки в реализации навигационной цепочки, вызывающие сложности у пользователей. Для их идентификации используйте сервис «Вебвизор». |
Источник: Интернет-рассылки.


Поделиться статьей:
Акция: Закажи любой сайт до окончания акции и получи скидку + подбор семантического ядра + поисковую оптимизацию сайта Это позволит Вам получать еще больше трафика и соответственно клиентов из Интернета!
До конца акции осталось
0
5
4
3
2
1
0
0
9
8
7
6
5
4
3
2
1
0
0
5
4
3
2
1
0
0
9
8
7
6
5
4
3
2
1
0
0
9
8
7
6
5
4
3
2
1
0
0
9
8
7
6
5
4
3
2
1
0
|
Узнайте подробности акции у менеджеров компании по телефонам: 8-924-200-7194 г.Хабаровск 8-800-550-9899 Бесплатно по России (с 2:30 до 11:30 по Мск) |
Новые статьи и публикации
- 2023-01-26 » Установка и настройка Call tracking и Email tracking
- 2022-11-09 » 12 работающих формул продающих текстов
- 2022-11-09 » Дизайн сайта как SEO фактор ранжирования в 2022. Неочевидные нюансы в дизайне
- 2022-09-06 » Яндекс выложил в опенсорс фреймворк для ускорения разработки мобильных приложений
- 2022-08-18 » Как я могу перенаправить и переписать свои URL-адреса с помощью файла .htaccess?
- 2022-08-01 » Яндекс выложил в опенсорс исходный код и документацию фреймворка userver
- 2022-07-29 » Как выявить медленные SQL запросы?
- 2022-07-29 » Читали мое письмо или нет? Как проверить с помощью php — Записки программиста
- 2022-07-26 » Я потратил 30 дней на анализ лучших кнопок призыва к действию, которые смог найти в Интернете
- 2022-06-29 » ТОП-15 актуальных трендов интернет-маркетинга для России: эксперт рассказал о тенденциях рынка в 2022 году
- 2022-06-21 » Почему «99 франков» — это не лучшая ценовая стратегия, и как теперь «рисовать» привлекательные цены
- 2022-06-16 » Пушкинская карта и Культура.РФ на Вашем сайте. Подключим к действующему сайту и(или) сделаем новый!
- 2022-05-18 » Анализ рынка интернет-маркетинга в РФ от Яндекс Дзен
- 2022-05-18 » Итоги развития рекламного рынка РФ за 2021 год по версии АКАР
- 2022-05-18 » Потребление мобильного трафика в Рунете достигло рекордных значений
- 2022-05-17 » Yappy, TenChat и другие. Обзор новых русских соцсетей и их возможностей
- 2022-05-17 » Реклама малого бизнеса. Разбор доступных каналов, инструментов аналитики и терминов
- 2022-05-16 » Зачем нужен счетчик Top@Mail.ru и как установить на сайт пиксель myTarget
- 2022-04-25 » Несмотря на отсутствие блокировки: в Youtube потеряли более 20% активных русскоязычных авторов
- 2022-04-25 » Чат-бот – что это такое
- 2022-04-19 » Комплексная услуга по разработке сайта или Интернет-магазина БЕСПЛАТНО!!!
- 2022-03-17 » Импорт большого дампа БД в OpenServer через консоль
- 2022-02-25 » Возможности и преимущества Google Analytics 4
- 2022-02-20 » Интеграция Интернет-магазинов и сайтов с маркетплейсами в несколько кликов – РЭДЛАЙН! ыходи на Маркетплейсы — кратно увеличь свои продажи!
- 2022-01-26 » Анализ и отслеживание конверсий
- 2022-01-26 » Создаем сайты на Тильде с маркетинговой проработкой!
- 2022-01-26 » Разработка сайтов на Wordpress "под ключ"
- 2022-01-18 » Основные UX-тренды 2022 года
- 2021-12-24 » Как увеличить продажи перед Новым годом
- 2021-12-23 » Ключевые запросы − основа эффективного продвижения
Предоставляем полный комплекс услуг по созданию, обслуживанию и продвижению сайтов по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.