Разметка «хлебных крошек» с помощью microdata :: Хранитель заметок

Опубликовано: 08.10.2017

«Хлебные крошки» (breadcrumbs) помогают пользователям ориентироваться в структуре сайта. Хотя, стоит заметить, что в современном дизайне их встречаешь всё реже и реже. Но сейчас они могут оказаться полезными не только пользователям, но и поисковикам.

Поисковики и сами прекрасно умеют определять структуру сайта. Google, например, может построить «крошки» от главной страницы сайта до целевой страницы из цепочки ссылок и вывести их в сниппете. Но, лучше всего «хлебные крошки» разметить с помощью microdata. В словаре Data-Vocabulary.org есть специальный тип для этого — Breadcrumb .

<div class="breadcrumbs"> <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://noteskeeper.ru" itemprop="url"> <span itemprop="title">Свежие заметки</span> </a> &#8250; <span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://noteskeeper.ru/topic/markup/" itemprop="url"> <span itemprop="title">Вёрстка</span> </a> &#8250; <span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://noteskeeper.ru/527/" itemprop="url"> <span itemprop="title">Вёрстка независимыми блоками</span> </a> </span> </span> </span> </div>

В примере видно, что под ссылкой на целевую страницу есть ещё две ссылки: на корень сайта, и на страницу категории статьи. Таких промежуточных ссылок может быть больше.

Формат разметки, возможно, ещё будет меняться. На текущий момент, все объекты типа Breadcrumb неявно связываются между собой. Последовательность в цепочке определяется их последовательностью в документе. Для явного связывания объектов есть поле child. В этом случае объекты должны быть вложены друг в друга (как в моём примере).

Казалось бы, с разметкой хлебных крошек в виде неупорядоченного списка можно было распрощаться. Однако я нашёл способ, как создать требуемую связанную структуру. На помощь приходит свойство itemref .