Хлебные крошки google. «Хлебные крошки»: микроразметка и ее влияние на сниппеты страниц. Что такое «хлебные крошки»

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

Поисковики и сами прекрасно умеют определять структуру сайта. Google, например, может построить «крошки» от главной страницы сайта до целевой страницы из цепочки ссылок и вывести их в сниппете. Но, лучше всего «хлебные крошки» разметить с помощью microdata. В словаре Data-Vocabulary.org есть специальный тип для этого - Breadcrumb .

Свежие заметки › Вёрстка › Вёрстка независимыми блоками

Формат разметки, возможно, ещё будет меняться. На текущий момент, все объекты типа Breadcrumb неявно связываются между собой. Последовательность в цепочке определяется их последовательностью в документе. Для явного связывания объектов есть поле child . В этом случае объекты должны быть вложены друг в друга (как в моём примере).

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

• Свежие заметки
• Вёрстка
• Вёрстка независимыми блоками

Технически, получилась точно такая же структура - чётко связанный список «крошек». Осталось только проверить на практике, как к нему отнесётся Google.

Обновление: Гугл нормально связал между собой крошки, через аттрибут itemref .

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

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

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

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

SEO блог Пинго

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

Новичкам

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

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

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

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

Новичкам

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

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

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

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

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

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

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

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

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

//Объявляем элемент
Розовый слон //Определяем наименование товара или услуги
Хороший слон. //Определяем описание товара или услуги

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

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

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

В 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

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

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

Сегодняшняя статья будет посвящена микроразметке хлебных крошек под Google на основе микроданных http://data-vocabulary.org/.
Вопрос : зачем вообще нужна микроразметка для хлебных крошек?
Ответ : чтобы придать сниппету более красивый вид, информация будет выглядеть понятней и удобнее для пользователя, тем самым мы повысим конверсию. Рассмотрим на примере результата выдачи по запросу «микроразметка хлебных крошек»(рис. 1).

рис.1 Выдача гугла(сайты, которые используют микроразметку цепочки навигации подчеркнуты зеленым)

Как видно, сайты, которые я подчеркнул зеленой линией используют микроразметку строки навигации.

Предположим у нас такая цепочка:
Мебель — Корпусная мебель –тумбы
Во первых нужно обернуть каждый элемент цепочки навигации в блок(например div) с атрибутами itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”.
Itemscope означает, что данный блок описывает элемент.
Itemtype какого типа элемент(в нашем случае наш элемент для навигации)
Должна получиться обертка:

Далее вставляем в обертку ссылку и добавляем атрибут itemprop= «url» . Он указывает разметке, что это ссылка. И последний шаг для первого элемента хлебных крошек – добавляем блок внутрь ссылки с названием первого элемента. В этот блок добавляем атрибут itemprop= «title» .
Получился первый элемент навигационной цепочки:

Мебель

Мебель -> Корпусная мебель -> Тумбы ->

После установки микроразметки проверяем в

По моим наблюдениям первое что начали размечать в opencart - хлебные крошки . Почему же именно breadcrumbs стали точкой входа микроразметки в мир сайтов? Есть несколько причин.

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

Для разметки хлебных крошек в Opencart вручную надо в каждом файле шаблона product.tpl, category.tpl и т.д. прописать атрибуты микроразметки.

• 
  
  Главная
  
  


• 
  
  Ноутбуки