Хлебные крошки для SEO: навигация и разметка BreadcrumbList

Коротко

Хлебные крошки — строка ссылок, которая показывает путь к текущей странице: Главная › Каталог › Ноутбуки › Модель X. Они помогают пользователю подняться на уровень выше одним кликом, а поисковикам — понять иерархию сайта.

Для SEO нужны две вещи, совпадающие друг с другом:

• видимая цепочка на странице из обычных HTML-ссылок;
• микроразметка BreadcrumbList (обычно в JSON-LD), описывающая ту же цепочку.

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

Когда крошки полезны

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

На плоском сайте из нескольких страниц или на одностраничном лендинге пользы от крошек мало — там достаточно обычного меню.

Как их строить

Для каталогов

• Следуйте иерархии категорий, а не истории кликов пользователя.
• Если товар входит в несколько категорий, выберите одну основную и используйте ее везде: и в цепочке, и в разметке.
• Не включайте фильтры и сортировку: Ноутбуки › 16 ГБ RAM › По возрастанию цены — это шум и ссылки на неканонические URL.

Для блогов

• Лучше всего работает короткая цепочка: Главная › Блог › Раздел › Статья.
• Названия разделов должны совпадать с реальными страницами категорий, чтобы каждая ссылка вела на полезную страницу.

Общие правила

• Каждый элемент, кроме последнего, — ссылка на индексируемую каноническую страницу.
• Последний элемент — текущая страница, он может быть обычным текстом без ссылки.
• Размещайте цепочку в начале контента, над H1.
• Используйте элемент nav с доступной подписью, например aria-label="Breadcrumb".

Корректный пример BreadcrumbList

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Главная",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Блог",
      "item": "https://example.com/blog/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "SEO",
      "item": "https://example.com/blog/seo/"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "Цепочки редиректов"
    }
  ]
}

Разместите разметку в теге <script type="application/ld+json">. Главное:

• position начинается с 1 и растет на единицу без пропусков.
• item — абсолютный URL, совпадающий с canonical-адресом этой страницы.
• name совпадает с текстом, видимым в цепочке.
• У последнего элемента item можно не указывать — это текущая страница.

На мультиязычных сайтах цепочка и разметка должны использовать язык и URL текущей версии.

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

После публикации проверьте страницу в Google Rich Results Test и валидаторе Schema.org, а затем следите за отчетом «Строки навигации» в Search Console.