Главное меню

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

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

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

Для сайтов на uCoz хлебные крошки обычно располагаются над заголовком статьи и имеют следующий вид и порядок: Главная » Модуль » Раздел » Категория

Сейчас я предлагаю сделать так, что бы эти цепочки ссылок отображались не только у вас на сайте, но и в сниппете - на странице результатов поиска в Google. К тому же по-умолчанию на uCoz есть лишний элемент, который дублирует главную страницу сайта (главная страница модуля). От нее я тоже избавлюсь...

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

Итак, за основу будем брать стандартный код вывода навигационной цепочки, так называемых "хлебных крошек", который одинаковый для модулей Каталог статей, Каталог файлов, Каталог сайтов и находится в шаблоне "Страница материала и комментариев к нему":

Код
<a href="$HOME_PAGE_LINK$">Главная</a> » <a href="$MODULE_URL$">$MODULE_NAME$</a> » <a href="$SECTION_URL$">$SECTION_NAME$</a> » <a href="$CAT_URL$">$CAT_NAME$</a>

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

  • $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"><span itemprop="title">Главная</span></a></span> » <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="$MODULE_URL$" itemprop="url"><span itemprop="title">$MODULE_NAME$</span></a></span> » <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="$SECTION_URL$" itemprop="url"><span itemprop="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"><a href="$HOME_PAGE_LINK$">Главная</a> » <a href="$MODULE_URL$">$MODULE_NAME$</a> » <a href="$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"><span itemprop="title">Главная</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> » <span itemscope itemtype="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"><span itemprop="title">Главная</span></a></span> » <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="$MODULE_URL$" itemprop="url"><span itemprop="title">$MODULE_NAME$</span></a></span> » <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="$SECTION_URL$" itemprop="url"><span itemprop="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.: для Яндекса такой функции пока нету, можно лишь воспользоваться их рекомендациями как достичь появления навигационных цепочек в сниппете.

Надеюсь, объяснил понятно. Как обычно - ваши комменты, лайки, отметки "Мне нравится", розшарки поста по соц. сетям являются отличной благодарностью за мои старания. Ну и не забываем присоединяться к моим профилям в социальных сетях: ВК, Twitter, FaceBook, Google+. У меня будет еще много интересного!

  • Обновлено:
    2013-09-09
  • Автор:
  • Оцените статью:
    9.8/10 из 100

avatar

Комментариев:8

нет аватара
8 uid Константин Владыкин • 15:54, 2016-03-26


Как поправить в таком случае?
Аватар Freddie
7 uid Миша • 16:19, 2016-02-27
скажите пожалуйста, что нужно прописать и где, чтобы звёздочки рейтинга новости в выдаче были:
нет аватара
5 uid Trasher Trasher • 05:47, 2015-04-26
Вписал код в каталог статей, проверяю, выдаёт ошибку! Вот скрин:
В чём может быть причина, что не так?
uGuide.ru: Добавьте к урлу атрибут <a href="$CAT_URL$" itemprop="url">
Аватар akula-z
4 uid akula-z • 18:45, 2015-04-21
Добрый вечер.
Скажите, пожалуйста, как изменить названия в этих хлебных крошках на свои? Например, по-умолчанию в Юкозе написано так: Главная - Каталог Файлов - Название раздела.
Скажите, как изменить надпись Каталог файлов в этой цепочке на свою?
uGuide.ru: Вместо старых хлебных крошек добавьте этот код:

Аватар MaxxBr
6 uid Максим • 11:27, 2015-11-20
Добрый день, вставил этот код, но всё равно 1 ошибка, отсутствует урл $ENTRY_TITLE$, как можно прописать без ошибок?
Аватар Sashalife
3 uid Aleksandr Neznaykin • 23:32, 2015-04-01
Прошу прощения всё работает! Поковырялся в коде и обнаружил что не закрыл один из тегов smile ..
Аватар Skyer
2 uid Кирилл • 01:05, 2015-03-13
Всё чётко, спасибо.=)
нет аватара
1 uid Nazim Nazim • 22:10, 2014-10-11
Еще бы такой подробный урок про микроразметку, только всей страницы было бы круто
Добавить комментарий