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

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

Правильная микроразметка для хлебных крошек

рис.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 валидаторе.

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

ПоделитьсяShare on Facebook1Share on VKShare on Google+0Tweet about this on TwitterShare on LinkedIn0Pin on Pinterest0
Tags:

1 комментарий

  • Алексей:

    В настоящий момент для микроразметки (не только хлебных крошек, коих там сразу 2 схемы есть, но ещё 8 типов данных) есть неплохой (я надеюсь, поскольку я автор) компонент в маркете — marketplace.1c-bitrix.ru/solutions/coffeediz.schema/
    Поддерживает 9 схем, позволяет скрытно от юзеров выводить разметку.
    Есть документация, репозиторий на GitHub и багтрекер.

    Ну и я, как автор, готов прислушаться к любым пожеланиям по улучшению.

Добавить комментарий