Хлебные крошки
Хлебные крошки — цепочка ссылок на странице вида «Главная › Каталог › Товар», которая показывает путь от главной к текущей странице. Яндекс называет её навигационной цепочкой и может показывать в сниппете вместо адреса.
Содержание
- 01Что такое хлебные крошки на сайте и откуда пошло название
- 02Три вида хлебных крошек: по иерархии, по атрибутам и по истории
- 03Как хлебные крошки попадают в сниппет: разметка BreadcrumbList для Яндекса и Google
- 04Как оформить хлебные крошки для людей: правила юзабилити
- 05Внедрение на примере каталога магазина: от дерева категорий до проверки
- 06С чем путают хлебные крошки: меню, адрес страницы, карта сайта и фильтры
- 07Частые вопросы
Что такое хлебные крошки на сайте и откуда пошло название
Хлебные крошки (по-английски breadcrumbs) — ряд ссылок в верхней части страницы, который показывает её место в структуре сайта: «Главная › Каталог › Кофемашины › Рожковые». Каждое звено ведёт на раздел уровнем выше, последнее — сама текущая страница. Название пришло из сказки о Гензеле и Гретель: дети оставляли хлебные крошки, чтобы найти дорогу назад. У элемента на сайте тот же смысл: по цепочке можно вернуться на любой уровень, не нажимая «Назад».
В справке Яндекса это называется навигационной цепочкой: ряд ссылок на разделы сайта, к которым относится найденная страница. Он помогает быстро оценить объём информации на сайте или тип контента и перейти в нужный раздел. Особенно нужен он, когда человек попадает на глубокую страницу прямо из поиска, минуя главную и каталог.
Три вида хлебных крошек: по иерархии, по атрибутам и по истории
| Вид | Что показывает | Пример | Где уместен |
|---|---|---|---|
| Иерархические | Место страницы в структуре сайта, цепочка постоянная | Главная › Одежда › Куртки | Любой сайт глубже двух уровней |
| Атрибутные | Признаки, по которым классифицирована страница | Куртки › Мужские › Чёрные › Зимние | Каталоги, где товар описывается набором свойств |
| По истории | Шаги, которые человек прошёл до страницы | Каталог › Парки › Куртки › Корзина | Почти не используют: цепочка меняется от сессии |
Специалисты по юзабилити рекомендуют именно иерархический вариант: цепочка должна отражать структуру сайта, а не сессию пользователя. Если страница лежит в нескольких разделах, выберите один основной путь. Для поисковиков тоже подходит иерархия: по определению schema.org, BreadcrumbList — это цепочка связанных страниц, которая обычно заканчивается текущей.
Как хлебные крошки попадают в сниппет: разметка BreadcrumbList для Яндекса и Google
Яндекс пишет, что навигационную цепочку можно построить на основе микроразметки Schema.org: нужен тип BreadcrumbList в формате JSON-LD. Google работает с тем же типом. Требования у двух систем близки, но не совпадают.
| Параметр | Яндекс | |
|---|---|---|
| Число звеньев | Рекомендуется до трёх: если звеньев слишком много, показываются последние. Звено, ведущее на главную, может быть исключено | Не меньше двух элементов ListItem в списке |
| Название звена | Не пустое; промежуточное звено короче четырёх символов (без пробелов и эмодзи) может быть исключено; эмодзи при обработке удаляются | Свойство name: текст, который видит пользователь |
| Адрес звена | Указан у всех, кроме последнего; домен совпадает с доменом сайта; адрес абсолютный (HTTP или HTTPS) или относительный | Свойство item с адресом страницы; у последнего звена его можно опустить, тогда берётся адрес текущей страницы |
| Порядок | Поле position — число; свойство можно не использовать | Поле position — целое число, единица означает начало пути |
| Несколько путей | Не оговорено в справке | Допускается: каждый путь описывают отдельным списком |
Гарантий нет ни у одной системы. Яндекс может использовать разметку полностью или частично и пишет, что она формируется обычно в течение двух недель. Google рекомендует показывать типичный путь пользователя к странице, а не копировать структуру адреса. Справка Google по этой функции указывает, что она доступна на компьютерах. Проверить разметку можно в валидаторе микроразметки в Яндекс Вебмастере и в Rich Results Test от Google. Видимый сниппет меняется не сразу.
Как оформить хлебные крошки для людей: правила юзабилити
Разметка нужна роботу, а цепочка на странице — человеку, и для него действуют свои правила. Они собраны из общепринятых рекомендаций по юзабилити.
- Место. Вверху страницы под главным меню; разделитель — «›» или «/».
- Путь. Только иерархия, от общего к частному. Раздел без собственной страницы в цепочку не включают.
- Последнее звено. Текущая страница, не ссылка, но с визуальным выделением: ссылка, которая ничего не делает, сбивает с толку.
- Роль. Цепочка дополняет меню и не заменяет его.
- Телефон. Одна строка без переносов, крупные цели касания — в рекомендациях по юзабилити называют размер не меньше 1 × 1 см. На мобильных допустимо сократить путь до родительского раздела.
- Где не нужны. На сайтах из одного-двух уровней и на линейных мини-сайтах, где страницы идут по порядку.
Такие решения закладывают в шаблоны при разработке сайта, а на этапе тестирования проверяют общий уровень юзабилити.
Внедрение на примере каталога магазина: от дерева категорий до проверки
- Зафиксируйте дерево категорий. Для товаров, лежащих в нескольких разделах, назначьте один основной.
- Пусть шаблон собирает цепочку из дерева сам, а видимый блок и разметку берёт из одного источника. Если вывод и код пишутся раздельно, они рано или поздно разойдутся.
- Проверьте несколько страниц каждого типа: карточку, категорию, статью.
- Через две недели посмотрите сниппеты в выдаче и вернитесь к ошибкам, если цепочки нет.
Допустим, в каталоге 3 000 карточек, и у каждой цепочка из трёх звеньев: главная, категория, подкатегория. Шаблон создаёт 9 000 ссылок, из них 6 000 ведут в разделы каталога, и вручную не написано ни одной. Это ссылки, по которым и человек, и робот переходят от товара к его разделу. Проверку шаблонов включают в работу по SEO-оптимизации.
С чем путают хлебные крошки: меню, адрес страницы, карта сайта и фильтры
- Главное меню. Оно ведёт в разделы сверху вниз, а цепочка показывает путь от текущей страницы вверх.
- Адрес страницы. Он не обязан повторять цепочку, и Google прямо советует не копировать структуру адреса в крошки.
- Карта сайта. Это файл со списком страниц для роботов, а не элемент интерфейса.
- Фильтры каталога. Выбранные цвет или размер не образуют иерархию. Они бывают в атрибутных крошках, но основная навигация строится на иерархии.
Частые вопросы
Хлебные крошки на сайте — что это простыми словами?
Это строка со ссылками вверху страницы, которая показывает путь от главной к текущей: например, «Главная › Каталог › Кофемашины». По ней можно вернуться на любой уровень. Название пришло из сказки о Гензеле и Гретель, а Яндекс в справке называет такой элемент навигационной цепочкой.
Зачем нужны хлебные крошки на сайте?
Человеку они показывают, где он находится, и дают быстрый путь в родительский раздел. Поисковику помогают понять иерархию страниц, а в выдаче цепочка может заменить обычный адрес в сниппете. Особенно полезны они на глубоких сайтах, куда люди попадают сразу на внутренние страницы.
Как сделать хлебные крошки в сниппете?
Выведите цепочку на странице и добавьте микроразметку BreadcrumbList в формате JSON-LD, где у каждого звена есть название и адрес. Проверьте её в валидаторе Вебмастера и в Rich Results Test. Показ цепочки в выдаче поисковик не гарантирует: он может использовать разметку частично.
Почему хлебные крошки не отображаются в выдаче?
Причины бывают разными: ошибки в разметке, адреса звеньев ведут на другой домен, названия короче четырёх символов, лишнее звено с главной. Справка Google отдельно уточняет, что функция доступна на компьютерах. После исправления подождите: разметка обычно обрабатывается в течение двух недель.
Нужны ли хлебные крошки на мобильной версии?
Да, если у сайта больше двух уровней вложенности. Цепочка должна помещаться в одну строку, а цели касания быть достаточно крупными. На телефоне допустимо оставить одно звено, ведущее в родительский раздел. Разметка при этом должна повторять реальную иерархию страницы.