Хлебные крошки — цепочка ссылок наверху страницы, показывающая, где посетитель находится. Элемент простой, но делают его с ошибками чаще, чем кажется: путают со историей переходов, забывают разметку, оставляют ссылкой текущую страницу. Разбираемся, как построить цепочку и что она даёт.
Коротко
- Крошки показывают путь до страницы и дают ссылки на все уровни выше.
- Цепочка должна отражать структуру, а не историю переходов посетителя.
- Разметка позволяет показать путь в результатах поиска вместо адреса.
- Последний элемент — текущая страница, и он не должен быть ссылкой.
Что дают хлебные крошки
Навигация на уровень выше
Человек, пришедший из поиска сразу на глубокую страницу, видит, где он и куда можно подняться.
Внутренние ссылки на разделы
Каждая категория получает ссылку со всех своих страниц — это заметный вклад в перелинковку.
Путь вместо адреса в выдаче
При наличии разметки поисковые системы показывают цепочку разделов вместо длинного URL.
Понимание структуры роботом
Крошки явно сообщают, какая страница чему подчинена.
Где крошки особенно важны. На сайтах с глубоким каталогом и в блогах с рубриками. На одностраничном сайте или в структуре из пяти страниц они не нужны — цепочка из двух элементов ничего не добавляет.
Как строить цепочку
- Цепочка отражает структуру, а не путь посетителя. Человек мог прийти из поиска или из блога — крошки всё равно показывают место страницы в каталоге.
- Начинается с главной. Обычно словом «Главная» или иконкой дома со ссылкой на корень.
- Заканчивается текущей страницей. Её название — не ссылка.
- Названия совпадают с названиями разделов. Не сокращённые и не придуманные заново.
- Один путь для страницы. Если товар лежит в двух категориях, выбирается основная — иначе цепочка будет разной при разных переходах.
- Крошки стоят над заголовком страницы, а не под ним и не в подвале.
Про товары в нескольких категориях. Динамическая цепочка, зависящая от того, откуда пришёл посетитель, создаёт у одной страницы несколько разных путей. Для людей это терпимо, для разметки — нет: поиск получает противоречивые сведения о структуре. Правильнее закрепить за товаром основную категорию.
Разметка
Чтобы путь показывался в выдаче, цепочку размечают по словарю schema.org — типом BreadcrumbList. Разметку можно добавить отдельным блоком в формате JSON-LD, не меняя вёрстку.
| Элемент | Что указывают |
|---|---|
| itemListElement | Список звеньев по порядку |
| position | Номер звена, начиная с единицы |
| name | Название раздела, как оно видно на странице |
| item | Полный адрес раздела |
Разметка должна совпадать с видимой цепочкой
Названия и порядок — те же, что видит посетитель. Расхождение считается нарушением.
Адреса указываются полные
С протоколом и доменом, в том виде, в котором страница доступна.
Последнее звено можно оставить без адреса
Это текущая страница, ссылка на саму себя не нужна.
Проверьте валидатором
Инструменты проверки разметки у поисковых систем показывают ошибки сразу.
Крошки на мобильных
На узком экране длинная цепочка занимает две-три строки и вытесняет заголовок. Решения есть, и все они лучше, чем прятать крошки совсем.
Рабочие приёмы
- Горизонтальная прокрутка цепочки
- Свернуть середину: «Главная … Категория Товар»
- Уменьшить шрифт и убрать отступы
- Показать только предыдущий уровень со стрелкой
Плохие решения
- Скрыть крошки стилями на мобильных
- Оставить перенос на три строки
- Убрать ссылки, оставив текст
- Разметка есть, а видимых крошек нет
Последний пункт — нарушение. Разметка должна описывать то, что видит посетитель. Если на мобильной версии крошки скрыты, а разметка осталась, это расхождение содержимого с разметкой, и показ пути в выдаче могут отключить.
Частые ошибки
| Ошибка | Чем плохо |
|---|---|
| Текущая страница — ссылка на саму себя | Бесполезная ссылка, сбивает посетителя |
| Цепочка меняется в зависимости от перехода | Противоречивые сведения о структуре |
| Разметка не совпадает с видимым текстом | Нарушение требований, путь в выдаче отключают |
| Нет ссылки на главную | Цепочка обрывается, теряется верхний уровень |
| Названия сокращены до неузнаваемости | Непонятно, куда ведёт ссылка |
| Крошки только на товарах | Категории остаются без пути наверх |
Быстрая проверка. Откройте глубокую страницу так, будто пришли из поиска — в новой вкладке, минуя каталог. Если по крошкам понятно, где вы и как подняться в нужный раздел за один клик, элемент работает.
Частые вопросы
Нужны ли хлебные крошки маленькому сайту?
Если страниц немного и вложенности почти нет — не нужны: цепочка из двух элементов ничего не добавляет. Они нужны там, где есть каталог с категориями или блог с рубриками.
Должна ли последняя крошка быть ссылкой?
Нет. Последнее звено — текущая страница, ссылка на саму себя бесполезна и сбивает с толку. В разметке для этого звена можно не указывать адрес.
Что делать, если товар лежит в нескольких категориях?
Закрепить за ним основную категорию и строить цепочку всегда по ней. Путь, меняющийся в зависимости от того, откуда пришёл посетитель, даёт поиску противоречивые сведения о структуре сайта.
Можно ли скрыть крошки на мобильной версии?
Скрывать нежелательно, особенно если разметка остаётся: это расхождение между разметкой и видимым содержимым. Лучше свернуть середину цепочки или сделать её прокручиваемой по горизонтали.
Читайте также
Продвинем сайт в поиске
Соберём семантику, доведём структуру и текст до уровня топа и будем вести проект до заявок.
Обсудить SEO-продвижение
