Урок 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 (вбиваем адрес любой статьи):

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

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

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

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

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

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

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

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