Как оформить хлебные крошки на сайте бизнеса

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

Например, для карточки настольной лампы подойдёт цепочка: «Главная › Освещение › Настольные лампы › Лампа с поворотным плафоном». Здесь «Освещение» открывает раздел с разными видами светильников, а «Настольные лампы» — категорию с похожими товарами. Ниже — порядок настройки такой навигации и проверки её работы.

Что такое хлебные крошки и когда они нужны

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

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

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

Они дополняют основное меню. Меню показывает доступные направления, а цепочка объясняет положение конкретной страницы. Кнопка браузера «Назад» тоже решает другую задачу: возвращает на предыдущую посещённую страницу, которой при входе из поиска может оказаться поисковая выдача.

Что подготовить перед настройкой

Сначала определите структуру разделов. Внешний вид строки не исправит ситуацию, когда товары распределены случайно, категории дублируют друг друга или родительский раздел не содержит ожидаемого выбора.

Для настройки понадобятся:

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

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

Как настроить хлебные крошки пошагово

Шаг 1. Постройте путь по структуре сайта

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

Для условного магазина мебели получится: «Главная › Мебель › Диваны › Угловой диван». Для компании, которая обслуживает оборудование: «Главная › Услуги › Обслуживание кондиционеров». Для статьи: «Главная › Блог › Уход за мебелью › Как очистить тканевый диван».

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

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

Шаг 2. Выберите родительский раздел для неоднозначных страниц

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

Практичный вариант — назначить основную категорию. Тогда у карточки будет стабильный путь независимо от того, откуда её открыли. Для кресла это может быть «Главная › Мягкая мебель › Кресла › Название кресла».

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

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

Шаг 3. Напишите понятные названия

Названия в цепочке должны помогать ориентироваться. Используйте привычные слова: «Обувь», «Женские ботинки», «Ремонт холодильников». Внутренние обозначения вроде «Категория B» или «Группа оборудования 04» посетителю ничего не объясняют.

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

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

Не добавляйте в пункты рекламные фразы и перечни поисковых запросов. «Купить недорогие качественные диваны с доставкой» плохо работает как название раздела. Для навигации достаточно слова «Диваны».

Шаг 4. Настройте ссылки и разделители

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

Между пунктами поставьте один и тот же разделитель, например «›» или «/». Он должен визуально отделять названия, но не выглядеть самостоятельной кнопкой. Не делайте разделитель частью кликабельного названия.

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

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

Шаг 5. Разместите цепочку рядом с заголовком

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

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

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

Шаг 6. Продумайте отображение на телефоне

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

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

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

Проверьте, удобно ли нажимать на соседние ссылки пальцем. Между ними должно быть достаточно пространства, чтобы выбор одного пункта не приводил к случайному переходу по другому. Убедитесь также, что строка не создаёт горизонтальную прокрутку всей страницы.

Как проверить результат с позиции покупателя

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

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

Повторите проверку на разных страницах: у товара с одной категорией, у товара из нескольких подборок, в глубоко вложенном разделе и на странице с длинным названием. Отдельно откройте эти страницы на телефоне.

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

Частые ошибки в оформлении

Цепочка показывает историю посещений. Путь «Главная › Акция › Поиск › Товар» не объясняет место товара в каталоге. Для основной строки используйте родительские разделы, а историю переходов при необходимости оформляйте отдельно.

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

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

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

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

Что передать разработчику

Задание должно описывать не только внешний вид, но и правила построения пути. Вместо просьбы «добавить хлебные крошки» подготовьте примеры для каждого типа страниц и список ожидаемых переходов.

В задании можно зафиксировать такие требования:

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

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

Вопросы перед запуском

Нужны ли хлебные крошки на главной странице?

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

Можно ли убрать название текущего товара?

Можно, если полный путь становится слишком длинным, а положение страницы остаётся понятным по ближайшей категории и заголовку. Но сначала проверьте сокращение названия и перенос строки. Текущий пункт помогает явно завершить цепочку.

Нужно ли включать номер страницы каталога?

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

Повышают ли хлебные крошки позиции в поиске?

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

Что делать после переименования или переноса раздела?

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

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

Проверить сайт бесплатно