Урок 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. Вот код, который нужно вставить (взял отсюда https://kb.yoast.com/kb/implement-wordpress-seo-breadcrumbs/ ):

    Вордпресс "хлебные крошки"

  6. В нашей теме WordPress ищем файл single.php, открываем его: WP хлебные крошки
  7. Там ищем код the_title (код, который отвечает за вывод заголовка статьи): Код заголовка статьи
  8. Строчкой ВЫШЕ или даже еще чуть выше (узнаете методом проб) вставляем скопированный PHP код: PHP код хлебных крошек
  9. Вот так немного ужасно в визуальном плане у вас могут наконец-то вылезти эти самые "хлебные крошки" (покажу на примере своего сайта): Хлебные крошки на сайте (пример)

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

  1. На скриншоте выше блок получился довольно симпатичным, но на некоторых сайтах по умолчанию получается крайне некрасиво. Что мы делаем? Просто присваиваем любой CSS класс "хлебным крошкам": Хлебные крошки CSS
  2. И уже в style.css своей темы прописываем те стили, которые нам нужны, в моем случае это выглядит так: Стили класса в 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 (вбиваем адрес любой статьи):

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

 

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

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

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

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

 

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

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

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

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

 

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

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

 

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

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

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

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

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

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

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

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

Нажав кнопку "Отправить", я согласен с соглашением на обработку моих персональных данных.

51 комментарий

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

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

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

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

Евгений

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

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

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

Евгений

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

Автор
Пётр Александров https://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

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

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

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

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

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

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

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

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

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

seoonly.ru http://seoonly.ru/

Тру плагин)

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

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

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

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

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

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

seltik http://wpsam.ru

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

seltik http://wpsam.ru

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

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

Может кэш?

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

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

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

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

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

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

TonyMontana http://earn24.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ZavStas http://zavstas.ru

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

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

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

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

ZavStas http://zavstas.ru

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

Андрей

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

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

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

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

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

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

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

rdfanode

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

resource

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

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

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

Алексей http://computer-setup.ru

Пётр, все сделал с крошками как вы сказали, не работает данный метод. Все равно в конце крошек показывается название статьи.

Алексей http://computer-setup.ru

Прошу прощения, очистил кэш сайта и все начало как положено отображаться. Спасибо Петр!

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

Отлично, рад, что получилось 😉

Василий https://fandroid.org/

Как убрать название статьи в "хлебных крошках" - в этом разделе код стандартный, а на скриншоте совем другой. Так как же убрать название статьи из хлебных крошек?

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

Который в коде, так как тот, что на скриншоте вроде устарел.

Василий https://fandroid.org/

Ставлю его в functions.php в самое начало - сайт не загружается. Видимо не туда ставлю. Буду экспериментировать.

Александр

После ввода кода (виталика) сайт пропадает! Этот "виталик" вообще что-нибудь смыслит в кодах*

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

Возможно код устарел, не нужно винить из-за этого моего друга.

Наверх