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

Зачем нужно размечать Хлебные крошки (ХК)?

  1. Чтобы наш ресурс стал понятней для роботов поисковых систем.
  2. Чтобы сделать индексацию сайта более быстрой и легкой.
  3. Чтобы ХК отображались в сниппете поисковой выдачи, как дополнительная информация с сайта — пользователю удобнее, если адрес страницы отображается не просто ссылкой, а навигационной цепочкой, в которой видны названия разделов и которая показывает путь вложенности материала.
    Посмотрите примеры:
    Размеченные ХК:
    Микроразметка хлебных крошек
    Не размеченные ХК:
    Отсутствие микроразметки хлебных крошек
  4. Чтобы поисковый робот смог построить правильную структуру сайта (Главная – Категория – Запись).
  5. Как правило, ХК содержат ключевые слова, а добавляя к ним микроразметку, мы сообщаем поисковому роботу, что это именно Хлебные крошки, т.е. путь от Главной к данной странице, а не просто спамный перечень ключей.

Таким образом, семантическая разметка выполняет на сайте несколько важных задач.
Сейчас, микроразметку хлебных крошек Яндекс не понимает, но, несмотря на это, исправно отображает размеченные крошки в поисковой выдаче.
А Google, как всегда, впереди планеты всей — он понимает все виды разметки.

Как добавить микроразметку Shema org в Хлебные крошки?

Предположим, что у нас такой путь к записи:
Главная — Оптимизация (Категория) – Микроразметка хлебных крошек (Запись)

  1. В div, содержащий ХК, нужно добавить itemscope=»» itemtype=»http://schema.org/BreadcrumbList». Вот так:

    Itemscope означает, что данный блок описывает определенный элемент.
    Itemtype сообщает тип элемента (в нашем случае элемент для навигации.
    BreadcrumbList – список пунктов в ХК).

  2. Каждую ссылку нужно обернуть тегами span. Вот так:

    Параметр itemprop=»itemListElement» сообщает, что это отдельный пункт списка элементов.


  3. К ссылке добавляем параметр itemprop=»item», вот так:
  4. Текст ссылки окружаем тегами span и добавляем к тегу параметр itemprop=»name». Вот так:

    Этот параметр говорит о наименовании ссылки: name – имя.

  5. Сразу же за ссылкой вставляем тег мета с паметром content, вот так:

    Он обозначает номер пункта в списке — №1.

В итоге, мы получили первый элемент навигационной цепочки:

Все остальные пункты хлебных крошек меняем по аналогии и получаем полноценные хлебные крошки, размеченные микроданными:

Добавьте его в самый низ файла functions.php, после закрывающего ?>.
Вызвать функцию крошек можно, добавив в файлы single.php, page.php, category.php или archive.php:

Продолжение следует …

prodengiblog.ru

Категории: Статьи о продвижении Просмотров: 3 524

План статьи:

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

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

Структурированные данные

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

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


Проверка микроразметки

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

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

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

hentry

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

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


Инструмент для проверки микроразметки от 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 вы увидите положительную динамику уменьшения количества ошибок. С течением времени они исчезнут вовсе, остается только ждать.


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.

Установка Open Graph

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

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

Отсутствие ошибок микроразметки

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

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

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

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

Анализ хлебных крошек

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

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


Хлебные крошки функционал

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

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

Редактирование плагина Breadcrumb NavXT

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

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

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

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

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

<a title=»Перейти к %title%.» href=»%link%»>%htitle%</a>

Или

<a title=»Перейти к рубрике ‘%title%’.» href=»%link%»>%htitle%</a>

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


<ol itemscope itemtype="http://schema.org/BreadcrumbList">  <li itemprop="itemListElement" itemscope  itemtype="http://schema.org/ListItem">  <a itemprop="item" href="https://example.com/dresses">  <span itemprop="name">Dresses</span></a>  <meta itemprop="position" content="1" />  </li>  <li itemprop="itemListElement" itemscope  itemtype="http://schema.org/ListItem">  <a itemprop="item" href="https://example.com/dresses/real">  <span itemprop="name">Real Dresses</span></a>  <meta itemprop="position" content="2" />  </li>  </ol>

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

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

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

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

Это не обязательно, можно использовать <div>, <span> или другие подобные теги.

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

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

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


Filezilla

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

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

Код который отвечает за микроразметку

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

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

echo '<div >';  //Display the regular output breadcrumb  bcn_display(false, $instance['linked'], $instance['reverse']);  echo '</div>';  И меняем его:  echo '<div itemscope itemtype="http://schema.org/BreadcrumbList">';  //Display the regular output breadcrumb  bcn_display(false, $instance['linked'], $instance['reverse']);  echo '</div>';

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

Сохранение файла

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

Далее мы видим элемент itemprop=»itemListElement» itemscope      itemtype=»http://schema.org/ListItem»

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

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

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

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

<a title=»Перейти к %title%.» href=»%link%»>%htitle%</a>

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

<span itemprop=»itemListElement» itemscope itemtype=»http://schema.org/ListItem»>

В конце кода добавим </span>

Далее, внутри кода

<a title=»Перейти к %title%.» href=»%link%»>%htitle%</a>

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

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

<a title=»Перейти к %title%.» itemprop=»item» href=»%link%»>

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

Получаем

<span itemprop=»name»>%htitle%</span>

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

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

<meta itemprop=»position» content=»1″ />

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

Вывод:

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

<a title=»Перейти к %title%.» href=»%link%»>%htitle%</a>

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

<span itemprop=»itemListElement» itemscope itemtype=»http://schema.org/ListItem»>  <a title=»Перейти к %title%.» itemprop=»item» href=»%link%»>  <span itemprop=»name»>%htitle%</span>  </a>  <meta itemprop=»position» content=»1″ />  </span>

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

Шаблон ссылки на блог с микроразметкой

<span itemprop=»itemListElement» itemscope itemtype=»http://schema.org/ListItem»> <a title=»Перейти к %title%.» itemprop=»item» href=»%link%»> <span itemprop=»name»>%htitle%</span></a><meta itemprop=»position» content=»1″ /></span><span itemprop=»itemListElement» itemscope itemtype=»http://schema.org/ListItem»> <a title=»Перейти к %title%.» itemprop=»item» href=»%link%»> <span itemprop=»name»>%htitle%</span></a><meta itemprop=»position» content=»2″ /></span>

Шаблон ссылки на главную с микроразметкой

<span itemprop=»itemListElement» itemscope itemtype=»http://schema.org/ListItem»> <a title=»Перейти к %title%.» itemprop=»item» href=»%link%»> <span itemprop=»name»>%htitle%</span></a><meta itemprop=»position» content=»1″ /></span>

Рубрика блога Шаблон с микроразметкой

<span itemprop=»itemListElement» itemscope itemtype=»http://schema.org/ListItem»> <a title=»Go to the %title% Рубрика блога archives.» itemprop=»item» href=»%link%»> <span itemprop=»name»>%htitle%</span></a><meta itemprop=»position» content=»2″ /></span>

Шаблон ссылки на рубрику с микроразметкой

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

<span itemprop=»itemListElement» itemscope itemtype=»http://schema.org/ListItem»> <a title=»Перейти к рубрике %title%.» itemprop=»item» href=»%link%»> <span itemprop=»name»>%htitle%</span></a><meta itemprop=»position» content=»2″ /></span>

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

Правильная микроразметка

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

fireseo.ru

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

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

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

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

 <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> </div> 

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

 <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="www.вашсайт.ru/dresses" itemprop="url"> <span itemprop="title">Мебель</span> </a> </div> 

Далее делаем по аналогии. В итог получаем полноценные хлебные крошки, с внедренными микроданными:

 <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="www.вашсайт.ru/dresses" itemprop="url"> <span itemprop="title">Мебель</span> </a> -> </div> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="www.вашсайт.ru/dresses" itemprop="url"> <span itemprop="title"> Корпусная мебель </span> </a> -> </div> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="www.вашсайт.ru/dresses" itemprop="url"> <span itemprop="title">Тумбы</span> </a> -> </div> 

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

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

thisis-blog.ru

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

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

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

Внешний вид сниппета в поисковой выдаче

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

Хлебные крошки в сниппете

Сниппет – это отображение сайта в результатах поисковой выдачи.

Чем привлекательнее сниппет, тем выше его кликабельность, это дает сразу двойной эффект:

  • Больше кликают, соответственно, выше трафик на сайт,
  • Кликабельность сниппета относится к поведенческим факторам и чем она выше, тем проще ресурсу карабкаться в ТОП по нужным запросам.

Единственный момент, который был мне непонятен – это то, как поисковые системы определяют, что эти ссылки являются именно хлебными крошками, а не чем-то другими. Согласитесь, страница с любой статьи блога содержит и другие ссылки на рубрику и на главную (верхнее меню, рубрики в сайдбаре, ссылка на рубрику в блоке с метаданными статьи).

Интернет поисковик не человек, он не может заглянуть на страницу и понять – эта ссылка из меню, эта из текста статьи, а эта хлебная крошка.

Пришлось листать форумы и читать многие блоги. В большинстве случаев пишут только про то, что крошки нужны и они улучшают юзабилити и сниппет, а дальше расписывают инструкцию по настройке плагина Breadcrumb NavXT (Breadcrumb — это с английского хлебные крошки) или приводят код реализации без плагина — и все. У меня сложилось впечатление, что большинство вебмастеров понятия не имеют о том, как правильно работать с этим элементом и воспринимают его лишь как элемент внутренней перелинковки страниц.

В выдаче Google видно, что не больше 10% сайтов имеет в своем арсенале правильные хлебные крошки, остальные работают по старинке, высвечивая в сниппете URL страницы.

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

Я не поленился, залез в поиск, проанализировал, как на разных сайтах сделаны Breadcrumb и как эти сайты выглядят в поиске. Моя теория оказалась верной:

  • Есть крошки на сайте – нет микроразметки – обычный сниппет с URL.

нет микроразметки

  • Есть крошки – есть микроразметка – улучшенный сниппет.

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

Я раскопал все что нужно и сегодня вам расскажу про хлебные крошки от А до Я. Поставить их технически на сайт – это даже не пол дела – это 10%. Главная фишка, которая принесет реальную пользу – это микроразметка.

Главная польза не в хлебных крошках, а в их правильной микроразметке для сниппета.

Я с микроразметкой, как с понятием, познакомился всего пару месяцев назад. Мало чего понял тогда, но попробовал настроить основные элементы для статей и комментариев. Некоторые блогеры писали, что это чуть ли не волшебная кнопка толкающая сайты в ТОП (в основном ученики школы блогеров Александра Борисова) — не знаю с чего они так решили. Мне это сомнительным показалось сразу, теперь могу сказать точно – за 2 месяца наличия микроразметки на моем сайте никаких ощутимых движений в выдаче по продвигаемым запросам я не заметил.

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

Хлебные крошки на WordPress без плагина

Вот мы и перешли от разговоров «почему и зачем» к разговорам «как сделать». Плагин Breadcrumb NavXT я сразу откинул, так как устанавливать плагин, который потом «требует доработки напильником» смысла не вижу, а микроразметку он сам делать не умеет. Есть еще вариант — SEO плагин WordPress SEO by Yoast, он тоже умеет делать хлебные крошки, но я использую All-in-One-SEO и менять его желания не имею. Остался один вариант — использовать скрипт или функцию.

Если вы решили установить хлебные крошки на WordPress, то делайте без плагинов – меньше будет нагружаться сайт и больше возможностей по адаптации кода.

Шаг 1. Функция wp_zhilin_krohi

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

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

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

Пришлось начинать заново, полагаясь уже на более простые php функции вордпресса (зато узнал кое-что новое). В итоге, получилась функция wp_zhilin_krohi (первый раз своим именем назвал функцию – приятно), которая выводит хлебные крошки на страницах со статьями и на страницах категорий. Автоматом учитываются все родительские рубрики (сколько бы их ни было) и каждый элемент обернут в микроразметку.

Для статей крошки имеют вид:

Главная > Родительская рубрика (если есть) > Рубрика > Статья

хлебные крошки в статьях

Для категорий:

Главная > Родительская рубрика (если есть) > Рубрика >

хлебные крошки в категориях

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

как хлебные крошки влияют на релевантность страницы

Так что, если думаете, что лишнее повторение заголовка статьи будет мешать вам писать правильно оптимизированные статьи — удалите с 17 по 20 строки.

Вот сама функция, ее нужно добавить в файл functions.php вашей темы, перед закрывающим ?> (делается прямо через админку, даже FTP клиент не понадобится):

Микроразметка сразу зашита в код функции и автоматически выводится вместе с каждой ссылкой.

Шаг 2. Вывод функции на страницах

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

Как минимум, нужен файл single.php (выводит посты) – почти всегда называется одинаково, а дальше зависит от шаблона, где-то страницы категорий выводятся через archive.php, где-то через index.php – у себя найдете нужный.

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

как сделать хлебные крошки без плагина

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

хлебные крошки wordpress

Шаг 3. Оформление

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

На своих ресурсах я настроил одинаково – уменьшил шрифт хлебных крошек по сравнению с основным контентом. Для этого даже не создавал отдельных стилей в файле style.css, а заключил функцию в div контейнер и в нем прописал один единственный параметр – размер шрифта (вы могли обратить внимание на скрине выше):

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

Если же вы захотите кардинально изменить дизайн выводимой цепочки ссылок (какие-то картинки или кнопки сделать), то присвойте им специальный класс, например, так — <div class=”krohi”>, дальше для этого класса создайте в style.css отдельный блок и укажите все необходимые параметры.

Тут вам пригодятся познания в каскадных таблицах стилей CSS и дизайнерское чутье (если будете делать оформление сами).

biznessystem.ru

Влияние хлебных крошек на SEO

Со временем SEO-оптимизаторы заметили, что данный блок ссылок положительно влияет на продвижение ресурса. И работает это вот почему:

1. Внутренняя перелинковка

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

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

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

2. Поведенческие факторы

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

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

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

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

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

Полная версия разметки одной ссылки выглядит следующим образом:

<span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">   <a itemprop="item" href="http://rumbi.ru">   <span itemprop="name">Главная</span>   <meta itemprop="position" content="1">   </a>  </span>

Теперь рассмотрим, что это такое.

Первое, что нам необходимо сделать — это обернуть каждую ссылку в тег <span> и в самом теге прописать
itemscope=»» itemprop=»itemListElement» itemtype=»http://schema.org/ListItem»

<span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">  ССЫЛКА  </span>

Этот тег у нас остается по умолчанию. В нем мы говорим поисковикам — что вот это разметка schema и элемент этой разметки называется itemListElement. Данная конструкция используется во всех ссылках.

Следующее, что нужно сделать — это в ссылку (тег <a>) добавить значение itemprop=»item».
Т.е. мы указываем, что эта ссылка является частью разметки и ее надо использовать.

<a itemprop="item" href="http://rumbi.ru">

Далее — размечаем сам текст ссылки. Для этого достаточно точно так же обернуть анкор (текст ссылки) в тег <span> и прописать в нем itemprop=»name»

<span itemprop="name">Главная</span>

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

 <meta itemprop="position" content="1">

Соответственно, если бы у нас был второй уровень вложенности, надо было бы написать content=»2″.

Вот, собственно, и все! Разметив каждую ссылку таким образом Вы получите красивые ссылки в поисковых системах, что несомненно повлияет на количество трафика Вашего сайта 🙂

alferov.su

SEO-рекомендации к хлебным крошкам

1. Статический вес

Вес страницы – это условная величина, которая показывает «значимость» сайта.

Статический вес страницы – это количество ссылок на ней. Самый большой вес будет иметь главная страница сайта, так как на главную страницу ведут ссылки со всех страниц сайта.

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

Все ссылки из навигации должны ввести на продвигаемые разделы с вхождением ключевых слов. Это очень важный момент для ранжирования в поисковой выдаче, например: Главная > Аксессуары> Клавиатуры>

Но бывает и такое, что вы продвигаетесь по конкурентным запросам. В таком случае, лучше использовать не слово «Главная», а фразу или запрос целиком, например: Техника > Аксессуары > Клавиатуры

2. Поведение пользователей

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

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

3. Сниппет

Сниппет – это фрагмент текста, который выводится рядом со ссылкой в поисковой выдаче.

С помощью поисковой системы Google можно передавать структурированные данные и улучшить позиции сайта в выдаче. Яндекс немного отстает от Google и пока не умеет поддерживать данный вид разметки. Но Яндекс сам формирует цепочку навигации, которую можно увидеть в поиске.

Навигационная цепочка в Яндексе:

Навигационная цепочка в Яндексе. Как сделать правильные для SEO хлебные крошки на сайте?

Оформленная и неоформленная с помощью структурированных данных навигационная цепочка в выдаче Google:

Навигационная цепочка в Google. Как сделать правильные для SEO хлебные крошки на сайте?

Google использует три формата передачи структурированных данных – JSON-LD, Microdata, RDFa. «Хлебным крошкам» подойдут форматы Microdata и RDFa. Ниже представлен пример оформления кода в формате Microdata:

Код в формате Microdata. Как сделать правильные для SEO хлебные крошки на сайте?

После оформления кода необходимо убедиться, нет ли ошибок. Для этого существует инструмент валидатор от Google.

Валидатор от Google. Как сделать правильные для SEO хлебные крошки на сайте?

Убедиться, что происходит правильная обработка и отображение структурированных данных поможет инструмент Search Console от Google.

Search Console от Google. Как сделать правильные для SEO хлебные крошки на сайте?

4. Помните

  • Хороший тон – не делать последний элемент навигации ссылкой, например: Главная > Блог > Статья
  • Если вы используете слишком много ключевых фраз в цепочке навигации, увеличивается вероятность применения фильтров к сайту со стороны поисковых систем.
  • Внедрять «хлебные крошки» или нет – зависит от того, какой у вас ресурс. Если у вас сайт-визитка или на сайте мало разделов, то данная навигация вам не нужна. Но если у вас большой интернет-магазин, такая цепочка навигации вам явно необходима.

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

www.obrazstroy.ru

Для чего нужна микроразметка для хлебных крошек (строки навигации)?

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

Пример хлебных крошек в выдаче

Хлебные крошки на сайте:

Пример хлебных крошек

В справке Яндекс.Вебмастера есть следующее объяснение предназначения микроразметки для хлебных крошек:

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

Таким образом, если просуммировать, то строки навигации в выдаче:

  • делают сниппет более красивым и привлекательным
  • помогают сразу сориентироваться пользователю в структуре сайта

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

Существует много различных форматов: микроданные (microdata), schema.org, микроформаты, OpenGraph, RDFa. Все они поддерживаются и Яндексом, и Google, и имеют похожую логику и синтаксис. Какую из схем лучше выбрать? Абсолютно непринципиально, выбрать можно любую, которая окажется ближе к сердцу. Повторю – все форматы микроразметки для хлебных крошек с точки зрения поисковых систем равнозначны.

Я приведу пример микроразметки для хлебных крошек с помощью RDFa (Resource Description Framework):

Подробнее посмотреть о разметки для хлебных крошек можно тут в справке Google.Webmaster: https://support.google.com/webmasters/answer/185417

Как проверить, что всё сделал правильно?

В Яндекс.Вебмастер есть валидатор микроразметки: http://webmaster.yandex.ru/microtest.xml

Что важнее микроразметка в хлебных крошках или структура url?

Исходные данные:

  • Страница со списком всех растений: /plants/45/
  • Страница растения: /plants/{id}/
  • Страница типа растения: /plants/list/plant_type/{id}/

Хлебные крошки на странице растения организованы следующим образом: Главная -> Список растений -> Тип растения -> Страница растения. Строку навигации разметили с помощью микроразметки. Соответственно в выдаче ожидаем, что навигационная цепочка будет такая же.

Разметка на странице растения:

Результат для Яндекса

Главная -> Список растений -> Страница растения. Т.е. точно согласно вложенности url.

Навигационная цепочка в Яндексе

Результат для Google

Главная -> Список растений -> Тип растения -> Страница растения. Т.е. точное повторение цепочки ссылок, которую мы построили и разметили.

Навигационная цепочка в Google

Таким образом, можно сделать вывод, что для Яндекса важнее структура url, а для Google – микроразметка.

web-optimizator.com

sergeyneznamov.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector