В этой статье расскажем о навигации на сайте в виде хлебных крошек, и как внедрить в этот элемент микроразметку.
Что такое хлебные крошки?
Хлебные крошки – это последовательность ссылок, отражающая иерархию сайта и указывающая пользователю положение текущей страницы в структуре сайта. Как правило, этот блок располагается вверху страницы, но может быть и внизу.
Например, их часто используют в интернет-магазинах в виде:
Главная – Каталог – Смартфоны – Смартфоны Samsung – Смартфон Samsung Galaxy M20
В этом примере пользователь находится на странице конкретного товара, но всегда может перейти по активным ссылкам на один или несколько уровней иерархии вверх. Название взято из сказки братьев Гримм, где дети заблудились, поскольку птицы склевали хлебные крошки, которыми они размечали свой путь. Чтобы пользователи не заблудились на вашем сайте, и следует применять эту технологию.
Хлебные крошки не только удобны, но и помогают поисковой оптимизации сайта:
- позволяют улучшить поведенческие факторы, когда пользователь делает больше переходов внутри ресурса;
- способствуют правильной внутренней перелинковке сайта;
- улучшает представление сайта в поисковой выдаче.
Вот на последний пункт мы и обратим особое внимание в статье.
Зачем нужна разметка ХБ?
Чтобы помочь поисковым системам улучшить вид сайта в выдаче, а также понять структуру сайты и нужна разметка хлебных крошек. Она решает следующие задачи:
- в поисковой выдаче улучшается сниппет сайта, показывается не просто адрес страницы, а цепочка иерархических ссылок, что улучшает кликабельность;
- поисковая система правильно определяет иерархию ресурса и лучше понимает его структуру;
- ускоряется индексация сайта;
- предотвращается определение поисковиком страницы как спамной, так как часто слова в хлебных крошках совпадают с ключами, и робот может решить, что это просто перечисление ключей.
Google понимает несколько форматов микроразметки. Яндекс напрямую пока не поддерживает разметку хлебных крошек, но ее наличие все равно благотворно сказывается на ранжировании.
Как сделать микроразметку ХБ?
Существует три основных формата разметки:
- микроданные;
- RDFA;
- JSON-LD.
Широкое распространение получили первые два типа микроразметки. Рассмотрим, как их применить на практике.
Разметка с микроданными
При разметке с микроданными можно использовать словарь schema.org или Data Vocabulary. Рассмотрим пример с использованием более современного schema.org.
Возьмем такую «хлебную» цепочку:
Главная – Смартфоны Samsung – Samsung Galaxy M20
Вот как выглядит код хлебных крошек (breadcrumbs) на сайте examplеcrosh.com
|
1 2 3 4 5 6 7 8 9 10 11 |
<ol id="breadcrumbs"> <li> <a href="https://examplеcrosh.com/">Главная</a> </li> <li> <a href="https://examplеcrosh.com/samsung"> Смартфоны Samsung</a> </li> <li> <a href="https://examplеcrosh.com/samsung/m20"> Samsung Galaxy M20</a> </li> </ol> |
А дальше уже хлебные крошки с микроразметкой.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div itemscope="" itemtype="http://schema.org/BreadcrumbList" id="breadcrumbs"> <span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem"> <a rel="nofollow" itemprop="item" title="Главная" href="//examplеcrosh.com"> <span itemprop="name">Главная</span> <meta itemprop="position" content="1"> </a> </span> <span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem"> <a itemprop="item" title=" Смартфоны Samsung" href="//examplеcrosh.com/samsung"> <span itemprop="name"> Смартфоны Samsung</span> <meta itemprop="position" content="2"> </a> </span> <span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem"> <a itemprop="item" title="Samsung Galaxy M20" href="//examplеcrosh.com/samsung/m20"> <span itemprop="name">Samsung Galaxy M20</span> <meta itemprop="position" content="3"> </a> </span> </div> |
В первой строчке указываем поисковикам, что у нас разметка schema.org. Здесь:
- Itemscope — указывает на то, что блок задает элемент;
- Itemtype – тип элемента, здесь навигационный;
- BreadcrumbList – список пунктов в хлебных крошках.
Параметр itemprop, которому присваивается «itemListElement» означает, что перед нами пункт списка элементов.
Разметка с RDFA
Возьмем цепочку:
Главная – Смартфоны Samsung – Samsung Galaxy M20
Здесь разметка выглядит следующим образом.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div xmlns:v="http://rdf.data-vocabulary.org/#"> <span typeof="v:Breadcrumb"> <a href="http://examplеcrosh.com" rel="v:url" property="v:title">Главная </a> </span> <span typeof="v:Breadcrumb"> <a href="http://examplеcrosh.com/samsung" rel="v:url" property="v:title"> Смартфоны Samsung </a> </span> <span typeof="v:Breadcrumb"> <a href="http://examplеcrosh.com /samsung/m20" rel="v:url" property="v:title">Samsung Galaxy M20 </a> </span> </div> |
Здесь оформление еще проще и понятней, чем с микроданными:
- атрибут xmlns:v=»http://rdf.data-vocabulary.org/# дает понять поисковику, что он имеет дело с разметкой RDF;
- все пункты крошек заключены в тег span с атрибутом typeof=»v:Breadcrumb»;
- атрибут rel=»v:url» прописывает ссылку пункта;
- атрибут property=»v:title» прописывает наименование пункта.
Особенности микроразметки
Следует обязательно проверить микроразметку на правильность. Проверка производится на соответствующем сервисе Гугл:
https://search.google.com/structured-data/testing-tool
Здесь нужно вводить адреса всех страниц сайта, где есть хлебные крошки второго и всех последующих уровней иерархии.
Для использования разметки хлебных крошек в CMS можно использовать специальные плагины или написать самостоятельно соответствующую функцию. Например, для WordPress используют популярный плагин Breadcrumb NavXT. Такая функция есть также в пакете WordPress SEO by Yoast.
Микроразметка хлебных крошек – простой и эффективный механизм улучшения сайта. Затратив небольшие усилия можно получить красивый информативный сниппет и признание пользователей и поисковых машин.
Спасибо, забрал — внедрил
а не подскажите готовый валидный код для вордпресс?
Везде пишут как сделать ХБ с микроразметкой, а вот как внедрить микроразметку в уже готовые ХБ не подскажете?