Хлебные крошки в плагине Yoast SEO – как добавить и полная настройка

Навигационная цепочка отличный метод перелинковки и дополнения юзабилити сайта, если она не реализована в вашем шаблоне, то рекомендую сделать хлебные крошки от Yoast SEO.

Конечно если не пользуетесь самим YoastSEO плагином, то не стоит устанавливать его только ради этого, другие методы рассказаны в статье.

Активируем функцию хлебных крошек с schema org

Для начала нужно проверить, возможно тема поддерживает вывод хлебных крошек от Yoast SEO. Активируем соответствующий раздел.

Активация.
Включаем.

Далее проверяйте сайт, возможно где-то крошки появились: в записях, категориях, архивах. Шаблоны бывают разные, некоторые разработчики криво или не до конца могут интегрировать такие мелочи, тем более в бесплатные продукты. Если они не появилось, то переходим к следующему шагу.

Вставка кода вывода breadcrumb от Yoast

Для вывода breadcrumbs есть специальный код, его вставляем в то место где нужно визуально их видеть.

<?php
/* breadcrumb Yoast */
if ( function_exists( 'yoast_breadcrumb' ) ) :
   yoast_breadcrumb( '<div id="breadcrumbs">', '</div>' );
endif;
?>

Приведу на примере записей, за их вывод отвечает файл single php, но бывает, что он составляется из разных документов, поэтому искать придется глубже. Покажу на примере стандартного редактора в админке WordPress, но вы лучше действуйте через FTP с применением дочерней темы. Хочу вставить хлебные крошки после заголовка.

Код Yoast.
Прописываем код показа.
  1. Находим файл для показа, например, single.
  2. Нашел заголовок, об этом говорит инструкция the_title.
  3. Сохранил изменения.
  4. Проверяю работу.
Полная навигация yoast.
Пример работы.

Видим множество символов, надпись “Вы здесь”, между крошками разделители, далее все это будем менять, не забудьте очистить кэш в плагине кэширования и обновить страницу в браузере с помощью ctrl+f5. Главной опасностью тут является полностью дублирующийся заголовок в последнем элементе, этого быть не должно, разберемся далее как исправить.

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

Шорткод (shortcode) для вставки хлебных крошек

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

[wpseo_breadcrumb]

Настройка внешнего вида

Когда вставляли код, то могли заметить, что есть идентификатор breadcrumbs, его не трогаем. Что нам мешает добавить класс, и стилизовать их с помощью стилей, можно в инструкцию добавить такой текст (возьму только одну строку).

yoast_breadcrumb( '<div id="breadcrumbs class="bradcrumbs-yoast">', '</div>' );

Если есть знания верстки, то сменить цвета и размеры всех элементов просто. Перейдем к встроенным настройкам в Yoast SEO.

Оформление breadcrumbs.
Панель йоаст.
  • Переходим опять туда где включали хлебные крошки.
  • Первые 6 полей делаем как хочется, чтобы отображались bredcrumbs, сравните тот скриншот, который показывал выше и поймете где и что выводится. Разделитель или separator можно менять разными методами, даже при помощи emoji.
  • Показывать страницу блога – подразумевает что завершающий элемент не будет отображаться, то есть дубля заголовка. Но потестировав на множестве шаблонов, убедился что не работает, далее разберемся как этого добиться.
  • Выделение жирный последней крошки, думаю понятный пункт.
  • Таксономия – тут важно выбрать что будет отображаться в пути до статьи. Для записей советую поставить “Рубрика”, чтобы был показан весь путь вложенности материала вплоть до подрубрик, ниже показал где это отображается.
  • Если установлен WooCommerce, то для него так же будет раздел с настройкой вида основной таксономии.
Показ родительского пункта.
Родительская таксономия.

Дальше идут аналогичные спойлеры для категорий, страниц, архивов и других сущностей, попробуйте менять значения и увидите как меняется навигационная цепочка.

Убрать дубль breadcrumbs Yoast в WordPress

Для начала разберемся с последней дублирующейся надписью вордпресс. Единственный способ это править каждую хлебную крошку в Yoast SEO вручную. В каждой сущности WordPress йоаст под редактором вставляет свой блок, нажимая на спойлер “Дополнительно”, там открывается целая панель настроек, среди них canonical, с которым нужно быть осторожней, и поле для изменения конечного пункта в цепочке.

Отдельная последняя навигация для всех сущностей.
Задаем отдельно.

Сохраняем и смотрим что изменилось на сайте.

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

Единственное решение нашел в плагине ClearfyPRO, вот все пункты которые он исправляет в Yoast.

Клеарфай.
CleadfyPRO.

Есть еще вариант заменить на тайтл, который прописываем в этом же блоке Yoast SEO. Но не считаю это правильно, потому что так же идет дубликат текста, хотя и не такой явный. В общем отметили первый переключатель и смотрим что получилось.

Нет последнего звена.
Убрали последний элемент.

Видим завершающий пункт пропал, а остальное сохранилось. Считаю это лучшим методом если не хочется менять все вручную. Дополню что Clearfy не только правит ошибки Yoast SEO, но затрагивает еще 49 проблем, например теги Application. Для читателей предоставляю скидку, жмите на кнопку.

Clearfy -15%

Как удалить хлебные крошки от Йоаст СЕО

Существует вопрос как удалить данную навигацию если она предусмотрена в шаблоне:

  1. Деактивируйте их отображение в панели настроек Yoast.
  2. Если первого пункта было не достаточно, то ищем код вывода в файлах темы и стираем его.

Закончу пост, мы научились работать с хлебными крошками в плагине Yoast SEO, инструмент универсальный, потому что дополнительно использует в себе микроразметку schema org, но не в формате microdata.

Пожалуйста, оцените материал:

Давно занимаюсь и разрабатываю сайты на Wordpress. Считаю что лучшего решения для ведения бизнеса не найти, поэтому считаю долгом делиться информацией с остальными.
Получай полезные материалы удобным способом!
Добавить комментарий