Материал подготовлен специалистами

Реализация хлебных крошек и сниппета

Хлебные крошки (Навигационная цепочка) получили свое название, поскольку показывают путь юзеру, который он проделал от Главной страницы сайта до той страницы (уровень вложенности вплоть до карточки товара) на которой сейчас находится. Выражение “Вернуться по хлебным крошкам” из старой сказки про Ганзеля и Гретель.

Обычно представляет собой полосу в верхней части программы примерно такого вида:

Главная страница → Раздел → Подраздел → Текущая страница

Все элементы, кроме последнего, обычно являются внутренними гиперссылками.


У нас есть 4 требования к хлебным крошкам

  1. Анкор главной страницы меняем с “Главная” на Тематичность конкретного ресурса.

Пример сайта по аренде квартир


  1. Необходимо выводить хлебные крошки по такой логике:

Страница, на которой мы находимся в данный момент, в крошках должна отображаться как некликабельный текст, стилями похожий на сами крошки. Это делается во избежании создания дополнительных циклических ссылок.


Например:

Мы на сайте бытовой техники, на странице стиральные машинки Indesit и крошки вверху выглядят так

Интернет-магазин бытовой техники>>>Крупная бытовая техника>>>Стиральные машинки>>>стиральные машинки Indesit

Так вот, если при нажатии на одну из предыдущих 3 крошек нас отправит на соответствующие страницы сайта, то крошка стиральные машинки Indesit является просто текстом, но не ссылкой.

И разумеется, если мы вернемся на страницу назад, то хлебная крошка “Стиральные машинки” соответственно станет некликабельным текстом.


 

Проверка происходит следующим образом:

      • Корректность формирования хлебных крошек ведущих на главную

 

Хлебная крошка указывающая на главную страницу, должна быть информативной, поэтому на проекте sitename.com необходимо заменить главную хлебную крошку



с 

Главная

на

Интернет магазин

 

      • Отображение пути пользователя

 

Хлебные крошки должны сопровождать юзера до последнего уровня вложенности в структуре сайта. Поэтому на проекте sitename.com необходимо

 

Реализовать хлебные крошки при зажатии страницы фильтра. При зажатии фильтра должен подтягиваться Н1 страницы в хлебные крошки:

 

Например: 

Для страницы sitename.com/kurtki-cvet-siniy хлебные крошки будут:

Интернет-магазин---Куртки-----Синие куртки

 

      • Разметка хлебных крошек 

Хлебные крошки должны быть размечены специальной разметкой Shema по примеру:

<script type="application/ld+json">

{

 "@context": "http://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>

 

      • Внедрение хлебных крошек для сниппета

 

В футере сайта необходимо разместить следующий код: 

 

<div xmlns:v="http://rdf.data-vocabulary.org/#">

<span typeof="v:Breadcrumb">

<a href="https://www.darwinglobal.de/✓ " rel="v:url" property="v:title">SEO Agentur Darwin Global</a> ›› </span>

<span typeof="v:Breadcrumb">

<a href="https://www.darwinglobal.de/#seo_agentur" rel="v:url" property="v:title">SEO Agentur Darwin Global</a>

</span>

</div>
Подписаться Подписаться Подписаться