Урок 344 Хлебные крошки на WordPress сайте: как правильно вывести с точки зрения SEO?

Привет, друзья! Про “хлебные крошки” на WordPress я когда-то уже писал, но это было в далеком 2010-м году. С тех пор некоторые вещи изменились, как в техническом плане, так и в моей голове. Поэтому я решил написать этот урок.

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

Содержание

1. Как вывести “хлебные крошки”.
2. Как изменить внешний вид “крошек”.
3. Как убрать название статьи в “последней ветке”.
4. Микроразметка “хлебных крошек”, schema.org и прочее.

Вот так выглядят “хлебные крошки” на моем блоге:

Раньше вывод “хлебных крошек” осуществлялся через код, который встроил верстальщик, без всяких плагинов. Но меня все время не устраивало одно: там выводилась “последняя ветка” крошек, то есть название статьи. Вот как это выглядело:

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

В общем, как я считаю, что это переоптимизация и такое недопустимо. Так как я далеко не проггер, я просто физически не знал, как убрать это дублирование и просто “забил” на это.

И тут совершенно случайно из Твиттера я перехожу на сайт своего друга Виталия и попадаю на статью “Как убрать дубль названия статьи в хлебных крошках WordPress SEO by Yoast”. И о ура, я наконец-то нахожу решение своей проблемы.

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

“Хлебные крошки” на сайте с помощью плагина WordPress SEO by Yoast

Как сделать “хлебные крошки”

Распишу, как следует выводить их:

1. У Вас должен быть установлен плагин WordPress SEO by Yoast.
2. В админке сайте переходим в раздел SEO -> Хлебные крошки:
3. Ставим галочку напротив “Включить “хлебные крошки””:
4. Определяемся с разделителем между пунктами, у меня это символ “>”, а также нужно ввести текст ссылки на главную страницу (у меня просто WPnew.ru), не забываем нажать на кнопку ниже “Сохранить изменения” (в строчке “Записи” не забудьте поставить “Рубрика”):
5. Вот код, который нужно вставить (взял отсюда https://kb.yoast.com/kb/implement-wordpress-seo-breadcrumbs/ ):
6. В нашей теме WordPress ищем файл single.php, открываем его:
7. Там ищем код the_title (код, который отвечает за вывод заголовка статьи):
8. Строчкой ВЫШЕ или даже еще чуть выше (узнаете методом проб) вставляем скопированный PHP код:
9. Вот так немного ужасно в визуальном плане у вас могут наконец-то вылезти эти самые “хлебные крошки” (покажу на примере своего сайта):

Как изменить внешний вид “хлебных крошек” с помощью CSS

1. На скриншоте выше блок получился довольно симпатичным, но на некоторых сайтах по умолчанию получается крайне некрасиво. Что мы делаем? Просто присваиваем любой CSS класс “хлебным крошкам”:
2. И уже в style.css своей темы прописываем те стили, которые нам нужны, в моем случае это выглядит так:
3. Напомню, вы можете с легкостью скопировать стиль любого понравившегося элемента на любом сайте, просто использовав Firebug (дополнение для Firefox), да и прямо в нем можете “поиграться” со шрифтами и прочее, чтобы понять, как лучше будет для Вашего сайта. С моими стилями получилось вот что (оформление, по-моему, очень даже симпатичное):

Как убрать название статьи в “хлебных крошках”

Дальше нужно определиться, как убрать “последнюю ветку”, то есть название статьи. Как уже говорил, спасибо Виталию за предоставленный код, просто нужно вот это Вам скопировать:

<?php if ( function_exists('yoast_breadcrumb') ) {yoast_breadcrumb('<p id='breadcrumbs'>','</p>');}?>

Открыть файл темы functions.php и в самом начале после октрывающегося php вставить его:

Микроразметка “хлебных крошек”, schema.org и прочее

“Хлебные крошки” на самом деле можно вывести разными способами. Самое главное, помимо того, что мы видим визуально, нужно убедиться в том, что ваши “хлебные крошки” понимают поисковые системы. Для этого используются микроразметки.

С плагином WordPress SEO by Yoast с этим проблем нет, поисковики все правильно воспринимают. Если же вы выводите “хлебные крошки” с использованием другого плагина или вообще просто PHP кода, обязательно проверьте правильность их вывода с помощью валидаторов микроразметок:

1. Валидатор микроразметок Google.
2. Валидатор микроразметок Яндекс.

Вот примерно, что вы должны видеть в валидаторе Google (вбиваем адрес любой статьи):

В валидаторе Яндекса аналогично (повторюсь, нужно вбивать ссылку на статью):

В итоге потом в результате выдачи мы будем видеть что-то подобие:

Ответы на вопросы

Что делать, если в “хлебных крошках не выводятся рубрики?  

Все очень просто, в настройках устанавливаем таксономию “Рубрики”:

Как задавать произвольные названия категорий?

Вот и все. Вроде бы тема “хлебных крошек” раскрыта. 🙂 Если есть вопросы – задавайте, если что обязательно дополню этот урок.

А как вы выводите “хлебные крошки” на своем сайте?