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

Хлебные крошки

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

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

Содержание

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

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

Хлебные крошки

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

Хлебные крошки в WordPress

Я считаю, что это неправильный вариант, так как на таком маленьком участке кода происходит чрезмерная концентрация ключевых слов, причем идет полное дублирование, а одно из них даже в теге 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. Ставим галочку напротив "Включить "хлебные крошки"": Хлебные крошки плагин WordPress
  4. Определяемся с разделителем между пунктами, у меня это символ ">", а также нужно ввести текст ссылки на главную страницу (у меня просто WPnew.ru), не забываем нажать на кнопку ниже "Сохранить изменения": Как сделать хлебные крошки с помощью плагина WordPress
  5. Спускаемся чуть ниже, копируем вот этот код, который дает нам плагин WordPress SEO by Yoast: Вордпресс "хлебные крошки"
  6. В нашей теме WordPress ищем файл single.php, открываем его: WP хлебные крошки
  7. Там ищем код the_title (код, который отвечает за вывод заголовка статьи): Код заголовка статьи
  8. Строчкой ВЫШЕ или даже еще чуть выше (узнаете методом проб) вставляем скопированный PHP код: PHP код хлебных крошек
  9. Вот так немного ужасно в визуальном плане у вас могут наконец-то вылезти эти самые "хлебные крошки" (покажу на примере своего сайта): Хлебные крошки на сайте (пример)

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

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

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

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

function adjust_single_breadcrumb( $link_output) { if(strpos( $link_output, 'breadcrumb_last' ) !== false ) { $link_output = ''; } return $link_output; } add_filter('wpseo_breadcrumb_single_link', 'adjust_single_breadcrumb' );

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

Как убрать заголовки статей

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

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

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

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

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

Валидатор микроразметок Google

 

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

Валидатор микроразметок Яндекс

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

Микроразметка в результате выдачи

 

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

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

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

Рубрики в хлебных крошках

 

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

Названии категорий

 

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

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

С уважением, Пётр Александров.
Подпишитесь на бесплатные уроки

Понравился урок? Вы не хотите пропускать новые бесплатные уроки по созданию, раскрутке и монетизации блога? Тогда подпишитесь на RSS или на электронный ящик в форме выше и получайте новые уроки мгновенно! Также можете следить за мной в Twitter.

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

43 комментария

по хронологии
по рейтингу сначала новые по хронологии
Евгений

Как ты видишь оформление хлебных крошек в таком примере:

Есть сайт, не блог а просто сайт компании, пусть по пластиковым окнам. Там есть страница услуг, с перечнем и дочерние страницы конкретных услуг. Уровень вложенности больше 2х. У каждой такой страницы должны быть сеошные заголовки h1. Например такая структура. Главная->Услуги->Остекление балконов->Холодное остекление. Если прописать заголовки, то получится что-то ужасное, на подобии Пластиковые окна недорого в Москве->Услуги по установке пластиковых окон в Москве->Остекление балконов в Москве->Холодное остекление балконов в Москве

Это образно, чтобы лучше было понятно. Что предлагается делать с крошками в таком случае?

Евгений

Ой, всё... Никто не хочет поделиться решением...

Автор
Пётр Александров http://wpnew.ru

Попробуй обновить плагин, потому что у меня в категориях все в порядке (дополнил урок)

Евгений

Хм, странно, я его поставил после этого поста как раз чтобы потестить... У меня нет такого поля... Ладно, буду разбираться. Хотя для категорий это и не так важно мне, мне важнее для страниц

Автор
Пётр Александров http://wpnew.ru

Так на страницах тоже можно произвольный заголовок хлебных крошек прописывать.

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

Николай http://www.webmedinfo.ru

Нашел, не знаю прям, как сначала не заметил.

Николай http://www.webmedinfo.ru

Петр, а не подскажешь, где на страницах можно прописать произвольный заголовок?

Виталий http://mojwp.ru/

Включи крошки в настройках плагина, тогда появится соотв. поле.

Если установить плагин SEO by Yoast, то для каждой статьи или рубрики можно вводить отдельно название и title. Т.е. в заголовке выводишь title, а в крошках название.

Евгений

Это не круто. Должны быть и в тайтле и в загловке H1 сеошные тексты, но разные.

Тамара http://moitsvety.ru/

Кто казал, что должны быть разные. Самый главный заголовок должен быть заключен в h1 _http://ktonanovenkogo.ru/wordpress/wordpress_osnovi/nastrojki-wordpress-zagolovki-teme-vordpress-vyvod-wp-rubrik-kategorij.html

Евгений

То что об этом написали в статье, не значит что это истина. У меня свои сведения. И вообще вопрос не о том как правильно. Я привел ситуацию, и мне интересно кто как решает такие штуки. У меня есть решение

Сергей http://ruskweb.ru/

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

Евгений

Это редактор категории -

Где меняются хлебные крошки?

Алексей http://activeinvestor.pro

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

Автор
Пётр Александров http://wpnew.ru

Да внизу смысл? Кто-нибудь кликает?

Сергей Черняев http://www.industrialist.net.ua/

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

Никита Волков http://snow-motion.ru

Петь, а если не выводится рубрика в "хлебных крошках", то что делать? Помнишь, у меня проблема такая есть. Убирать их? Или плагином выводить?

Автор
Пётр Александров http://wpnew.ru

В урок добавил тоже про решение этой проблемы (в конец).

seoonly.ru http://seoonly.ru/

Тру плагин)

Автор
Пётр Александров http://wpnew.ru

Ага, там очень много всяких прикольных фишек.

Никита Волков http://snow-motion.ru

Петь, долго и упорно я пытался вывести по-человечески "хлебные крошки" и СЛАВА БОГУ всё получилось!!! Просто переставил их сначала перед php the_content, появилась рубрика, затем просто вырезал и вставил обратно и всё)) Всё появилось) Ещё поставил галочку "В "хлебных крошках" установить таксономию для:", поставил для рубрик)) УРАААААА!!! Теперь домашнее задание выполнено полностью)))

Автор
Пётр Александров http://wpnew.ru

Молодец 🙂 все дело в "таксономии для" 🙂

seltik http://wpsam.ru

Вывел крошки, поставил галочку выводить рубрику. прописал в функшн код. И всё равно лажа. Главная, и сразу же название статьи. Не вывелись категории и не убралось название статьи ....

seltik http://wpsam.ru

А нет заработало, просто изменения вступают в силу через час .....

Автор
Пётр Александров http://wpnew.ru

Может кэш?

Андрей http://zhigulevsk.net

Да уж, ковырялся три часа. Пока не получилось. А можно сразу тему уже с крошками найти?

Автор
Пётр Александров http://wpnew.ru

Не могу понять, в чем проблема?) Может включен плагин кэширования?

Максим http://seowordpress.ru

Петр, одно лишь замечание по тексту статьи!) Не Schema.org, а RDF

TonyMontana http://earn24.ru

Петр, а вы знаете статистику по хлебным крошкам? Ими пользуются всего 5% людей. Это уже как бы неактульно.

Автор
Пётр Александров http://wpnew.ru

"Хлебные крошки" я вывожу в первую очередь для поисковых систем.

Максим http://seowordpress.ru

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

Павел http://dahod.ru

Столкнулся с интересной ерундой при выводе крошек. Они разбиваются на 2 строчки и выглядят так :

Главная>>хлебные

крошки>>как настроить

Вот как исправить эту беду ? первый рас с таким сталкиваюсь ....

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

Что то с шаблоном ?

Автор
Пётр Александров http://wpnew.ru

Может быть задана фиксированная ширина? Посмотри через Firebug

Виталий http://svobodniy.biz

Ох. Спасибо большое. Урок очень полезный и информативный. У себя поставил и настроил пока первично. Но самое главное, что получилось.

ZavStas http://zavstas.ru

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

Гугл не пролил свет на проблему. Может уже встречалось такое?

Автор
Пётр Александров http://wpnew.ru

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

ZavStas http://zavstas.ru

В точку! Чуть выше скопировал, чем надо было.

Андрей

Здравствуйте.
После настройки хлебных крошек проверил их отображение в яндексе и гугле. Первый понимает адектватно, а вот гугл ругнулся... Можете подсказать с чем это связано и как починить?
В плане видимости - все корректно, без ошибок.

decom_ крошки_55ba62378d34d.jpgdecom_ крошки_55ba62378d34d.jpg
Виталий Охрименко http://fitkiss.club

Петь, спасибо за статью! Сделал себе хлебные крошки по твоему уроку, очень и очень доволен!

Сергей http://www.industrialist.net.ua/novosti/sovremennoe-rabstvo.html

Спасибо за код! Внедрил, все работает))

Татьяна http://mariglamur.ru/

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

rdfanode

ОШИБКА: префикс article неизвестен валидатору, укажите его явно атрибутом prefix

resource

Это я еще кусочек кода вставила.

Дмитрий http://admin-life.ru/

Спасибо! Искал как убрать последний пункт в хлебных крошках и ваша статья помогла.

Наверх Рейтинг@Mail.ru