Хлебные крошки в поисковой выдаче Google

Сообщение # 1 | 23:10:57 17 Мар 2014

Хлебные крошки в поисковой выдаче Google:

Хлебные крошки представляют собой навигационную цепочку ссылок на вашем сайте, которые описывают структуру сайта и по которым пользователь ориентируется. Обычно навигационная цепочка располагается в верхней части сайта над всеми материалами и имеет следующий вид:

Главная страница → Раздел → Подраздел → Текущая страница

То есть, вы видите навигационную цепочку ссылок, начинающуюся от главной страницы сайта и продолжающаяся или кончающаяся на каком-либо разделе или материале. Чтобы возвратиться на предыдущий уровень этой навигации, достаточно кликнуть по нужной ссылке. Например, для перехода с текущего материала в категорию, в которой этот материал размещен, либо же на главную страницу сайта.
При определенном запросе на выдаче в поисковой системе Google у вашего сайта также отображается навигационная цепочка и имеет она вот такой вот вид:

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

От теории к практике:

В каждом шаблоне сайта уже имеется навигационная цепочка, которая выглядит следующим образом:

Код

<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$ - название категории

В принципе, думаю здесь все вполне понятно. Реализовать хлебные крошки можно двумя верными способами:

Разметка микроданных

Делается это следующим способом, находим в шаблоне код навигации:

Код

<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>

И заменяем его на другой код, где уже прописаны все необходимые свойства создающие хлебные крошки:

Код

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

Заметили, что у нас чуть-чуть прибавилось кода? Наверное следует немного пояснить что здесь к чему.
В данном способе создания хлебной навигации мы применили специальные свойства микроданных, которые определяют ту или иную часть навигационной цепочки и позволяют указать поисковой системе Google что у нас является названием элемента навигации, ее адрес ом и следующим элементом навигации в иерархии. Для начала мы прописали теги span, в которые разместили непосредственно каждый фрагмент навигации. На следующем этапе мы прописали для каждого тега span свойства, определяющие назначение того или иного элемента.

Свойства:
itemscope itemtype=http://data-vocabulary.org/Breadcrumb - сообщает, что элемент используется для навигации;
itemprop="title" - описывает название ссылки;
itemprop="url" - описывает адрес ссылки.

В общем, посмотрев на пример кода, вы без труда в нем разберетесь и поймете что к чему.

Разметка RDFa

Делается это следующим способом, находим в шаблоне код навигации:

Код

<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>

И заменяем его на другой код, где уже прописаны все необходимые свойства создающие хлебные крошки:

Код

<ahref="$HOME_PAGE_LINK$" rel="v:url" property="v:title">Главная</a> » <a href="$MODULE_URL$" rel="v:url" property="v:title">$MODULE_NAME$</a> » <a href="$SECTION_URL$" rel="v:url"property="v:title">$SECTION_NAME$</a> » <a href="$CAT_URL$"rel="v:url" property="v:title">$CAT_NAME$</a>

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

Свойства:
xmlns:v="http://rdf.data-vocabulary.org/#" - сообщает, что элемент используется для навигации;
typeof="v:Breadcrumb" - описывает элементы навигации;
property="v:title" - описывает название ссылки;
rel="v:url" - описывает адрес ссылки.

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

Прикрепления: 4717266.jpg (15.2 Kb) · 3672926.jpg (16.4 Kb)

Сообщение отредактировал webanet - Суббота, 10 Фев 2018, 19:09:33

Страница 1 из 2 1 2 »
Модератор форума: Yuri_G