Микроразметка для uCoz: "хлебные крошки" в выдаче Google

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

Немного поясню, что означают все эти операторы:

$HOME_PAGE_LINK$ - выводит адрес главной страницы
$MODULE_URL$ - ссылка на главную страницу модуля
$MODULE_NAME$ - название модуля
$SECTION_URL$ - ссылка в раздел
$SECTION_NAME$ - название раздела
$CAT_URL$ - ссылка в категорию
$CAT_NAME$ - название категории

Существует несколько рабочих способов как разметить этот код, что бы поисковая система Google отображала в выдаче "хлебные крошки" с вашего сайта.

Способ 1. С помощью микроданных

Находим в своем шаблоне указанный выше код и заменяем его на уже размеченный специальной разметкой:

Выделить всё

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="$HOME_PAGE_LINK$" itemprop="url"><spanitemprop="title">Главная</span></a></span> » <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><ahref="$MODULE_URL$" itemprop="url"><span itemprop="title">$MODULE_NAME$</span></a></span> » <span itemscopeitemtype="http://data-vocabulary.org/Breadcrumb"><a href="$SECTION_URL$" itemprop="url"><spanitemprop="title">$SECTION_NAME$</span></a></span> » <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="$CAT_URL$" itemprop="url"><span itemprop="title">$CAT_NAME$</span></a></span>

Способ 2. С помощью разметки RDFa

Можно так же воспользоваться этим вариантом. Старый код заменяем на этот:

Выделить всё

<span xmlns:v="http://rdf.data-vocabulary.org/#"><span typeof="v:Breadcrumb"><a href="$HOME_PAGE_LINK$"rel="v:url" property="v:title">Главная</a></span> » <span typeof="v:Breadcrumb"><a href="$MODULE_URL$"rel="v:url" property="v:title">$MODULE_NAME$</a></span> » <span typeof="v:Breadcrumb"><a href="$SECTION_URL$"rel="v:url" property="v:title">$SECTION_NAME$</a></span> » <span typeof="v:Breadcrumb"><a href="$CAT_URL$"rel="v:url" property="v:title">$CAT_NAME$</a></span></span>

Способ 3. С помощью Schema.org

На данный момент эта разметка нормально не работает, но тем не менее она есть.

Выделить всё

<span itemscope itemtype="http://schema.org/WebPage"><span itemprop="breadcrumb"><ahref="$HOME_PAGE_LINK$">Главная</a> » <a href="$MODULE_URL$">$MODULE_NAME$</a> » <ahref="$SECTION_URL$">$SECTION_NAME$</a> » <a href="$CAT_URL$">$CAT_NAME$</a></span></span>

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

До:

После:

Заметьте, отображение хлебных крошек на странице результатов поиска Google начнет отображаться только через несколько дней после внедрения кода.

Хлебные крошки для модулей "Новости сайта" и "Блог"

Для модулей "Новости" и "Блог" хлебные крошки выглядят немного по другому:

Главная » 2013 » Сентябрь » 6 » Название новости

Вот стандартный код для этих модулей:

Выделить всё

<a href="$HOME_PAGE_LINK$">Главная</a> » $DATE_BAR$ » $ENTRY_NAME$

Находится он в "Управление дизайном" - "Новости сайта (Блог)" - "Страница материалов и комментариев к нему":

Отображение года, месяца и числа никакой пользы не приносит, поэтому я рекомендую его немного переделать вот так: Главная » Категория » Название новости

То есть, вместо даты выводим название категории:

Измененный код:

Выделить всё

<a href="$HOME_PAGE_LINK$">Главная</a> » <a href="$CAT_URL$">$CAT_NAME$</a> » $ENTRY_NAME$

А теперь внедряем в него микроразметку:

Выделить всё

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="$HOME_PAGE_LINK$" itemprop="url"><spanitemprop="title">Главная</span></a></span> » <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><ahref="$CAT_URL$" itemprop="url"><span itemprop="title">$CAT_NAME$</span></a></span> » <span itemscopeitemtype="http://data-vocabulary.org/Breadcrumb"><span itemprop="title">$ENTRY_NAME$</span></span>

И вставляем эту конструкцию в шаблон:

Сохраняемся. Готово.

Идем в инструмент проверки структурированных данных и смотрим на результат.

Было:

Стало:

Остается дождаться переиндексации страниц сайта Гуглом, как я уже писал выше - на это необходимо несколько дней.

Хлебные крошки для модуля Фотоальбом

Для модуля "Фотоальбом" стандартный код в "Странице с полной фотографией и комментариями" заменяем на этот:

Выделить всё

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="$HOME_PAGE_LINK$" itemprop="url"><spanitemprop="title">Главная</span></a></span> » <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><ahref="$MODULE_URL$" itemprop="url"><span itemprop="title">$MODULE_NAME$</span></a></span> » <span itemscopeitemtype="http://data-vocabulary.org/Breadcrumb"><a href="$SECTION_URL$" itemprop="url"><spanitemprop="title">$SECTION_NAME$</span></a></span> » <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="$CAT_URL$" itemprop="url"><span itemprop="title">$CAT_NAME$</span></a></span>» $PHOTO_NAME$

Скриншоты я делать не стал, думаю и так все понятно.

Теперь в выдаче Гугла ваш сайт будет отображаться чуть-чуть красивее)

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

Протестировать разметку и посмотреть, как размеченные "хлебные крошки" будут выглядеть в результатах поиска, можно с помощью инструмента проверки структурированных данных ->>http://www.google.com/webmasters/tools/richsnippets.

Больше информации по улучшению сниппетов можно найти в справке Google.

P.S.: для Яндекса такой функции пока нету, можно лишь воспользоваться их рекомендациями как достичь появления навигационных цепочек в сниппете.

Хлебные крошки для модулей: каталог статей/файлов/сайтов

Способ 1. С помощью микроданных

Способ 2. С помощью разметки RDFa

Способ 3. С помощью Schema.org

Хлебные крошки для модулей "Новости сайта" и "Блог"

Хлебные крошки для модуля Фотоальбом