Хлебные крошки от Google: что, зачем и как? Микроразметка хлебных крошек для google Семантическая разметка хлебных крошек модуль menu breadcrumb.

Микроразметка (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 "
    • ";

    Готово. Сохраняйте переопределение и после переиндексации страниц поисковой системой увидите результат.

    Breadcrumbs (хлебные крошки или навигационная цепочка) — элемент интерфейса сайта, основное назначение которого обозначить путь от главной страницы, туда, где находится на данный момент пользователь. Разумеется, делается это в первую очередь для удобства пребывания пользователя на сайте, облегчая тем самым понимание виртуальной структуры. Забота о комфорте пользователей одна из сокровенных миссий, заполняя сотни умов-юзабилистов: все хотят сделать интерфейс удобнее, и поисковые системы не стали исключением. Поговорим о микро-разметке навигационной цепочки для визуализации ссылки в поисковой выдаче Google.

    Для наглядности приведем визуальные примеры выдачи поисковых результатов без микро-разметки, и с ней:

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

    Достигается сие чудо посредством использования микро-данных в навигационной цепочке. Давайте представим, у нас есть такая структура на сайте:
    Главная – Операционные системы – FreeBSD

    Каждый пункт имеет свой путь, и в навигационной цепочке присутствует как ссылка. Так же ссылка заключается в какой-либо тег, к примеру — div, тегу задается атрибуты:

    Itemscope itemtype="http://data-vocabulary.org/Breadcrumb"

    Получится блок для пункта:

    ...

    В этот блок помещается ссылка и название элемента. Для ссылки, задается атрибут itemprop=”url”, название так же заключается в отдельный тег span, и задается атрибут itemprop=”title”. В итоге отдельный элемент в цепочке будет выгладить таким образом:

    Операционные системы
    FreeBSD

    Вот и всё, мы сделали микро-разметку навигационной цепочки понятной для Google. В свою очередь, если всё сделано правильно, поисковая машина сможет считать данные. Проверить правильность микро-разметки можно в валидаторе Google . Если всё сделано правильно, то показ ссылки в поисковой выдаче будет заменен на структурированную разметку.

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

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

    Микроразметка хлебных крошек

    Ну, это классика жанра, которая в обязательном порядке должна присутствовать на каждом сайте. Например, для страницы она имеет следующий вид:

    //1 уровень: главная страница

    SEO блог Пинго

    //2 уровень: категория

    Новичкам

    //3 уровень: конечный материал
    Типы поисковых запросов

    Итак, что мы тут видим? Во-первых, каждый уровень хлебных крошек является обособленным элементом, уровнем, а роль тут играет лишь их порядок. Во-вторых, каждый элемент (за исключением последнего) имеет тройную вложенность:

    1. Объявление элемента: itemscope itemtype="http://data-vocabulary.org/Breadcrumb"
    2. Определение значения атрибута ссылки: itemprop="url"
    3. Определение значения атрибута имени: itemprop="title"

    У последнего элемента также может быть атрибут url, но на мой взгляд он не нужен - зачем странице указывать на саму себя в навигационной цепочке?

    Атрибуты могут использоваться в связке с любыми тегами - важен лишь порядок и уровень вложенности. Например:



    Новичкам


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

    Микроразметка статьи

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


    //Объявляем название элемента

    //Определение атрибута «Дата публикации»

    Конкурентность поисковых запросов


    //Определение атрибута «Имя публикации»
    Содержимое статьи. //Определение атрибута «Содержимое статьи»


    Средняя арифметическая оценка
    Максимальное значение оценки
    Минимальное значение оценки
    Количество оценок


    Тут всё тоже самое, что и для хлебных крошек, кроме следующего:

    • Атрибут «Дата публикации» должен быть указан в формате ISO-8601 вида YYYY-MM-DDTHH:MM, где T - просто символ, YYYY - год, MM - месяц, DD - дата, HH - час, а MM - минута.
    • При определении атрибута «Категория публикации» и «Имя публикации» совершенно не страшно, что в область значения попадает также и ссылка - робот вытянет лишь соответствующие ожидаемому для атрибута значения данные.

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

    Микроразмета товара (продукта или услуги)

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

    //Объявляем элемент

    Розовый слон

    //Определяем наименование товара или услуги
    Хороший слон. //Определяем описание товара или услуги


    //Объявляем подтип «Предложение»
    //Определяем стоимость товара или услуги
    //Указываем валюту цены товара или услуги


    Средняя арифметическая оценка
    Максимальное значение оценки
    Минимальное значение оценки
    Количество оценок


    Тоже самое - поисковый робот сразу видит, что и где располагается на странице и для чего она вообще нужна. Визуальным результатом может стать рост привлекательности сниппета в SERP.


    «Руководитель проектов команды "Бизнес-Мотор", вебмастер, копирайтер.
    Хлебные крошки полезны для пользователей и для поисковиков. Микроразметка легче ориентирует пользователя на сайте и используется поисковиками для формирования расширенного сниппета. Рассказываем, что к чему»

    Даже весьма серьезные успехи в части повышения позиций могут быть нивелированы непривлекательными сниппетами с низким CTR. И напротив, интересный, мотивирующий сниппет может выделять сайт среди прочих даже в том случае, если он не находится на первых строках выдачи. Именно по этой причине любые возможности по расширению сниппета можно и нужно использовать максимально. Одна из таких — микроразметка «хлебных крошек», которая позволяет показывать в выдаче рубрику, к которой относится материал, в читабельном и понятном пользователю виде.

    Что такое «хлебные крошки»?

    «Хлебные крошки» (Breadcrumbs) — это общепринятое название навигационной цепочки, которая отражает путь к данной странице сайта с учетом структуры категорий и подкатегорий. Выглядеть она может примерно следующим образом:

    Для пользователя сайта «хлебные крошки» удобны тем, что позволяют быстро вернуться в рубрику или подрубрику, к которой относится материал, а также легко ориентироваться в структуре сайта. Но не менее велико значение навигационной цепочки для SEO, ведь именно ее можно оформить с помощью микроразметки с последующими изменениями в сниппете. О том, как это сделать, — читайте ниже.

    Как выглядит расширенный сниппет?

    Проиллюстрируем сниппет на примере конкретного сайта до и после применения микроразметки «хлебных крошек». Вот так выглядел типичный сниппет обзора книги в Google ранее:

    А вот такая информация появилась в выдаче после того, как микроразметка была внедрена, а страница повторно проиндексировалась поисковой системой:

    Как нетрудно заметить, в данном случае явное указание рубрики помогает пользователю быстро оценить жанровую принадлежность книги, а значит — получить больше информации о странице и сделать осмысленный выбор. В случае с интернет-магазинами это также помогает с первого взгляда определить рубрику каталога, к которой отнесен товар. В сочетании с семантическое оформление хлебных крошек позволяет получить максимально полный, насыщенный информацией сниппет товара, который наверняка не останется незамеченным пользователем.

    Микроразметка «хлебных крошек» в Google и Яндекс

    Стоит отметить, что расширенный сниппет в части навигационной цепочки в Google и Яндекс имеет определенные различия, которые следует учитывать. Так, в частности, если применение микроразметки «хлебных крошек» (при условии отсутствия ошибок) практически наверняка отразятся в выдаче Google, то в Яндексе этого гарантировать нельзя. В Яндекс.Вебмастере по этому поводу приводится следующее пояснение:

    Для крупных сайтов, имеющих хорошо выраженную структуру, под сниппетом может показываться навигационная цепочка (ряд ссылок на разделы сайта, к которым относится найденная страница). Такая цепочка позволяет быстро оценить объем информации на сайте или тип контента, и при необходимости за один клик перейти в нужный раздел.

    Само собой, оценка «выраженности структуры» остается на усмотрение алгоритмов Яндекса, так что сниппет в выдаче этой поисковой системы может и не измениться, несмотря на внедрение микроразметки.

    Интересно и другое наблюдение . В расширенный сниппет Google рубрикация подтягивается в строгом соответствии с навигационной цепочкой, размеченной на сайте. В то же время Яндекс «хлебные крошки» может вообще проигнорировать, а показать структуру согласно url-адреса (даже если в реальной размеченной навигационной цепочке больше или меньше уровней).

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

    Как использовать микроразметку навигационной цепочки?

    Существует несколько стандартов, которые позволяют выполнить микроразметку навигационной цепочки, и все они в равной степени поддерживаются как Яндексом, так и Google. В их числе — OpenGraph, RDF, Schema.org и microdata. Никаких существенных преимуществ у каждого из них нет, так что можно использовать тот, который понятнее администратору сайта или верстальщику.

    В качестве примера приведем микроразметку «хлебных крошек» с помощью RDF-маркеров data-vocabulary.org. Для этого необходимо заключить всю навигационную цепочку в тэг

    …
    , после чего пометить каждый ее элемент в отдельности.

    В Google Search Console – есть пункт «Структурированные данные».

    Рис 1 – ошибки в микроразметке

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

    Рис 2 – ошибки микроразметки Hentry

    В нашем случае мы видим, что имеются 106 ошибок, которые относятся к разметке формата hentry (microformats.org)

    – микроразметка, встроенная в ядро WordPress. Так как она встраивается автоматически и не адаптирована под сторонние шаблоны - чаще всего работает неправильно, и это приводит к тому, что Google Search Console обнаруживает такие ошибки:

    Рис 2.1 – ошибки Hentry: author, entry-title, updated

    Но, при этом инструмент для проверки микроразметки от Google – абсолютно спокойно сообщает, что нет никаких ошибок и никаких предупреждений по этому поводу.()


    Рис 3 – гугл не видит ошибок hentry

    На нашем сайте мы будем использовать признанную всеми поисковыми системами единогласно микроразметку – schema.org .

    Этот стандарт поддерживает как Яндекс , так и Google .

    Поэтому, встроенную микроразметку hentry, которая в Google Search Console выдает нам 106 ошибок – необходимо просто удалить.

    Так как hentry добавляется в ядро wordpress -,что позволяет удалить ее через фильтры, потому как в шаблонах этих классов не видно.

    Исходный код для удаления hentry:

    Add_filter("post_class", "fc_remove_hentry", 20); function fc_remove_hentry($classes) { if (($key = array_search("hentry", $classes)) !== false) { unset($classes[$key]); } return $classes; }

    Код необходимо добавить в functions.php

    Это можно сделать любым удобным методом, например, через редактор из админ панели сайта.


    Рис 4 – удаление разметки hentry со всего сайта

    После сохранение файла и повторной валидации страницы через инструмент для проверки микроразметки от Google – hentry должна будет пропасть.

    Проверьте несколько страниц, которые имели ошибки, чтобы убедится, что hentry полностью удалена с сайта.

    В Google Search Console вы увидите положительную динамику уменьшения количества ошибок. С течением времени они исчезнут вовсе, остается только ждать.

    Рис 5 – положительная динамика уменьшения ошибок hentry

    Как удалить ошибку:

    ОШИБКА: поле http://ogp.me/ns#image отсутствует или пусто


    Рис 6 – ошибка Open Graph ns#image

    Нужно понимать, что такого рода ошибки связаны с уже прописанной микроразметкой. То есть на сайте либо встроена, либо добавлена кем-то ранее микроразметка, которая имеет ошибки.

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

    В нашем случае на сайте присутствует плагин - SEO Ultimate, который имеет специальный раздел, отвечающий за разметку Open Graph. А это значит, что ошибка связанная с http://ogp.me содержится именно в плагине SEO Ultimate.

    Заходим по следующему пути SEO Ultimate -> Open Graph -> Default Values -> Default Image

    Находим настройку картинки, которая будет применяться по умолчанию на тех страницах сайта, на которых не будет найдено нужной картинки.


    Рис 7 – как исправить ошибку Open Graph ns#image

    Добавляем URL адрес картинки, которую бы мы хотели видеть по умолчанию. Напомню что The Open Graph protocol отвечает за вывод красивых постов в социальных сетях, в фейсбуке, твиттере, вконтакте и так далее. То есть эта картинка, которую вы зададите по умолчанию, будет фигурировать в постах социальных сетей, репостах и так далее. Выбирайте брендовую и респектабельную фотографию.

    После сохранения изменений – ошибка пропадает.


    Рис 8 – ошибка Open Graph ns#article

    Но по-прежнему остается ошибка, связанная с неизвестным префиксом article.

    Мы с вами уже в курсе, что у нас на сайте установлен плагин SEO Ultimate. Продолжаем копать в этом же направлении.


    Рис 9 – как исправить ошибку Open Graph ns#article

    Устанавливаем Open Graph Type – Website.


    Рис 10 – правильная разметка Open Graph

    После всех изменений валидатор разметки Яндекс больше не выдает никаких ошибок:


    Рис 11 – валидная разметка Open Graph

    Добавляем микроразметку хлебных крошек

    Хлебные крошки - это цепочка ссылок от главной страницы до страницы, где сейчас находится пользователь.

    Для начала нужно проанализировать сайт на наличие хлебных крошек.

    Рис 12 – хлебные крошки на сайте

    Хлебные крошки на сайте присутствуют. Теперь нужно понять, каким образом они выводятся. В исходном коде хлебных крошек находим название плагина, с помощью которого они функционируют - Breadcrumb NavXT 4.0.2

    Рис 13 – хлебные крошки выводятся через Breadcrumb NavXT

    Открываем админ панель нашего сайта и заходим в редактирование плагина Breadcrumb NavXT.

    Рис 14 – Настройки Breadcrumb NavXT

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

    В нашем случае нас интересуют:

    • Шаблон ссылки на страницу блога
    • Шаблон на главную
    • Рубрика блога Шаблон
    • Шаблон ссылки на рубрику

    Все шаблоны имеют стандартный вид типа:

    %htitle%

    %htitle%

    Чтобы получить правильную микроразметку, нам нужно разметить этот исходный код с помощью стандарта http://schema.org/BreadcrumbList

    1. Dresses
    2. Real Dresses

    Разберем по порядку, какие элементы содержит разметка, и как их следует применять:

    itemscope itemtype=”http://schema.org/BreadcrumbList”

    Этот элемент обозначает начало размечаемой области. Все что будет внутри этого элемента – это будет разметка хлебных крошек.

    В примере элемент находится внутри нумерованного списка – тег

      Это не обязательно, можно использовать

      , или другие подобные теги.

      Нужно смотреть по обстоятельствам и помнить что от того какой тег вы используете такой CSS и подключится к хлебным крошкам. То есть внешний вид ваших хлебных крошек зависит от того в какие теги вы обрамите http://schema.org/BreadcrumbList .

      В нашем случае мы добавим эту строку кода через исходный код виджета breadcrumb_navxt_widget.php

      Так как через стандартный редактор кода админ панели WordPress это файл недоступен, мы будем использовать фтп доступ через filezilla.


      Рис 15 – Настройки виджета Breadcrumb NavXT

      Находим кусок кода, который отвечает за микроразметку, а конкретно нам нужен тег, который обрамляет эту разметку.


      Рис 16 – код который обрамляет Breadcrumb NavXT

      Находим в файле breadcrumb_navxt_widget.php следующий код:

      Echo "

      "; И меняем его: echo "
      "; //Display the regular output breadcrumb bcn_display(false, $instance["linked"], $instance["reverse"]); echo "
      ";

      Сохраняем файл и перезаписываем его на сервере, в результате получаем то что нам нужно.


      Рис 17 –обозначение разметки BreadcrumbList

      Он обозначает новую принадлежность к другому типу данных - schema.org/ListItem

      А также он описывает свойство – itemListElement. Это свойство уже относится к размечаемым элементам в хлебных крошках. То есть это свойство нам нужно использовать в нашем исходном коде при выводе непосредственно хлебных крошек.

      В нашем случае мы будем использовать это в плагине Breadcrumb NavXT.

      В начало кода, отвечающего за хлебные кошки –

      %htitle%

      Мы добавим строку:

      %htitle%

      Нужно разметить элемент itemprop=”item”, из примера видим, что он отвечает за разметку URL адреса хлебных крошек.

      Добавляем его перед href=”%link%” Получаем в итоге:

      Далее размечаем свойство itemprop=”name”, то есть имя, которое соответствует нашему URL адресу, уже размещенному нами. Нам необходимо %htitle%, который в нашем случае отвечает за нужное имя – обрамить свойством itemprop=”name”.

      Получаем

      %htitle%

      В конце нам нужно добавить обозначение позиции элемента в иерархической системе, используя свойство itemprop=”position”.

      Для этого добавляем строку кода

      Главное – делать все аккуратно и в пределах открытых

      или

      И так, исходя из имеющегося исходного кода:

      %htitle%

      На основе примера получается следующий код:

      %htitle%

      Также приведем примеры уже готовых кодов разметки для Breadcrumb NavXT.

      %htitle% %htitle%

      %htitle%

      %htitle%

      С Микроразметкой:

      %htitle%

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


      Рис 18 – валидная микроразметка хлебных крошек

      Видео

      ИНН: 772578776588
      ОГРН: 315774600103615
      ОКПО: 0194004627
      ОКТМО: 45914000000
      ОКАТО: 45296559000
      р/с: 40802810300310000244
      в АКБ «БАНК МОСКВЫ» (ОАО) отделение «Перовское»
      к/с: 30101810500000000219
      БИК: 044525219

      Фактический адрес: г. Москва, шоссе Энтузиастов, дом 56, строение 26, офис 304

      Юридический адрес: 115191, г. Москва, 4-й Рощинский проезд д.7/16