Хлебные крошки vs теги — когда что использовать

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

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

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

Когда нужны крошки

Глубина вложенности больше двух уровней и пользователь часто поднимается вверх.
Карточки каталога и продуктов с несколькими точками входа.
Документация/справка, где важно понимание «раздел → тема → статья».

Когда нужны теги

Материалы «по проблеме»: кейсы, лонгриды, заметки, где есть пересечения.
Маркетинговые страницы с тематическими подборками («см. также по теме оплаты»).
Блог/новости, где фильтрация по датам не решает задачу поиска.

Дизайн и поведение

Крошки — это <nav aria-label=«Хлебные крошки»> с <ol> и <li>, разделители текстовые (›) или через CSS. Последний элемент не ссылка и помечен aria-current=«page». Теги — кликабельные чипы/ссылки, доступные с клавиатуры, с понятными названиями, ведущие на страницы-лендинги тегов с описанием.

Аналитика и SEO

Крошки сокращают время до «поднятия уровнем выше», улучшают глубину просмотра; теги увеличивают «горизонтальные» переходы. Мы отслеживаем клики по цепочке крошек, CTR тегов, отказы на страницах тегов и их вклад в конверсию. Страницы тегов наполняем лид-абзацем и тематическими блоками, а не оставляем «пустой список». Каноникал на теговых страницах указывает на сам тег, чтобы исключить дубли.

Анти-паттерны

Крошки, не соответствующие реальной иерархии (генерация по URL без учета IA).
Облако тегов на 50–100 меток без нормализации и модерации.
Ссылки-крошки, которые ведут в никуда или обновляют текущую страницу.
Теги, ведущие на пустые страницы без описания и фильтров.

Спецификация для дизайн-системы

Компонент «Breadcrumbs»: токены (цвет/размер/отступы), разделители, поведение на узких экранах (скрытие середины, горизонтальный скролл, меню «...»), локализация названий, микроразметка (если используете), фокус-стили. Компонент «Tags/Topics»: набор состояний (выбран/обычный/hover/disabled), страницы тегов с описанием, сортировка и пагинация. Метрики: клики, глубина, конверсия из теговых страниц.

Архитектура процесса

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

Критерии качества

Читаемость: заголовки, подводки и подписи понятны с первого экрана.
Предсказуемость: элементы ведут себя одинаково на всех страницах.
Фокус и доступность: клавиатурное управление, aria и корректные роли.
Скорость и стабильность: нет «прыжков» верстки, медиа оптимизированы.
Масштабируемость: решения легко переносить на новые разделы.

Что мы не делаем

Не рисуем эффекты ради эффектов, не прячем важные условия и не ставим визуал выше смысла. Стоимость и сроки рассчитываются индивидуально — уточняйте по контактам на сайте.