Микроразметка хлебных крошек для google

Сегодняшняя статья будет посвящена микроразметке хлебных крошек под Google на основе микроданных http://data-vocabulary.org/.
Вопрос: зачем вообще нужна микроразметка для хлебных крошек?
Ответ: чтобы придать сниппету более красивый вид, информация будет выглядеть понятней и удобнее для пользователя, тем самым мы повысим конверсию. Рассмотрим на примере результата выдачи по запросу «микроразметка хлебных крошек»(рис. 1).

Как видно, сайты, которые я подчеркнул зеленой линией используют микроразметку строки навигации.

Как использовать микроданные и разметить хлебные крошки?

Предположим у нас такая цепочка :
Мебель — Корпусная мебель –тумбы
Во первых нужно обернуть каждый элемент цепочки навигации в блок( например div) с атрибутами itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”.
Itemscope означает, что данный блок описывает элемент.
Itemtype какого типа элемент(в нашем случае наш элемент для навигации)
Должна получиться обертка:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
</div>

Далее вставляем в обертку ссылку и добавляем атрибут itemprop= «url». Он указывает разметке, что это ссылка. И последний шаг для первого элемента хлебных крошек – добавляем блок внутрь ссылки с названием первого элемента. В этот блок добавляем атрибут itemprop= «title».
Получился первый элемент навигационной цепочки:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="www.вашсайт.ru/dresses" itemprop="url">
<span itemprop="title">Мебель</span>
</a>
</div>

Далее делаем по аналогии. В итог получаем полноценные хлебные крошки, с внедренными микроданными:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="www.вашсайт.ru/dresses" itemprop="url">
<span itemprop="title">Мебель</span>
</a> ->
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="www.вашсайт.ru/dresses" itemprop="url">
<span itemprop="title"> Корпусная мебель </span>
</a> ->
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="www.вашсайт.ru/dresses" itemprop="url">
<span itemprop="title">Тумбы</span>
</a> ->
</div>

После установки микроразметки проверяем в google валидаторе.

С оптимизацией цепочки навигации под гугл разобрались, кто не читал статью про то, как сделать кликабельный сниппет читаем тут.