Урок 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.

Ваш комментарий

  1. Евгений

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

    • Макс

      Если установить плагин 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://wpnew.ru

        Попробуй обновить плагин, потому что у меня в категориях все в порядке (дополнил урок) http://wpnew.ru/wp-content/uploads/2014/12/nazvanii-kategorij-580×354.jpg

        • Евгений

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  5. seoonly.ru
    http://seoonly.ru/

    Тру плагин)

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

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

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

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

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

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

  7. seltik
    http://wpsam.ru

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

    • seltik
      http://wpsam.ru

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

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

        Может кэш?

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

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

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

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

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

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

  10. TonyMontana
    http://earn24.ru

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

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

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

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

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

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

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

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

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

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

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

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

  13. ZavStas
    http://zavstas.ru

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

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

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

      • ZavStas
        http://zavstas.ru

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

  14. Андрей

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

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

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

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

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

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

    Петр, спасибо за статью! В гугле все нормально показывает, а в яндексе у меня выдает такую ошибку:
    rdfanode
    ОШИБКА: префикс article неизвестен валидатору, укажите его явно атрибутом prefix
    resource
    Это я еще кусочек кода вставила.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  22. Александр

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

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

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

Наверх