Добавляем Microdata в модуль хлебных крошек (mod_breadcrumbs). «Хлебные крошки»: микроразметка и ее влияние на сниппеты страниц Хлебные крошки в сниппете яндекс
Микроразметка (Microdata) является стандартом семантической оптимизации и широко внедряется на сайты, поскольку позволяет увеличить CTR показатели страниц и положительно влияет на поисковую оптимизацию в целом. В данной статье мы рассмотрим пример внедрения микроразметки в стандартный модуль mod_breadcbrumbs
, который в русском пакете локализации Joomla называется "Навигатор сайта". Внедрение микро-раметки размечает хлебные крошки и в поисковой выдаче визуально это выглядит так:
Добавление микро-раметки позволяет пользователю видеть в поисковой выдаче иерархическую структуру страницы и перейти на другие уровни из цепочки навигации. Например, структура размеченной статьи в выдаче будет такой: “What We Do” > “Joomla”
. Соответственно, это позволит юзеру по клику вернуться на уровень категории “Joomla” или в категорию “What We Do”.
Для того, чтобы добавить микроразметку в модуль хлебных крошек, нам потребуется изменить всего 4 строчки кода. Прибегнем к излюбленному методу - переопределению разметки модуля на уровне шаблона сайта.
Ниже статьи прилагается файл с переопределением. Скачайте его и положите в папку:
Внимание! В вашем шаблоне уже может быть переопределен модуль mod_breadcrumb, если это так, то необходимо работать именно с ним
/templates/<название_вашего_шаблона>/html/
Файл default.php
должен находится в папке mod_breadcrumbs
, если таковой в директории html шаблона нет, следует ее создать.
В результате, должна получиться такая цепочка:
/templates/<название_вашего_шаблона>/html/mod_breadcrumbs/default.php
Для тех, кому интересно, можете внести изменения вручную:
В оригинальном файле default.php
модуля mod_breadcrumbs
найдите строчку:
Echo "
" . JText::_("MOD_BREADCRUMBS_HERE") . " ";
И замените ее на:
Echo "
";
найдите строки:
";
if (!empty($item->link))
{
echo "link . "">" . $item->name . "";
}
else
{
echo "" . $item->name . "";
} if (($key != $penult_item_key) || $show_last)
{
echo "" . $separator . "";
} echo "";
и замените их на:
// Render all but last item - along with separator
echo "
";
if (!empty($item->link))
{
echo "link . "">" . $item->name . "
";
}
else
{
echo "" . $item->name . " ";
} if (($key != $penult_item_key) || $show_last)
{
echo "" . $separator . "";
} echo "";
найдите строки:
";
echo "" . $item->name . "";
echo "";
и замените их на строки:
// Render last item if reqd.
echo "
";
echo "" . $item->name . "";
echo "
";
Готово. Сохраняйте переопределение и после переиндексации страниц поисковой системой увидите результат.
Он может быть обычным, включающим лишь название страницы, ее ссылку и краткое описание, или же расширенным за счет дополнительных элементов: фото, адреса, контактного телефона и т.п. С некоторых пор расширять сниппеты помогают и так называемые хлебные крошки
, впервые предложенные поисковой системой Google.
Что такое хлебные крошки?
Хлебные крошки, в основе которых лежит микроразметка от Google, это особый способ дополнении сниппета за счет навигационной цепочки, демонстрирующей место страницы в иерархии сайта. Фактически, хлебные крошки заменяют обычную ссылку в поиске названием разделов и подразделов, в которых находится веб-страница. Поисковик приводит следующий пример:
Как видно, детализация URL-адреса посредством хлебных крошек Arts› Books› Poetr
y
(рус.
– Искусство› Книги› Поэзия
) позволяет точно определить местоположение страницы в структуре веб-ресурса.
Причем здесь «хлеб» и «крошки»?
Все просто. Навигационная цепочка под названием «хлебные крошки» призвана отследить маршрут до конкретной страницы вдоль всей иерархии сайта. Похожим образом герои немецкой сказки «Гензель и Гретель» пытались отыскать путь домой из леса, используя предварительно рассыпанные хлебные крошки по маршруту своего путешествия. Отсюда и необычное словосочетание, которое позаимствовал .
Зачем нужны хлебные крошки?
Использование хлебных крошек может быть обусловлено несколькими причинами:
- расширенный за счет навигационной цепочки сниппет активнее привлекает внимание пользователя поисковой системы, повышая тем самым вероятность его перехода по ссылке;
- наличие хлебных крошек в поисковой выдаче уменьшает время на поиск необходимой информации из-за более осознанной навигации по сайту;
- дополненный навигационной цепочкой сниппет, по мнению отдельных оптимизаторов, повышает релевантность страницы в выдаче Google.
Эти факторы для многих веб-мастеров – веский аргумент в пользу внедрения пресловутых хлебных крошек в поисковую выдачу. О том, как это сделать, читайте в следующем параграфе.
Как самому внедрить хлебные крошки?
Во-первых, настроить хлебные крошки можно «вручную», самостоятельно внеся необходимые изменения в код сайта. Этот вариант предполагает использование микроразметки от Google, а именно: микроданных или RDFa. В случае с разметкой через микроданные
код навигационной цепочки может выглядеть так:
Давайте для начала разберемся — что это такое — хлебные крошки на сайте и зачем они нужны.
Первоначально хлебные крошки использовались для удобства навигации пользователей. По сути — это блок ссылок вверху страницы, отображающие иерархию сайта. Т.е. пользователь может вернуться, к примеру, на предыдущую страницу каталога в интернет-магазине.
Вот яркий пример:
Влияние хлебных крошек на SEO
Со временем SEO-оптимизаторы заметили, что данный блок ссылок положительно влияет на продвижение ресурса. И работает это вот почему:
1. Внутренняя перелинковка
По иерархии практически любого сайта — чем меньше уровень вложенности раздела — тем он важнее. Поэтому необходимо обеспечивать такую структуру сайта, чтобы ссылки с более глубоких страниц вели на менее глубокие. Проще объяснить на примере.
Как видно на изображении — каждый товар ссылается на категорию, а каждая категория ссылается на главную страницу сайта.
Такая перелинковка стала неким стандартом в области продвижения и поэтому ее даже начали использовать поисковые системы прям в собственной выдаче. Делается это при помощи микроразметки Schema, но об этом позже.
2. Поведенческие факторы
Несколько лет назад поисковые системы начали анализировать поведение пользователей на сайте и в зависимости от него — ставить страницы на ту или иную позицию по запросам. Как вы понимаете, один из из этих поведенческих факторов — количество внутренних переходов на сайте. Хлебные крошки в некоторых случаях могут серьезно улучшить этот показатель.
Микроразметка Schema для хлебных крошек
Микроразметка позволяет поисковым системам точнее определить хлебные крошки и даже бонусом добавить их в свою выдачу. Выглядеть это будет примерно так:
И если сами хлебные крошки чаще всего на сайтах установлены по умолчанию, то вот микроразметку чаще всего приходится добавлять вручную. Поэтому напишем небольшую инструкцию, как это реализовать.
Главная
Теперь рассмотрим, что это такое.
Первое, что нам необходимо сделать — это обернуть каждую ссылку в тег и в самом теге прописать
itemscope=»» itemprop=»itemListElement» itemtype=»http://schema.org/ListItem»
ССЫЛКА
Этот тег у нас остается по умолчанию. В нем мы говорим поисковикам — что вот это разметка schema и элемент этой разметки называется itemListElement. Данная конструкция используется во всех ссылках.
Главная
Соответственно, если бы у нас был второй уровень вложенности, надо было бы написать content=»2″.
«Руководитель проектов команды "Бизнес-Мотор", вебмастер, копирайтер.
Хлебные крошки полезны для пользователей и для поисковиков. Микроразметка легче ориентирует пользователя на сайте и используется поисковиками для формирования расширенного сниппета. Рассказываем, что к чему»
Даже весьма серьезные успехи в части повышения позиций могут быть нивелированы непривлекательными сниппетами с низким CTR. И напротив, интересный, мотивирующий сниппет может выделять сайт среди прочих даже в том случае, если он не находится на первых строках выдачи. Именно по этой причине любые возможности по расширению сниппета можно и нужно использовать максимально. Одна из таких — микроразметка «хлебных крошек», которая позволяет показывать в выдаче рубрику, к которой относится материал, в читабельном и понятном пользователю виде.
Что такое «хлебные крошки»?
«Хлебные крошки» (Breadcrumbs)
— это общепринятое название навигационной цепочки, которая отражает путь к данной странице сайта с учетом структуры категорий и подкатегорий. Выглядеть она может примерно следующим образом:
Для пользователя сайта «хлебные крошки» удобны тем, что позволяют быстро вернуться в рубрику или подрубрику, к которой относится материал, а также легко ориентироваться в структуре сайта. Но не менее велико значение навигационной цепочки для SEO, ведь именно ее можно оформить с помощью микроразметки с последующими изменениями в сниппете. О том, как это сделать, — читайте ниже.
Как выглядит расширенный сниппет?
Проиллюстрируем сниппет на примере конкретного сайта до и после применения микроразметки «хлебных крошек». Вот так выглядел типичный сниппет обзора книги в Google ранее:
А вот такая информация появилась в выдаче после того, как микроразметка была внедрена, а страница повторно проиндексировалась поисковой системой:
Как нетрудно заметить, в данном случае явное указание рубрики помогает пользователю быстро оценить жанровую принадлежность книги, а значит — получить больше информации о странице и сделать осмысленный выбор. В случае с интернет-магазинами это также помогает с первого взгляда определить рубрику каталога, к которой отнесен товар. В сочетании с семантическое оформление хлебных крошек позволяет получить максимально полный, насыщенный информацией сниппет товара, который наверняка не останется незамеченным пользователем.
Микроразметка «хлебных крошек» в Google и Яндекс
Стоит отметить, что расширенный сниппет в части навигационной цепочки в Google и Яндекс имеет определенные различия, которые следует учитывать. Так, в частности, если применение микроразметки «хлебных крошек» (при условии отсутствия ошибок) практически наверняка отразятся в выдаче Google, то в Яндексе этого гарантировать нельзя. В Яндекс.Вебмастере по этому поводу приводится следующее пояснение:
Для крупных сайтов, имеющих хорошо выраженную структуру, под сниппетом может показываться навигационная цепочка (ряд ссылок на разделы сайта, к которым относится найденная страница). Такая цепочка позволяет быстро оценить объем информации на сайте или тип контента, и при необходимости за один клик перейти в нужный раздел.
Само собой, оценка «выраженности структуры» остается на усмотрение алгоритмов Яндекса, так что сниппет в выдаче этой поисковой системы может и не измениться, несмотря на внедрение микроразметки.
Интересно и другое наблюдение
. В расширенный сниппет Google рубрикация подтягивается в строгом соответствии с навигационной цепочкой, размеченной на сайте. В то же время Яндекс «хлебные крошки» может вообще проигнорировать, а показать структуру согласно url-адреса (даже если в реальной размеченной навигационной цепочке больше или меньше уровней).
При всех особенностях расширенного сниппета для категорий Яндекс обеспечивает и дополнительные бонусы от его использования. Наименования рубрик в его выдаче являются кликабельными, т.е. пользователь может вместо конкретного товара или статьи перейти в интересующую его часть каталога и рубрику.
Как использовать микроразметку навигационной цепочки?
Существует несколько стандартов, которые позволяют выполнить микроразметку навигационной цепочки, и все они в равной степени поддерживаются как Яндексом, так и Google. В их числе — OpenGraph, RDF, Schema.org и microdata. Никаких существенных преимуществ у каждого из них нет, так что можно использовать тот, который понятнее администратору сайта или верстальщику.
В качестве примера приведем микроразметку «хлебных крошек» с помощью RDF-маркеров data-vocabulary.org. Для этого необходимо заключить всю навигационную цепочку в тэг
…
, после чего пометить каждый ее элемент в отдельности.
Сегодняшняя статья будет посвящена микроразметке хлебных крошек под Google на основе микроданных http://data-vocabulary.org/.
Вопрос
: зачем вообще нужна микроразметка для хлебных крошек?
Ответ
: чтобы придать сниппету более красивый вид, информация будет выглядеть понятней и удобнее для пользователя, тем самым мы повысим конверсию. Рассмотрим на примере результата выдачи по запросу «микроразметка хлебных крошек»(рис. 1).
рис.1 Выдача гугла(сайты, которые используют микроразметку цепочки навигации подчеркнуты зеленым)
Как видно, сайты, которые я подчеркнул зеленой линией используют микроразметку строки навигации.
Как использовать микроданные и разметить хлебные крошки?
Предположим у нас такая цепочка:
Мебель — Корпусная мебель –тумбы
Во первых нужно обернуть каждый элемент цепочки навигации в блок(например div) с атрибутами itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”.
Itemscope означает, что данный блок описывает элемент.
Itemtype какого типа элемент(в нашем случае наш элемент для навигации)
Должна получиться обертка:
Далее вставляем в обертку ссылку и добавляем атрибут itemprop= «url»
. Он указывает разметке, что это ссылка. И последний шаг для первого элемента хлебных крошек – добавляем блок внутрь ссылки с названием первого элемента. В этот блок добавляем атрибут itemprop= «title»
.
Получился первый элемент навигационной цепочки:
Мебель
Мебель
->
Корпусная мебель
->
Тумбы
->
После установки микроразметки проверяем в