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

• установку хлебных крошек на свой WordPress блог (хотел без плагина, чтобы не нагружать сайт),
• и настройку микроразметки (без нее пользы от хлебных крошек немного).

Элемент навигации

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*** Крошки с микроразметкой ***/ function wp_zhilin_krohi() { if (!is_home()) { echo " Главная » "; } if (is_category() || is_single()) { $cats = get_the_category(); foreach ($cats as $cat) { echo " term_id)."" >" .$cat->name." » "; } } if(is_single()) { the_title(); } };

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

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

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

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

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

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

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

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

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

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

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

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

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

После того, как вы все сделаете – обязательно проверьте правильную работу микроразметки в специальных валидаторах Яндекса и Google, мало ли, всплывут какие-то косяки:

webmaster.yandex.ru/microtest.xml developers.google.com/structured-data/testing-tool/ (45 голосов, в среднем: 4.7 из 5)

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

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

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

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

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

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

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

...

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