Семантическая разметка хлебных крошек

Главная / Разработка / Семантическая разметка хлебных крошек
Пример сниппета
Семантическая разметка хлебных крошекtrafpartner.ru › Разработка › Семантическая разметка хлебных крошек
5 января 2012 г. - Cемантическая разметка строки навигации позволяет сделать данные более структурированным (для удобного извлечения и представления в результатах...

Хлебные крошки (breadcrumbs) - я то думал по детской ассоциации со сказкой Шарля Перро «Мальчик с пальчик», а интернет (в лице Яндекса и Гугла) поведал мне что название произошло благодаря немецкой сказке братьев Гримм «Ганзель и Грета». Хотя суть одна: чтобы найти дорогу из леса, дети оставляли следом за собой хлебные крошки, которые затем съели птицами.

Хлебные крошки, навигационная цепочка либо строка навигации - всё одно и тоже. Это последовательность логически связанных веб страниц. С одной стороны указывает их положение в иерархии сайта, с другой (на мой взгляд) позволяет достаточно наглядно понять, где искать статьи или материалы на аналогичную тему (сразу виден весь путь, где каждый пункт как бы обобщение от следующего).

Каждый пункт в этих самых хлебных крошках состоит, как правило, из краткого наименования и URL. До текущей страницы. Давать ссылку со страницы на саму себя как мне думается странно (исключением может быть какая-нибудь анимационная навигация или что то подобное).

Теперь разберём пошагово как же правильно использовать семантическую разметку хлебных крошек.

В первую очередь необходимо объявить о начале разметки и указать о чём она → HTML-код, в блоке <div> </div>, описывает BreadcrumbList от schema.org (названия типов имеют вид URL, следовательно: http://schema.org/BreadcrumbList ).

Указание схемы разметки:
<div itemscope itemtype = "http://schema.org/BreadcrumbList">

Указание типа элемента:
<span itemprop = "itemListElement" itemscope itemtype = "http://schema.org/ListItem">

Указание ссылки на страницу элемента:
<a itemprop = "item" href = "https://trafpartner.ru/">

Указание названия элемента:
<span itemprop = "name">Главная</span>

Указание номера элемента:
<meta itemprop = "position" itemprop = "1"/>

Указание разделителя элементов:
/

"Положение" свойство используется для восстановления порядка элементов в списке Breadcrumb.Конвенция является то, что список крошка имеет элемент списка орденом элемент списка порядке возрастания (более низкие значения указаны первыми), и что первые пункты в этом списке соответствуют «сверху» или в начале пройденного пути, например, с сайта или раздела домашнюю страницу. Конкретные значения 'положение' не назначается значение для списка Breadcrumb, но они должны быть целыми числами, например, начиная с "1" для первого элемента в списке.

Результат:


Весь код:
<div itemscope itemtype = "http://schema.org/BreadcrumbList">
<span itemprop = "itemListElement" itemscope itemtype = "http://schema.org/ListItem">
<a itemprop = "item" href = "https://trafpartner.ru/">
<span itemprop = "name">Главная</span>
</a>
<meta itemprop = "position" itemprop = "1"/>
</span>
/
<span itemprop = "itemListElement" itemscope itemtype = "http://schema.org/ListItem">
<a itemprop = "item" href = "https://trafpartner.ru/development/">
<span itemprop = "name">Разработка</span>
</a>
<meta itemprop = "position" itemprop = "2"/>
</span>
/
<span itemprop = "itemListElement" itemscope itemtype = "http://schema.org/ListItem">
<a itemprop = "item" href = "https://trafpartner.ru/development/semanticheskaja-razmetka-hlebnyh-kroshek">
<span itemprop = "name">Хлебные крошки</span>
</a>
<meta itemprop = "position" itemprop = "3"/>
</span>
</div>

СвойствоОписание
itemscopeОбласть содержащая описание.
itemtypeТип элемента. Ссылка на описание элемента (http://schema.org/BreadcrumbList).
itempropЗначение элемента ("itemListElement").

Разработка

Монеты

Арбитраж трафика

Блокнот

Статьи