Хлебные крошки

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

Зачем они нужны

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

• Показывают положение. Человек видит не просто «страница про чанки», а «Этапы → Выбор инструментов → Чанки»: сразу понятно, что это часть большого раздела и что рядом есть другие такие же страницы.
• Дают выход на уровень выше. На внутреннюю страницу часто попадают прямо из поиска, минуя главную. Без крошек единственный способ осмотреться — искать нужный пункт в меню; с крошками уровень выше в одном щелчке.
• Попадают в поисковую выдачу. Если добавить микроразметку, поисковик показывает под заголовком не голый адрес eazy-logic.ru/manualy/hlebnye-kroshki/, а понятный путь «Easy Logic › Мануалы › Хлебные крошки».

Разметка: это список, а не строка текста

Самая частая ошибка — сверстать крошки обычным абзацем, поставив между ссылками слэши или стрелки. Выглядит похоже, а по смыслу это другое: путь — упорядоченный список, порядок пунктов в нём важен. Поэтому берём <ol> и оборачиваем его в <nav>: это навигация, и программа чтения экрана должна уметь назвать её отдельно.

<nav class="breadcrumbs" aria-label="Вы находитесь здесь">
  <ol class="breadcrumbs__list">
    <li class="breadcrumbs__item">
      <a class="breadcrumbs__link" href="/">Главная</a>
    </li>
    <li class="breadcrumbs__item">
      <a class="breadcrumbs__link" href="/manualy/">Мануалы</a>
    </li>
    <li class="breadcrumbs__item">
      <span class="breadcrumbs__current" aria-current="page">Хлебные крошки</span>
    </li>
  </ol>
</nav>

Три вещи в этой разметке стоят не для красоты.

Стили: уголок вместо символа

Разделитель рисуем псевдоэлементом ::before у каждого пункта, кроме первого. Сам уголок — это две границы квадратика 5×5, повёрнутые на 45 градусов. Так получается ровная «птичка» без картинки и без иконки в спрайте.

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;        /* на узком экране путь переносится на вторую строку */
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #5A6873;
}

/* Разделитель: две границы квадратика, повёрнутые на 45°.
   В разметке его нет — читать «слэш» диктору незачем. */
.breadcrumbs__item + .breadcrumbs__item::before {
  content: "";
  width: 5px;
  height: 5px;
  border-top: 1.5px solid #8A97A1;
  border-right: 1.5px solid #8A97A1;
  transform: rotate(45deg);
}

.breadcrumbs__link {
  color: #5A6873;
  text-decoration: none;
}

.breadcrumbs__link:hover {
  color: #1565D8;
  text-decoration: underline;
}

/* Текущая страница видна и без ссылки: цветом и насыщенностью */
.breadcrumbs__current {
  color: #2F3A42;
  font-weight: 500;
}

Два места, где крошки ломаются чаще всего, закрыты здесь заранее. flex-wrap: wrap разрешает пути перенестись на вторую строку: без него длинный путь на телефоне растягивает страницу вбок. А мелкий кегль взят намеренно — крошки служебная строка, спорить с заголовком ей не положено.

Микроразметка: путь для поисковика

Глазами путь виден, а поисковый робот видит набор ссылок и не знает, что это именно путь. Чтобы объяснить, рядом кладут те же данные в формате для машины. Формат, которым пользуется наш сайт, называется JSON-LD Данные о странице, записанные обычным JSON внутри тега script. На вид страницы не влияют: человек их не видит, читает только поисковый робот. .

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Главная",
      "item": "https://eazy-logic.ru/" },
    { "@type": "ListItem", "position": 2, "name": "Мануалы",
      "item": "https://eazy-logic.ru/manualy/" },
    { "@type": "ListItem", "position": 3, "name": "Хлебные крошки",
      "item": "https://eazy-logic.ru/manualy/hlebnye-kroshki/" }
  ]
}
</script>

Четыре правила, без которых разметку не примут.

1. position начинается с единицы и идёт без пропусков: 1, 2, 3.
2. item — полный адрес со https://, а не /manualy/. Робот читает страницу отдельно от сайта и достраивать короткий адрес не обязан.
3. name совпадает с тем, что человек видит на экране. Разные названия в разметке и на странице поисковик считает попыткой его обмануть и разметку просто не учитывает.
4. Порядок пунктов — от главной к текущей странице, тот же, что в видимых крошках.

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

Порядок действий

Всё вместе — четыре шага. Картинку можно увеличить щелчком: видно, что должно получиться на каждом.

1. Поставить разметку

   Блок <nav class="breadcrumbs"> идёт первым внутри шапки страницы, до заголовка <h1>. Последний пункт — не ссылка.

   Увеличить

2. Добавить стили

   Пять правил из блока выше. Проверять надо два состояния: обычное и наведение на ссылку — цвет должен меняться.

   Увеличить

3. Сузить окно до 320 пикселей

   Путь должен перенестись на вторую строку, а не растянуть страницу вбок. Это то место, где ошибка видна только в браузере: по коду она незаметна.

   Увеличить

4. Проверить микроразметку

   Вставить адрес страницы в валидатор. В ответе должен быть BreadcrumbList и три пункта в правильном порядке — без предупреждений.

   Увеличить

Те же крошки в Evolution CMS

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

<!-- было в статической вёрстке -->
<nav class="breadcrumbs" aria-label="Вы находитесь здесь">
  <ol class="breadcrumbs__list">
    ... двенадцать строк, свои на каждой странице ...
  </ol>
</nav>

<!-- стало в шаблоне MODX -->
[[Breadcrumbs]]

Сниппет Breadcrumbs в Evolution есть из коробки. У него есть параметры: показывать ли главную, показывать ли текущую страницу, чем разделять пункты. Имена параметров у разных версий немного отличаются, поэтому точный список смотрите в описании сниппета в админке — а проверим мы это на этапе натягивания вёрстки.

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

Частые ошибки

Пять поломок, которые встречаются чаще всего. Первые две — как раз те, с которых начинал я сам.