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

Хлебные крошки (англ. Breadcrumbs) — это элемент навигации, который показывает путь от главной страницы сайта до той, на которой пользователь находится в данный момент. Этот путь представляет собой цепочку ссылок.

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

Для поисковых систем, таких как Google, важна не только видимая часть этого элемента, но и описывающие его структурированные данные. Именно для этого используется микроразметка BreadcrumbList. Она явно сообщает поисковому роботу Googlebot о иерархии страниц.

Зачем нужна разметка BreadcrumbList

Внедрение структурированных данных BreadcrumbList решает две ключевые задачи: улучшает представление сайта в поисковой выдаче и помогает поисковым системам лучше понять его структуру.

Улучшение сниппета в Google Поиске

Главное визуальное преимущество — замена стандартного URL в результатах поиска на аккуратную навигационную цепочку. Это делает сниппет более привлекательным и информативным для пользователя.

  • Без разметки: https://example.com/books/science-fiction/award-winners
  • С разметкой BreadcrumbList: example.com > Books > Science Fiction > Award Winners

Такой формат не только выглядит чище, но и сразу показывает пользователю, в каком разделе сайта находится страница. Это может значительно повысить кликабельность (CTR) сниппета и привести к появлению расширенных результатов (rich results).

Помощь в сканировании и индексации

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

Это позволяет поисковой системе более эффективно проводить сканирование и индексацию (crawling indexing) и точнее понимать контекст каждой отдельной страницы внутри общей структуры. Для крупных сайтов с тысячами страниц это критически важный аспект SEO. Вся официальная документация по этой и другим видам разметки находится на портале Google Search Central.

Синтаксис разметки: JSON-LD, Microdata, RDFa

Для описания хлебных крошек можно использовать три основных формата структурированных данных: JSON-LD, Microdata (микроданные) и RDFa. Рекомендуется использовать JSON-LD.

JSON-LD (рекомендуемый формат)

JSON-LD — это современный и наиболее предпочтительный для Google формат. Код размещается в теге <script> внутри <head> или <body> страницы и не смешивается с основным HTML-кодом, что делает его чище и проще в управлении.

Пример кода JSON-LD для BreadcrumbList:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Books",
    "item": "https://example.com/books"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "Science Fiction",
    "item": "https://example.com/books/science-fiction"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "Award Winners"
  }]
}
</script>

Обратите внимание: у последнего элемента (Award Winners) отсутствует свойство item, так как он представляет текущую страницу.

Microdata (микроданные)

Микроданные — это способ разметки, при котором атрибуты itemscope, itemtype и itemprop добавляются непосредственно в HTML-теги видимых элементов навигации. Этот метод считается более устаревшим и сложным в поддержке.

Пример с Microdata:

<ol>
    <li><a href="https://example.com/books" rel="nofollow">Books</a></li>
    <li><a href="https://example.com/books/science-fiction" rel="nofollow">Science Fiction</a></li>
    <li>Award Winners</li>
</ol>

Как видите, Microdata "загрязняет" HTML-код, делая его менее читаемым.

RDFa

RDFa (Resource Description Framework in Attributes) — еще одна альтернатива, схожая с микроданными. Атрибуты, такие как vocab, typeof и property, встраиваются в HTML. RDFa используется реже, чем JSON-LD и Microdata.

Пример с RDFa:

<ol>
    <li><a href="https://example.com/books" rel="nofollow">Books</a></li>
    <li><a href="https://example.com/books/science-fiction" rel="nofollow">Science Fiction</a></li>
    <li>Award Winners</li>
</ol>

Сравнительная таблица форматов

Критерий JSON-LD Microdata RDFa
Рекомендация Google Рекомендуется Поддерживается Поддерживается
Расположение Отдельно от HTML (в <script>) Внутри HTML-тегов Внутри HTML-тегов
Простота внедрения Высокая Средняя Низкая
Гибкость и поддержка Высокая Средняя Низкая

Основные свойства разметки BreadcrumbList

Для корректной работы разметки необходимо правильно использовать ее свойства, определенные в спецификации schema.org.

  • itemListElement: Это массив, который содержит все элементы навигационной цепочки. Каждый элемент в этом массиве является объектом типа ListItem.
  • ListItem: Представляет один элемент хлебной крошки в цепочке.
  • position: Обязательное свойство для каждого ListItem. Указывает порядковый номер элемента в цепочке. Нумерация начинается с 1. Значение должно быть целым числом (integer).
  • name: Текстовое название элемента, которое видит пользователь (анкор ссылки).
  • item: URL-адрес страницы, на которую ведет элемент. Это свойство обязательно для всех элементов, кроме последнего. Последний элемент, представляющий текущую страницу, может не содержать свойство item.

Внедрение и проверка разметки

Процесс внедрения BreadcrumbList зависит от вашей платформы, но финальный этап — валидация — является универсальным.

Способы внедрения

  1. С помощью плагинов для CMS. Для систем вроде WordPress популярные SEO-плагины (например, Yoast SEO, Rank Math) автоматически генерируют разметку BreadcrumbList на основе структуры вашего сайта.
  2. Ручное добавление кода. Если у вас сайт на чистом HTML или фреймворке, вы можете вручную добавить скрипт JSON-LD в шаблон страниц. Это обеспечивает максимальный контроль.
  3. Через Google Tag Manager. Можно внедрять JSON-LD динамически с помощью GTM. Этот способ удобен, если нет прямого доступа к коду сайта.
  4. Генерация с помощью JavaScript. Структурированные данные, которые генерируются на стороне клиента с помощью JavaScript, также успешно обрабатываются Google. Это является частью практик JavaScript SEO. Главное — убедиться, что Googlebot успевает отрендерить JS и увидеть разметку.

Инструменты для проверки

После внедрения разметки крайне важно убедиться, что она корректна и распознается Google.

  • Инструмент проверки расширенных результатов (Rich Results Test). Это основной инструмент для отладки. Он позволяет проверить URL одной страницы или вставить фрагмент кода и сразу увидеть, находит ли Google разметку и есть ли в ней ошибки.
  • Google Search Console. После того как Google просканирует сайт, в Search Console появится отчет о состоянии разметки. Ищите раздел "Навигационная цепочка" во вкладке "Улучшения". Здесь вы найдете информацию о страницах с ошибками и валидных страницах. Это ключевой инструмент для мониторинга и отладки (monitoring and debugging).

Распространенные ошибки при внедрении

На практике чаще всего возникают следующие ошибки в structured data для хлебных крошек:

  • Отсутствует первый элемент. Цепочка всегда должна начинаться с элемента position: 1, который обычно ведет на главную страницу.
  • Неверные URL в свойстве item. Все URL должны быть абсолютными (например, https://example.com/page), а не относительными (/page).
  • Пропущено свойство item у промежуточного элемента. Свойство item может отсутствовать только у последнего элемента в цепочке.
  • Последний элемент является ссылкой. Последняя "крошка" представляет текущую страницу, поэтому она не должна быть кликабельной и не должна иметь свойство item.
  • Цепочка в разметке не соответствует видимой. Структура в JSON-LD должна точно повторять то, что пользователь видит на странице.

Обнаружить и исправить типичные ошибки (common errors) и проблемы со структурированными данными (structured data issues) помогает Rich Results Test и отчеты в Google Search Console.

Заключение

Разметка BreadcrumbList — это фундаментальный элемент технического SEO. Она не требует больших усилий для внедрения, но приносит ощутимую пользу: улучшает внешний вид сайта в поисковой выдаче, повышает его кликабельность и помогает поисковым системам лучше понимать его структуру. Используйте рекомендованный формат JSON-LD и всегда проверяйте корректность внедрения с помощью инструментов Google.