Разметка хлебных крошек Schema․org: улучшаем навигацию

Хлебные крошки – это навигационный элемент веб-сайта, который показывает пользователю его текущее местоположение в структуре сайта․ Они выглядят как цепочка ссылок, ведущих от главной страницы к текущей странице․ Правильно реализованные хлебные крошки значительно улучшают пользовательский опыт (UX) и поисковую оптимизацию (SEO)․ В этой статье мы подробно рассмотрим, как использовать разметку Schema․org для хлебных крошек, чтобы получить максимальную выгоду․

Зачем нужны хлебные крошки?

Хлебные крошки выполняют несколько важных функций:

  • Улучшение навигации: Пользователи могут легко понять, где они находятся на сайте, и быстро перейти на более высокие уровни иерархии․
  • Снижение показателя отказов: Предоставляя альтернативные пути навигации, хлебные крошки помогают удержать пользователей на сайте;
  • Улучшение SEO: Поисковые системы используют хлебные крошки для лучшего понимания структуры сайта и индексации страниц․ Разметка Schema․org помогает поисковикам правильно интерпретировать эти данные․
  • Улучшение пользовательского опыта: Хлебные крошки делают сайт более удобным и интуитивно понятным․

Что такое Schema․org?

Schema․org – это совместная инициатива Google, Bing, Yahoo! и Yandex по созданию стандартизированной схемы структурированных данных для веб-сайтов․ Использование Schema․org позволяет поисковым системам лучше понимать контент на ваших страницах и отображать его в более привлекательном и информативном виде в результатах поиска (SERP)․

Разметка хлебных крошек Schema․org

Для разметки хлебных крошек используется тип BreadcrumbList из словаря Schema․org․ Вот пример базовой разметки:


<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/product/"
 }
 ]
}
</script>

Разберем элементы разметки:

  • @context: Указывает на словарь Schema․org․
  • @type: Определяет тип разметки – BreadcrumbList․
  • itemListElement: Массив объектов ListItem, представляющих каждый элемент хлебных крошек․
  • @type (внутри ListItem): Определяет тип элемента списка – ListItem․
  • position: Позиция элемента в цепочке (начинается с 1)․
  • name: Текст, отображаемый для элемента хлебных крошек․
  • item: URL-адрес, на который ведет элемент хлебных крошек․

Рекомендации по реализации

  1. Соответствие визуальным хлебным крошкам: Разметка Schema․org должна точно соответствовать визуальным хлебным крошкам, отображаемым на странице․
  2. Использование абсолютных URL: Все URL-адреса в разметке должны быть абсолютными (например, https://example․com/catalog/)․
  3. Правильная последовательность: Элементы хлебных крошек должны быть расположены в правильной последовательности, от главной страницы к текущей․
  4. Размещение: Размещайте разметку Schema․org в разделе <head> или <body> страницы․ Рекомендуется размещать ее как можно ближе к визуальным хлебным крошкам․
  5. Тестирование: После реализации разметки обязательно протестируйте ее с помощью Google Rich Results Test, чтобы убедиться, что она валидна и правильно интерпретируется поисковыми системами․

Пример для категории товаров

Предположим, у вас есть страница категории товаров «Обувь» в каталоге «Одежда»․ Разметка Schema․org будет выглядеть следующим образом:


<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/clothing/"
 },
 {
 "@type": "ListItem",
 "position": 3,
 "name": "Обувь",
 "item": "https://example․com/clothing/shoes/"
 }
 ]
}
</script>

Разметка хлебных крошек Schema․org – это простой, но эффективный способ улучшить навигацию по вашему сайту, повысить его SEO-показатели и улучшить пользовательский опыт․ Следуя рекомендациям, описанным в этой статье, вы сможете правильно реализовать разметку и получить максимальную выгоду от ее использования․ Не забывайте тестировать свою разметку, чтобы убедиться в ее корректности и эффективности․