Хлебные крошки (breadcrumbs) — это элемент навигации, который показывает пользователю путь от главной страницы сайта до текущей. Они не только улучшают юзабилити и помогают посетителям ориентироваться на сайте, но и играют важную роль в поисковой оптимизации (SEO).
Содержание:
Микроразметка Schema.org позволяет «объяснить» поисковым системам структуру этих ссылок. В результате поисковики могут отображать хлебные крошки прямо в сниппете вашего сайта в выдаче, что делает его более заметным и повышает кликабельность (CTR). Это наглядный пример расширенного описания.
Ниже приведена пошаговая инструкция по внедрению микроразметки для хлебных крошек.
Пример реализации на сайте:
Реализация с помощью Microdata
Если вы предпочитаете встраивать данные напрямую в HTML-код, используйте следующий подход.
Шаг 1: Оборачиваем весь блок хлебных крошек
Весь навигационный путь нужно обернуть в контейнер (например, <nav> или `
`) и указать для него тип сущности `BreadcrumbList`.
Шаг 2: Размечаем каждую ссылку
Каждая ссылка (<a>) или текстовый элемент (`
`) внутри этого контейнера становится элементом списка `ListItem`.
Пример готового HTML-кода:
<ul itemscope itemtype=«https://schema.org/BreadcrumbList»><li itemprop=«itemListElement» itemscope itemtype=«https://schema.org/ListItem»><a href=«/» title=«Главная» itemprop=«item»><span itemprop=«name»>Главная</span><meta itemprop=«position» content=«0»></a></li><li itemprop=«itemListElement» itemscope itemtype=«https://schema.org/ListItem»><a href=«/blog/» title=«Блог» itemprop=«item»><span itemprop=«name»> Блог </span><meta itemprop=«position» content=«1»></a></li><li itemprop=«itemListElement» itemscope itemtype=«https://schema.org/ListItem»><a href=«/blog/kak-dobavit-mikrorazmetku-shema-org-v-hlebnye-kroshki/» title=«Как добавить микроразметку Shema.org в хлебные крошки?» itemprop=«item»><span itemprop=«name»> Как добавить микроразметку Shema.org в хлебные крошки?</span><meta itemprop=«position» content=«2»></a></li></ul>
Базовая структура JSON-LD
Для хлебных крошек используется тип сущности BreadcrumbList. Этот список состоит из нескольких элементов ListItem, каждый из которых имеет свою позицию (position), название (name) и URL (item).
Вот базовый шаблон кода на JSON-LD:
<script type=»application/ld+json»>
{
«@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/catalog»
},
{
«@type»: «ListItem»,
«position»: 3,
«name»: «Смартфоны»,
«item»: «https://example.com/catalog/smartphones»
}
]
}
</script>
Где разместить: Этот код необходимо вставить внутрь тегов <head> или <body> вашей HTML-страницы. Обычно его добавляют в секцию <head> для лучшей предсказуемости.
Важные рекомендации и проверка
Чтобы микроразметка работала корректно и не привела к ошибкам, следуйте этим правилам:
- Полная цепочка. Микроразметка должна описывать весь путь пользователя от главной страницы до текущей. Пропуск уровней (например, переход сразу от «Главная» к статье) является распространенной ошибкой.
- Точность данных. Значения свойств
nameиitemдолжны точно соответствовать видимому тексту и фактическому URL ссылки на странице. - Проверка в инструментах. После добавления разметки обязательно проверьте её.
- Используйте Инструмент проверки расширенных результатов от Google, чтобы убедиться, что ваш код валиден и будет правильно отображаться в поиске.
- Воспользуйтесь Валидатором микроразметки от Schema.org для общей проверки структуры данных.
Заключение
Добавление микроразметки Schema.org для хлебных крошек — это простая, но эффективная техническая задача по SEO. Она занимает немного времени, но способна значительно улучшить представление вашего сайта в поисковой выдаче, сделав его более привлекательным для пользователей и понятным для поисковых роботов. Для большинства современных сайтов оптимальным выбором будет реализация через JSON-LD.
