Хлебные крошки на сайте: зачем нужны и как их правильно оформить

Хлебные крошки — строка ссылок над заголовком страницы: «Главная › Каталог › Окна › Окна ПВХ». Она показывает, где посетитель находится, и одним кликом возвращает его на уровень выше. Крошки нужны сайтам с вложенными разделами — каталогам, магазинам, блогам с рубриками. Яндекс и Google умеют показывать такую цепочку в выдаче вместо адреса страницы.

Что такое хлебные крошки на сайте

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

Выглядит это так:

Главная › Услуги › Разработка сайтов › Интернет-магазин

Каждый элемент, кроме последнего, — ссылка на раздел. Последний элемент — текущая страница, обычно обычным текстом. Строка стоит над заголовком h1 или прямо под шапкой сайта, чтобы её было видно до начала контента.

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

Хлебные крошки показывают путь от главной до текущей страницы и одним кликом возвращают на уровень выше.

Зачем нужны хлебные крошки посетителю и поисковику?

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

Поисковику крошки дают две вещи.

• Ссылки между уровнями — каждая страница ссылается на родительский раздел. Google пишет, что выявляет взаимосвязи между страницами по тому, как организованы ссылки между ними, поэтому структура навигации влияет на то, как он воспринимает сайт.
• Подсказку о категории — размеченная цепочка помогает поисковику отнести страницу к нужному разделу и показать её в сниппете не адресом, а понятным путём.

Чтобы робот увидел эти ссылки, они должны быть обычными тегами a с атрибутом href. Google предупреждает, что навигация не должна строиться на добавлении элементов по событиям JavaScript.

Обещать рост позиций только от крошек нельзя: ни Яндекс, ни Google не называют их фактором ранжирования. Их польза — в понятной структуре и в сниппете, который лучше объясняет, куда ведёт ссылка.

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

Каким сайтам нужны хлебные крошки, а каким нет?

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

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

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

Какие бывают хлебные крошки?

Различают три вида крошек, и они решают разные задачи.

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

Крошки по истории сбивают с толку: два человека видят на одной странице разные цепочки, а поисковик — вообще случайную. Для поиска такой вариант бесполезен.

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

Хорошие крошки заметны, но не спорят с заголовком. Ниже правила, которые закрывают большинство спорных вопросов при вёрстке:

Названия в крошках берите из названий разделов, а не из title. Если раздел в меню называется «Окна ПВХ», в цепочке он должен называться так же: человек сверяет крошки с меню.

Последний элемент цепочки — текущая страница: её выделяют, но не делают ссылкой на саму себя.

HTML-разметка и доступность крошек

Удобнее всего свёрстать крошки упорядоченным списком внутри элемента nav. Такой код понятен и поисковику, и программам экранного доступа:

<nav aria-label="Хлебные крошки">
  <ol class="breadcrumbs">
    <li><a href="https://site.ru/">Главная</a></li>
    <li><a href="https://site.ru/catalog/">Каталог</a></li>
    <li><a href="https://site.ru/catalog/okna/">Окна</a></li>
    <li><span aria-current="page">Окна ПВХ</span></li>
  </ol>
</nav>

Атрибут aria-label подписывает блок навигации, чтобы незрячий посетитель отличил крошки от главного меню. Атрибут aria-current="page" сообщает, какой элемент — текущая страница. MDN поясняет: если текущая страница в крошках оформлена ссылкой, на ней нужно ставить aria-current="page", а если это просто текст, атрибут необязателен.

Разделители лучше рисовать стилями, через псевдоэлемент, а не символами в тексте. Тогда экранный диктор не будет зачитывать «больше, больше, больше» между пунктами.

Микроразметка BreadcrumbList: что важно знать

Чтобы поисковик показал цепочку в сниппете, к видимым крошкам добавляют микроразметку Schema.org типа BreadcrumbList. Яндекс рекомендует формат JSON-LD и учитывает три поля: name — название элемента, url — адрес, position — порядковый номер в цепочке.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type": "ListItem", "position": 1, "name": "Каталог", "item": "https://site.ru/catalog/"},
    {"@type": "ListItem", "position": 2, "name": "Окна", "item": "https://site.ru/catalog/okna/"},
    {"@type": "ListItem", "position": 3, "name": "Окна ПВХ"}
  ]
}
</script>

Требования поисковиков к разметке крошек:

• Минимум два элемента — Google требует контейнер BreadcrumbList как минимум с двумя элементами ListItem.
• Главную можно не размечать — Google разрешает не добавлять в разметку ни путь верхнего уровня, ни саму страницу.
• Последний элемент можно без адреса — тогда Google возьмёт адрес текущей страницы.
• Домен совпадает с сайтом — Яндекс не построит цепочку, если адреса в разметке ведут на другой домен.
• position — только числа — при нечисловых значениях цепочка в Яндексе не сформируется.
• До трёх элементов — Яндекс рекомендует не больше трёх и может выбросить элемент короче четырёх символов или ссылку на главную.

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

Факт. Яндекс рекомендует включать в разметку навигационной цепочки до трёх элементов и может исключить ссылку на главную страницу.

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

Проверка идёт в три шага: глазами, по коду и в инструментах поисковиков.

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

Затем откройте исходный код и убедитесь, что ссылки в крошках — обычные a href, а не кнопки со скриптом. Если крошки выводятся только после загрузки JavaScript, робот может их не увидеть.

Микроразметку проверяют валидаторами. В Яндекс Вебмастере это «Валидатор микроразметки»: вставьте адрес или код страницы. Разметка, по словам Яндекса, формируется в течение двух недель. В Google — инструмент проверки расширенных результатов, а после публикации — инструмент проверки URL в Search Console. Как подключить сайт к кабинету, рассказали в статье как подключить сайт к Google Search Console.

Учтите ограничение выдачи Google: по его справке функция строки навигации доступна на компьютерах. На телефоне цепочку в сниппете вы можете не увидеть, даже если разметка верна.

С чего начать, если крошек на сайте нет

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

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

В большинстве CMS крошки выводит стандартный компонент или модуль шаблона, и задача сводится к настройке названий разделов. На самописном сайте или в сложном каталоге это работа программиста. Крошки, микроразметку и структуру разделов мы закладываем при разработке сайтов-каталогов, чтобы их не пришлось добавлять после запуска.

Источники

• Навигационные цепочки — Яндекс
• Структурированные данные для строки навигации (BreadcrumbList) — Google
• Структура навигации по сайту интернет-магазина — Google
• BreadcrumbList — Schema.org
• aria-current — MDN