Хлебные крошки: что это такое и как их внедрить

Что такое Breadcrumbs?

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

Способы внедрения хлебных крошек

С точки зрения внедрения у нас сейчас два варианта: видимый пользователям и вариант в коде. На деле оба нужно всегда внедрять вместе, а не по отдельности.

Видимый

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

Главная > Компьютеры > HP > Envy

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

Без этой функции навигация становится куда сложнее, а вероятность того, что пользователь уйдёт с сайта, куда выше.

Код

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

Ниже вы можете увидеть пример внедрения Breadcrumbs с помощью фрагмента скрипта JSON-LD.

<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": "Authors",
"item": "https://example.com/books/authors"
},{
"@type": "ListItem",
"position": 3,
"name": "Ann Leckie",
"item": "https://example.com/books/authors/annleckie"
},{
"@type": "ListItem",
"position": 4,
"name": "Ancillary Justice",
"item": "https://example.com/books/authors/ancillaryjustice"
}]
}
</script>

Код выше говорит нам, что книгу «Ancillary Justice» написала автор Ann Leckie и что это книга.

Books > Authors > Ann Leckie > Ancillary Justice

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

• ›Rank Math
• ›Yoast SEO

Проверка внедрения

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

Тем не менее в нашем распоряжении есть инструмент Google и расширение для Chrome, которые сильно облегчат жизнь.

Инструмент Google для структурированных данных:

С помощью инструмента Google мы можем проверить свои структурированные данные либо по URL, либо на уровне кода, если вставим фрагмент напрямую.

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

Если ввести URL, Google вернёт разбор со всеми структурированными данными, которые он обнаружил.

Пример разбора URL в инструменте Google для структурированных данных.

Если же мы хотим сначала протестировать код Breadcrumb на JSON-LD перед внедрением, можно воспользоваться инструментом «фрагмент кода», который даст такой результат:

Инструмент проверки фрагментов кода для структурированных данных.

Structured Data Testing Tool (расширение для Google Chrome)

Если вместо захода в инструмент Google мы хотим проверить структурированные данные Breadcrumb (и другие) прямо из браузера, можно использовать расширение «Structured Data Testing Tool», которое покажет все найденные структурированные данные, а также ошибки.

Расширение Chrome для проверки Structured Data на примере статьи SEO Alive.

Мониторинг хлебных крошек в Google Search Console

Наконец, когда внедрение и проверка сделаны, остаётся следить за активностью в Google Search Console, что позволит отслеживать её ежедневно и замечать любые аномалии.

Вид отчёта по хлебным крошкам в Search Console (запущен в сентябре 2019 года).

В завершение хотим спросить: какие ошибки вы чаще всего встречали при их внедрении?

Мы хотели бы собрать подборку и опубликовать её в этой статье, чтобы помочь другим SEO-специалистам.

Большое спасибо и не забудьте поделиться своими комментариями!

Источники

• ›Документация Google по Breadcrumbs