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

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

Читатель может открыть материал из поисковой выдачи, рассылки или внешней ссылки. Адрес в строке браузера редко объясняет, где статья находится в каталоге: /materials/typography/reading понятен не всем, а длинный путь с техническими идентификаторами не помогает вовсе. Цепочка вроде «Главная → База знаний → Типографика → Чтение текста» даёт контекст и позволяет перейти к родительским разделам.

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

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

До выбора разделителей и размера текста проверьте, к какой рубрике относится материал и какие страницы действительно являются его родителями. Для статьи о настройке веб-шрифта путь может быть таким: «Главная → Руководства → Веб-типографика → Как настроить загрузку шрифта». Каждый промежуточный пункт должен вести на страницу, которая помогает продолжить поиск, а не быть декоративной подписью.

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

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

Для каждого уровня задайте три вещи: название, целевой адрес и владельца. Короткая «Типографика» понятнее внутреннего названия рубрики «Продукт / Контент / Направление 03». Если раздел переименовали, проверьте не только подпись, но и доступность адреса. Ссылка на архив без материалов или на пустую страницу превращает полезный маршрут в тупик.

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

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

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

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

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

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

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

Рекомендации W3C WAI описывают крошки как список ссылок на родительские страницы в иерархическом порядке. Навигационную область следует обозначить как nav и дать ей понятное имя, особенно если на странице есть и другие навигационные области: например, основное меню и оглавление статьи. В шаблоне это может выглядеть так: <nav aria-label="Хлебные крошки"> с упорядоченным списком разделов внутри.

Каждый родительский пункт — обычная ссылка с понятным текстом, а последний пункт обозначает текущую страницу. Для его текущего состояния можно применить aria-current="page". Текст ссылки уже должен объяснять назначение; не добавляйте одинаковый скрытый текст к каждой крошке. Дополнительные ARIA-роли и сценарии управления клавиатурой не нужны для простой цепочки ссылок: стандартные HTML-элементы дают ожидаемое поведение.

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

Если на сайте уже используется Schema.org, для цепочки можно сформировать BreadcrumbList с элементами ListItem, позицией, названием и адресом соответствующей страницы. Это описание должно соответствовать тому, что человек видит в самой навигации: нельзя поместить в разметку скрытые категории или выдуманные уровни только ради поисковой системы.

Документация Google Search Central указывает, что для поддержки хлебных крошек в поиске список должен содержать как минимум два элемента и рекомендует проверять разметку инструментом Rich Results Test. При этом корректный JSON-LD не гарантирует особого отображения: Google прямо предупреждает, что не обещает показывать расширенный результат в каждом случае. Поэтому сначала сделайте цепочку полезной на странице, а разметку рассматривайте как дополнительное описание её структуры.

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

Представьте блог о создании шрифтов. Статья о проверке кириллицы размещена в рубрике «Практика», подразделе «Веб-типографика». На странице видны пункты «Главная», «Практика», «Веб-типографика» как ссылки и название статьи как текущая позиция. Оглавление ниже H1 показывает другие вещи: «Набор знаков», «Проверка в браузере», «Типичные ошибки». Это два разных списка с разными целями.

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

Пройдите по списку на готовой странице, а не только в макете:

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

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

**Делать всю цепочку одной ссылкой или набором одинаковых ярлыков.** Ссылка «Главная / Блог / Статья» не даёт отдельного перехода к рубрике. Каждый пункт-предок должен быть самостоятельной ссылкой с точным адресом и ясным названием.

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

**Считать микроразметку гарантией SEO-результата.** Разметка помогает описать структуру, но не обещает конкретный вид сниппета или рост позиций. Не подменяйте ею видимую навигацию и не добавляйте элементы, которых нет на странице.

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

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

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

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

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

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

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

Полезные хлебные крошки опираются на понятную редакционную структуру, ведут по рабочим ссылкам и не спорят с оглавлением статьи. Проверьте путь, семантику, подписи, мобильное отображение и согласованность с JSON-LD — тогда и посетитель, и поисковая система получат точное описание места страницы. Если статья рассказывает о вашем собственном шрифте, создайте его для цифровых материалов в Fontgenerator и покажите читателю в подходящем контексте.