BITSPARK / Статьи / Дизайн и элементы сайта

Хлебные крошки на сайте: что это и что проверить при приёмке

Коротко: хлебные крошки на сайте - цепочка ссылок, которая показывает место страницы в структуре сайта и ведёт назад вплоть до главной. Так элемент описывают W3C, MDN и Google. Цепочке есть что показывать там, где у сайта несколько уровней страниц. Решения для этапа структуры и список для приёмки - в конце.

Слово хлебные крошки может оказаться в смете или в макете сайта. Ниже - что это за элемент по документации W3C, MDN, Google и Яндекса, каким сайтам он нужен и что проверить при приёмке. Пример вымышленный: мастерская керамики с сайтом example.ru. Страницы W3C, MDN и schema.org написаны по-английски, после каждой английской цитаты стоит перевод, он не заменяет оригинал.

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

Коротко: хлебные крошки - строка ссылок, по которой посетитель видит, где страница находится на сайте, и может подняться на уровень выше, вплоть до главной. W3C и MDN называют её breadcrumb trail, документация Google - строкой навигации. Справка Яндекса называет навигационной цепочкой ряд ссылок на разделы сайта, к которым относится найденная страница.

Слов хлебные крошки нет на страницах W3C, MDN, Google и Яндекса. W3C и MDN пишут breadcrumb trail и breadcrumb navigation, русская документация Google - «строка навигации». Это названия одного элемента навигации. Справка Яндекса пишет «навигационная цепочка» о ряде ссылок на разделы сайта, к которым относится найденная страница, и связывает его с разметкой. Дальше каждое правило приписано странице, где оно сказано, и дано в её терминах.

Так определяет элемент W3C. Техника G65 - пример способа соответствовать рекомендациям WCAG по доступности веб-содержимого; страница открыта в редакторской версии.

"A breadcrumb trail (or 'breadcrumb navigation') helps the user to visualize how content has been structured and how to navigate back to previous web pages."

Перевод: цепочка (breadcrumb trail, или «breadcrumb navigation») помогает пользователю представить, как структурировано содержимое и как вернуться к предыдущим веб-страницам.

MDN в рецепте вёрстки описывает тот же элемент и называет его breadcrumb navigation:

"Breadcrumb navigation helps the user to understand their location in the website by providing a breadcrumb trail back to the start page."

Перевод: breadcrumb navigation помогает пользователю понять, где он находится на сайте: она даёт цепочку (breadcrumb trail) обратно к начальной странице.

Документация Google о разметке начинается с определения строки навигации, оно стоит в первых строках страницы:

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

Справка Яндекса о разметке описывает навигационную цепочку для пользователя поиска и начинается с определения:

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

Пример для example.ru. На странице кружки цепочка выглядит так: Главная › Каталог › Чашки › Кружка для чая. Первые три пункта - ссылки на главную, каталог и раздел чашек, а последний пункт - сама страница кружки.

Из чего состоит цепочка и где она стоит?

Коротко: по G65 и MDN цепочка строится из ссылок, между пунктами показывают разделитель. В рецепте MDN ссылки идут в строку, а текущая страница стоит последней. По G65 цепочка находится на одном и том же месте на каждой странице набора, а размещение выше на странице, после шапки, G65 называет распространённой практикой. В коде MDN это блок nav с подписью aria-label, список из пунктов и пометка aria-current у текущей страницы.

Таблица собрана из двух страниц, техники G65 и рецепта MDN, и в каждой строке названа страница, где это сказано.

Часть цепочкиЧто сказаноСтраница
Пунктыцепочка строится из ссылок; в рецепте MDN ссылки идут в строкуG65; MDN
Разделительвидимый разделитель между пунктами; в рецепте MDN разделитель показывает иерархию между страницами и добавлен через CSSG65; MDN
Текущая страницаMDN: стоит последней; G65: последний пункт, выделенный оформлением, - один из вариантовMDN; G65
Место на страницеодно и то же место на каждой странице набора; размещение выше на странице, после шапки, названо распространённой практикойG65
Подпись и пометкасписок внутри блока навигации nav с подписью aria-label; у текущей страницы атрибут aria-currentG65; MDN

Разделители G65 называет прямо: символы «>», «|», «/» и «→», а ещё декоративные значки и разделители, нарисованные через CSS. Место на странице и положение цепочки в наборе страниц G65 описывает в таком фрагменте:

"Breadcrumb trails are implemented using links to the web pages that have been accessed in the process of navigating to the current web page. They are placed in the same location within each web page in the set. Placing the breadcrumb high on the page, typically after the header, is a common practice that helps users quickly understand their location within the site."

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

Что такое набор страниц, поясняет критерий 2.4.8 в разделе Key Terms: страницы с общей целью, созданные одним автором, группой или организацией. Из примеров там же: страницы оформления заказа с другим шаблоном в набор страниц каталога не входят; разные языковые версии считаются разными наборами.

Разметка в рецепте MDN выглядит так, код приведён с той страницы без изменений, в том числе английские слова в тексте пунктов:

<nav aria-label="Breadcrumb" class="breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Category</a></li>
    <li><a href="#">Sub Category</a></li>
    <li><a href="#">Type</a></li>
    <li><span aria-current="page">Product</span></li>
  </ol>
</nav>

В коде три детали, о которых заказчик может спросить подрядчика: подпись навигации aria-label, список из пунктов и пометка aria-current у текущей страницы. Первые четыре пункта в примере MDN - ссылки, а пятый, текущая страница, - текст без ссылки.

Какие бывают хлебные крошки: путь посетителя или место в структуре?

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

Различие между двумя видами цепочки G65 формулирует одним предложением в описании техники:

"A breadcrumb trail either displays locations in the path the user took to reach the web page, or it displays the location of the current web page within the organization of the site."

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

Возьмём ту же кружку на example.ru. Она лежит в каталоге в разделе чашек, а ещё входит в подборку подарков. Посетитель пришёл со страницы подборки.

Цепочка-путь будет такой: Главная › Подарки › Кружка для чая. Цепочка-структура для той же страницы: Главная › Каталог › Чашки › Кружка для чая. Какой вариант нужен сайту, решают заказчик и подрядчик на этапе структуры вместе с остальными вопросами о навигации.

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

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

В таблице слева ситуации, которые разбирают сами страницы W3C, справа вывод, а для сайта из одной страницы вывод сделан из определений.

СитуацияЧто сказано на страницеВывод
Каталог интернет-магазинаG65, пример 2: информационная архитектура интернет-магазина разбита на категории от общих к всё более узким подразделам товаров; цепочка в примере идёт от названия компании к странице ноутбуковцепочка показывает, на каком уровне каталога находится страница
Разделы с категориями и подкатегориямикритерий 2.4.8, пример: на портале темы разложены по категориям, и по мере перехода по категориям и подкатегориям цепочка показывает текущее место в иерархиито же для сайта с разделами и подразделами
Посетитель пришёл по ссылке сразу на глубокую страницукритерий 2.4.8, Benefits: это отдельная ситуация, где информация о месте полезнацепочка показывает такому посетителю, где он оказался
Сайт из одной страницыстраницы W3C и Google прямо о таком сайте не пишут; Google: строка навигации отражает положение страницы в иерархии сайтавывод из определений: у сайта из одной страницы иерархии нет, показывать в цепочке нечего

Про посетителя, который попал на глубокую страницу по ссылке, критерий 2.4.8 пишет так:

"It is also helpful when a user follows a link directly to a page deep within a set of web pages (...)"

Перевод: это полезно и тогда, когда пользователь переходит по ссылке сразу на страницу, расположенную глубоко внутри набора веб-страниц (...).

Другая страница example.ru - мастер-класс по росписи. Она лежит в разделе услуг: Главная › Услуги › Мастер-класс по росписи. Посетитель попал на неё по ссылке из письма. Цепочка показывает ему, в каком разделе он оказался, и даёт ссылку на главную страницу сайта.

Если посетитель набрал адрес, которого на сайте нет, он увидит страницу 404. Что Google советует разместить на такой странице, разобрано в статье Страница 404: что это, что на ней разместить и как проверить код.

Что пишут о хлебных крошках и доступности WCAG и MDN?

Коротко: критерий WCAG 2.4.8 Location помечен на странице как Level AAA, цепочка - одна из нескольких техник к нему. Страница G65 сама пишет, что техники для соответствия WCAG не требуются. В рецепте MDN навигация подписана через aria-label, а текущая страница помечена через aria-current.

Страницы W3C в статье открыты в редакторской версии на w3c.github.io, и вверху каждой из этих страниц стоит пометка:

"This is an unpublished editor's draft that might include content that is not finalized."

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

Текст самого критерия 2.4.8 из раздела Success Criterion занимает одно предложение и звучит так:

"Information about the user's location within a set of web pages is available."

Перевод: информация о том, где пользователь находится внутри набора веб-страниц, доступна.

В заголовке раздела критерий назван «Location (Level AAA)». В кратком описании той же страницы, в разделе In Brief, сказано, что делать:

"Use breadcrumbs, site maps, or other indicators to give context."

Перевод: используйте breadcrumbs, карты сайта или другие индикаторы, чтобы дать контекст.

В списке техник, которые W3C считает достаточными для критерия, цепочка (G65) стоит первой, и это один из пяти способов. Остальные четыре названы рядом: G63 (карта сайта), G128 (указание текущего места в панелях навигации), ARIA26 (пометка текущего пункта набора через aria-current) и G127 (указание связи страницы с более крупным набором страниц); названия переведены на русский.

Статус самих техник страница G65 оговаривает в начале, в разделе About this Technique:

"Techniques are examples of ways to meet Web Content Accessibility Guidelines (WCAG). They are not required to meet WCAG."

Перевод: техники - это примеры способов соответствовать Web Content Accessibility Guidelines (WCAG), и для такого соответствия они не требуются.

Что подписывать и помечать в цепочке, MDN объясняет в разделе об особенностях доступности:

"We used the aria-label and aria-current attributes to help assistive technology users understand what this navigation is and where the current page is in the structure."

Перевод: мы использовали атрибуты aria-label и aria-current, чтобы помочь пользователям вспомогательных технологий понять, что это за навигация и где в структуре находится текущая страница.

Вспомогательные технологии - это, например, программы чтения с экрана; их называет и сама страница MDN. Отдельная страница MDN об атрибуте aria-current описывает значение page, которое относится к цепочке:

"Represents the current page within a set of pages such as the link to the current document in a breadcrumb."

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

Пример на той же странице задаёт для текущей страницы цепочки aria-current со значением page, а для пункта без ссылки там есть отдельное условие:

"If the element representing the current page in the breadcrumb was not a link, the aria-current is optional."

Перевод: если элемент текущей страницы в цепочке не был ссылкой, aria-current необязателен.

В примере G65 атрибут стоит и на последнем пункте без ссылки. Процедура проверки G65 предусматривает пометку для случая, когда текущий пункт ведёт себя как ссылка.

Про разделитель, который рисуется через CSS, MDN предупреждает отдельным абзацем в том же разделе:

"Be aware that the separator arrows → added via the content CSS property in the example above are exposed to assistive technologies (AT), including screen readers and braille displays."

Перевод: имейте в виду, что стрелки-разделители →, добавленные через CSS-свойство content в примере выше, доступны вспомогательным технологиям (AT), включая программы чтения с экрана и дисплеи Брайля.

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

Что такое разметка BreadcrumbList и что о ней пишут Google и Яндекс?

Коротко: BreadcrumbList - тип разметки schema.org для цепочки связанных страниц. Разметка - код на странице, которым сайт сообщает поисковой системе, из каких пунктов состоит цепочка. Google и Яндекс описывают её в своих документациях и оба не гарантируют показ в результатах поиска. У каждой системы свои условия разметки, их нельзя переносить с одной на другую.

Определение типа есть на schema.org. Там сказано, что BreadcrumbList - это "an ItemList consisting of a chain of linked Web pages" (перевод: список ItemList, состоящий из цепочки связанных веб-страниц). Порядок пунктов задаёт свойство position: по тому же описанию первые пункты соответствуют началу цепочки, например главной странице сайта или раздела. Источник - BreadcrumbList - Schema.org Type.

Зачем Google разметка строки навигации, он объясняет в разделе с примерами:

«Google Поиск использует разметку строки навигации в теле веб-страницы, чтобы отнести информацию с этой страницы к той или иной категории результатов поиска.»

Яндекс на своей странице тоже связывает навигационную цепочку с разметкой schema.org:

«Навигационная цепочка может формироваться на основе микроразметки Schema.org.»

В таблице рядом - то, что каждая страница говорит о разметке. У Google и Яндекса свои условия, их нельзя переносить с одной страницы на другую.

ВопросGoogle (страница о BreadcrumbList)Яндекс (страница «Навигационные цепочки»)
Термин на странице«строка навигации»«навигационная цепочка»
Формат разметкипримеры кода даны в JSON-LD, RDFa и микроданных«в формате JSON-LD»
Свойства пунктовitem (адрес страницы), name (название, которое видит пользователь), position (позиция в иерархии сайта)name (название), url (адрес), position (последовательность в цепочке); «Вы можете не использовать position»
Число пунктов«как минимум с двумя элементами ListItems»«Рекомендуем включать в цепочку до трех элементов.»
Последний пункт«Если звено является последним в строке навигации, можно обойтись без свойства item.»«Для всех элементов, кроме последнего, указан абсолютный (URL) или относительный путь на соответствующий раздел сайта.»
Проверка кода«инструмента проверки расширенных результатов»«валидатором в Вебмастере»
Показ в результатах«Google не гарантирует показ вашего контента в результатах поиска, которые формируются на основе структурированных данных.»«Яндекс не гарантирует, что полученные данные появятся в результатах поиска.»

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

Для одной страницы Google допускает несколько строк навигации, если к ней ведёт несколько путей:

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

На example.ru это две цепочки для кружки: через подборку подарков (Главная › Подарки › Кружка для чая) и через каталог (Главная › Каталог › Чашки › Кружка для чая). Какие именно цепочки Google советует подбирать, он пишет в разделе с правилами разметки:

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

Код разметки здесь не приводится: достаточно знать названия форматов, JSON-LD, RDFa и микроданные, и то, что проверку кода описывают документации обеих систем.

Что Google пишет о строке навигации в результатах поиска?

Коротко: в результатах поиска Google части URL могут показываться в виде строки навигации. Google формирует её автоматически по словам из URL, а слова можно задать разметкой. 23 января 2025 года Google написал, что начинает отключать строку в мобильном поиске, на компьютере она остаётся. Запись касается результатов поиска, цепочка на самих страницах сайта в ней не упомянута.

Вводное руководство Google описывает строку навигации в результатах поиска такими словами:

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

Дальше руководство говорит о том, откуда берётся эта строка, если слова для неё не заданы разметкой:

«Google формирует строку навигации автоматически на основе слов, содержащихся в URL, но, если вы достаточно технически подкованы, вы можете задать эти слова при помощи структурированных данных.»

Запись блога Google Search Central от 23 января 2025 года, автор - Кейтлин Дорси (Caitlin Dorsey), менеджер по продукту, Google Поиск, называет причину изменения и объём:

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

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

«Если вы добавили разметку для строки навигации, от вас не потребуется никаких действий (...)»

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

Страница Google о разметке, обновлённая 12 сентября 2026 года, пишет: «Функция доступна на компьютерах во всех регионах (и на всех языках), в которых представлены сервисы Google.»

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

Что заказчику решить на этапе структуры?

Коротко: цепочка показывает место страницы в структуре сайта, поэтому решения о ней принимаются вместе со структурой. Список ниже - семь вопросов подрядчику: сколько уровней у страниц, что показывает цепочка, что стоит первым пунктом, как оформлена текущая страница, какой разделитель, нужна ли разметка BreadcrumbList и как названы пункты. Каждый вопрос опирается на страницу первоисточника.

На главной странице BITSPARK шаг процесса «Структура» описан так: «Собираем архитектуру: сценарии, страницы, контент и логику взаимодействия.» Вопросы подрядчику о цепочке:

  1. Сколько уровней у страниц сайта? Цепочка отражает положение страницы в иерархии (Google) или в организации сайта (G65). У сайта из одной страницы показывать в ней нечего.
  2. Что показывает цепочка: путь посетителя или место в структуре? G65 называет оба варианта.
  3. Что стоит первым пунктом? Google пишет о переходе «вплоть до главной страницы», MDN - о цепочке «back to the start page», то есть обратно к начальной странице.
  4. Текущая страница - ссылка или текст? В примерах W3C есть оба варианта: в примере 1 последний пункт без ссылки, в примере 2 последний пункт - ссылка с aria-current. MDN пишет, что для пункта без ссылки aria-current необязателен.
  5. Какой разделитель и как он передаётся вспомогательным технологиям? G65 называет видимые разделители, MDN предупреждает о стрелках из CSS.
  6. Нужна ли разметка BreadcrumbList и в каком формате? Яндекс называет JSON-LD, Google даёт примеры в трёх форматах.
  7. Какие названия у пунктов? В документации Google свойство name - это название, которое видит пользователь. Яндекс на странице называет условием формирования цепочки заполненный текст элементов и пишет, что промежуточный элемент короче четырёх символов или слишком большой по длине может быть исключён.

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

Что проверить при приёмке сайта?

Коротко: у техники G65 есть процедура проверки цепочки. Список ниже собран из неё, из рецепта MDN и из документации Google и Яндекса, и каждый пункт назван страницей. Для мастерской керамики с сайтом example.ru это девять действий: найти цепочку, сверить пункты со структурой, проверить текущую страницу и её пометку в коде, пройти по ссылкам, сравнить страницы, спросить о разделителе, подписи и разметке.

Допустим, мастерская принимает сайт example.ru. Список для приёмки цепочки составлен по страницам, названным в каждом пункте:

  1. Откройте страницу глубже главной, например страницу кружки, и найдите цепочку. Процедура G65 начинается с проверки, что цепочка отображается.
  2. Сверьте пункты с тем, что решили на этапе структуры. G65 проверяет, что цепочка показывает правильную последовательность перехода к текущему месту либо правильный путь по иерархии сайта.
  3. Проверьте, как сделана текущая страница. Процедура G65 описывает три случая. Цепочка не включает текущую страницу: все пункты - ссылки. Цепочка включает текущую страницу: все пункты, кроме неё, - ссылки, а она ссылкой не сделана. Текущая страница в цепочке ведёт себя как ссылка: все пункты - ссылки, и текущее место помечено программно, например атрибутом aria-current.
  4. Спросите, как помечена текущая страница в коде. Для варианта без ссылки MDN пишет, что aria-current необязателен.
  5. Пройдите по каждой ссылке цепочки. G65 проверяет, что все ссылки ведут на нужную страницу.
  6. Сравните цепочки на разных страницах. По G65 цепочка находится на одном и том же месте на каждой странице набора.
  7. Спросите, как сделан разделитель. MDN предупреждает, что стрелки из CSS передаются вспомогательным технологиям.
  8. Спросите, подписана ли навигация через aria-label. Этот атрибут назван в G65 и в MDN.
  9. Если на сайте есть разметка BreadcrumbList, попросите результат проверки. Google называет инструмент проверки расширенных результатов, Яндекс - валидатор в Вебмастере.

На главной странице BITSPARK шаг процесса «Запуск» описан так: «Проверяем desktop и mobile, скорость, формы и ключевые сценарии - затем запускаем.»

Источники

Дата обращения к страницам: 05.10.2026. Страницы W3C открыты в редакторской версии на w3c.github.io.

Обсудить проект в Telegram: t.me/billioniks

Читайте по теме

Все статьи раздела «Дизайн и элементы сайта» →