Open
Close

Микроразметка хлебных крошек ведется для всех записей. «Хлебные крошки»: микроразметка и ее влияние на сниппеты страниц

Breadcrumbs (хлебные крошки или навигационная цепочка) — элемент интерфейса сайта, основное назначение которого обозначить путь от главной страницы, туда, где находится на данный момент пользователь. Разумеется, делается это в первую очередь для удобства пребывания пользователя на сайте, облегчая тем самым понимание виртуальной структуры. Забота о комфорте пользователей одна из сокровенных миссий, заполняя сотни умов-юзабилистов: все хотят сделать интерфейс удобнее, и поисковые системы не стали исключением. Поговорим о микро-разметке навигационной цепочки для визуализации ссылки в поисковой выдаче Google.

Для наглядности приведем визуальные примеры выдачи поисковых результатов без микро-разметки, и с ней:

1. В первой записи ссылка под названием отображается обычным образом, и, как правило, не совсем читабельно для глаза рядового пользователя.
2. Во второй записи всё иначе, там не видна ссылка, но есть те самые хлебные крошки, которые отображают логическую структуру местоположения найденного элемента. Второй вариант выглядит более конструктивно, давайте посмотрим, как это дело запилить у себя на сайте.

Достигается сие чудо посредством использования микро-данных в навигационной цепочке. Давайте представим, у нас есть такая структура на сайте:
Главная – Операционные системы – FreeBSD

Каждый пункт имеет свой путь, и в навигационной цепочке присутствует как ссылка. Так же ссылка заключается в какой-либо тег, к примеру — div, тегу задается атрибуты:

Itemscope itemtype="http://data-vocabulary.org/Breadcrumb"

Получится блок для пункта:

...

В этот блок помещается ссылка и название элемента. Для ссылки, задается атрибут itemprop=”url”, название так же заключается в отдельный тег span, и задается атрибут itemprop=”title”. В итоге отдельный элемент в цепочке будет выгладить таким образом: