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

В 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

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

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

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

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

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

    • Свежие заметки

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

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

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

  1. " . JText::_("MOD_BREADCRUMBS_HERE") . "
    2. ";

    И замените ее на:

    Echo "

    3. ";

    найдите строки:

  3. "; if (!empty($item->link)) { echo "link . "">" . $item->name . ""; } else { echo "" . $item->name . ""; } if (($key != $penult_item_key) || $show_last) { echo "" . $separator . ""; } echo "
    4. ";

    и замените их на:

    // Render all but last item - along with separator echo "

  4. "; if (!empty($item->link)) { echo "link . "">" . $item->name . "
    "; } else { echo "" . $item->name . "
    5. "; } if (($key != $penult_item_key) || $show_last) { echo "" . $separator . ""; } echo "";

    найдите строки:

  5. "; echo "" . $item->name . ""; echo "
    6. ";

    и замените их на строки:

    // Render last item if reqd. echo "

  6. "; echo "" . $item->name . ""; echo "
    7. ";

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

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

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

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

    Как видно, детализация URL-адреса посредством хлебных крошек Arts› Books› Poetr y (рус. – Искусство› Книги› Поэзия ) позволяет точно определить местоположение страницы в структуре веб-ресурса.

    Причем здесь «хлеб» и «крошки»?

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

    Зачем нужны хлебные крошки?

    Использование хлебных крошек может быть обусловлено несколькими причинами:

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

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

    Как самому внедрить хлебные крошки?

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

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

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

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

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

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

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

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

      ...

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

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

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



    Похожие статьи