Программирование: формат микроданных для хлебных крошек

Микроданные HTML5, сделать хлебные крошки в сниппете

Сделать красивый сниппет с хлебными крошками можно не только с помощью формата RDFa, но и микроданных HTML-5. Трудно назвать какой-либо из этих способов предпочтительным, хотя на наш взгляд первый более удобен для верстки. На этом сайте для разметки крошек мы применяем микрокод RDF, а на другом - микроданные (microdata). Давайте на практическом примере разберемся, как можно использовать микроразметку для того, чтобы в расширенном сниппете поисковиков отобразить строку с хлебными крошками вместо URL.

Спецификация микроданных HTML5 представляет собой формат разметки страницы для описания некоторых типов данных, в том числе и хлебных крошек. Поддерживаемые типы данных приведены в специальном словаре, и каждый из них имеет ряд свойств. Например, свойствами события (event) являются место проведения, время проведения мероприятия, название и категория. К слову, мы применяем и микрокоды для событий в сниппете, как это выглядит - можно увидеть, набрав в поиске Гугла оператор site:com-seo.ru. Аналогично применяется и разметка для хлебных крошек (breadcrumb).

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

Перейдем от слов к делу. Предположим, что нам надо разметить путь от главной страницы сайта COM-SEO.RU до этой страницы - то есть, фактически продублировать "хлебные крошки", которые есть на этой странице в верхней оранжевой полоске. В данном случае путь будет такой:
- http://com-seo.ru/
- http://com-seo.ru/web-design-sozdanie-site-dizayn-razrabotka-besplatno.html
- http://com-seo.ru/samostoyatelnoe-sozdanie-site-free-razrabotka-saytov-besplatno.html

Как бы мы сделали обычные хлебные крошки, без применения микроданных? Очевидно, что HTML-код был бы примерно таким:

<a href="http://com-seo.ru/">ГЛАВНАЯ СТРАНИЦА</a> ►

<a href="http://com-seo.ru/web-design-sozdanie-site-dizayn-razrabotka-besplatno.html">ПЕРВЫЙ УРОВЕНЬ</a> ►

<a href="http://com-seo.ru/samostoyatelnoe-sozdanie-site-free-razrabotka-saytov-besplatno.html">ВТОРОЙ УРОВЕНЬ</a>

Разумеется, на практике анкоры к ссылкам надо ставить осмысленные, а не как в этом примере. А теперь переделаем эти крошки, используя разметку микроданными нашей строки дополнительного меню. Код HTML5 будет выглядеть вот так:

<div style="float:left;" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://com-seo.ru/" itemprop="url"><span itemprop="title">ГЛАВНАЯ СТРАНИЦА</span></a> ► </div>

<div style="float:left;" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://com-seo.ru/web-design-sozdanie-site-dizayn-razrabotka-besplatno.html" itemprop="url"><span itemprop="title">ПЕРВЫЙ УРОВЕНЬ</span></a> ► </div>

<div style="float:left;" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://com-seo.ru/samostoyatelnoe-sozdanie-site-free-razrabotka-saytov-besplatno.html" itemprop="url"><span itemprop="title">ВТОРОЙ УРОВЕНЬ</span></a></div>

Вот как это будет смотреться в сниппете Гугла:

.

Как видите, ничего сложного, все понятно и очевидно. Небольшое замечание по примеру: чтобы все ссылки в тегах DIV отображались на одной строке, указан стить style="float:left;". Конечно, это утяжеляет HTML-код, но что поделаешь, красота требует жертв.

Проверка результатов: правильно ли сделала микроразметка крошек?

Давайте проверим, понимают ли поисковые системы то, что мы сделали. Для этого обратимся к валидаторам микроразметок. Вот они:
- для Гугла: http://www.google.com/webmasters/tools/richsnippets;
- для Яндекса: http://webmaster.yandex.ru/microtest.xml.

Если валидаторы не находят ошибок в разметке хлебных крошек микроданными HTML5, это еще не гарантирует, что они будут отображаться в сниппете. Яндекс, к примеру, только декларирует, что он понимает микроразметку, но отображает ее лишь в исключительных случаях. С Гуглом проще, но и здесь имеется ряд ограничений на использование микроформатов и микроданных. Например, хлебные крошки не отображаются в сниппете Гугла, если длина строки получается очень большой. Но как бы то не было, проверить сделанную разметку стоит непременно. Если хотите сделать красивый сниппет с хлебными крошками - выбирайте либо микроформат RFDa, либо микроданные HTML5, и аккуратно повторите ХТМЛ-коды из примера на своем сайте. Удачи!