Установить хлебные крошки на wordpress за 5 минут пошаговая инструкция

Оформление «хлебных крошек»

Для того чтобы задать стили для нашей навигационной цепочки можно дописать в файл style.css вашей темы свои стили.
Я подготовила для вас несколько готовых вариантов, которые вы можете переделать под себя. Они подойдут независимо от того какой способ создания хлебных крошек вы выберите: с плагином или без.

Первый вариант

Вот код:

CSS

#br-crumb{
margin:20px 0px;
}
#br-crumb a, .page-name {
color:#449D44; /*цвет текста*/
text-transform:uppercase; /*текст заглавными буквами*/
}
#br-crumb a:hover, .page-name:hover{ /*смена цвета текста при наведении*/
color:#3498DB;
}

Второй вариант
Код:

CSS

#br-crumb{
margin:20px 0px;
}
#br-crumb a, .page-name {
padding:3px 5px; /*внутренний отступ*/
color:#fff; /*цвет текста*/
background:#2F73B6; /*цвет фона*/
border-radius:5px; /*скруглённые углы*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#br-crumb a:hover, .page-name:hover{
color:#2F73B6; /*цвет текста при наведениии*/
background:#fff; /*цвет фона при наведении*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}

Третий вариант
Код:

CSS

#br-crumb{
margin:20px 0px;
}
#br-crumb a, .page-name {
display:inline-block;
padding:3px 5px;
color:#fff; /*цвет текста*/
background:#2F73B6; /*цвет фона*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
position: relative;
height:39px; /*высота*/
padding-left:30px;
}
#br-crumb span{
}
#br-crumb a:after, .page-name:after {
content: «»;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #2F73B6; /*цвет треугольников*/
position: absolute;
right: -19px;
top: 0;
z-index:2;
}
#br-crumb a:before, .page-name:before {
content: «»;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #fff;
position: absolute; left: 0; top: 0;
}

Микроразметка хлебных крошек

Я не поленился, залез в поиск, проанализировал, как на разных сайтах сделаны Breadcrumb и как эти сайты выглядят в поиске. Моя теория оказалась верной:

Есть крошки на сайте – нет микроразметки – обычный сниппет с URL.

Есть крошки – есть микроразметка – улучшенный сниппет.

Я раскопал все что нужно и сегодня вам расскажу про хлебные крошки от А до Я. Поставить их технически на сайт – это даже не пол дела – это 10%. Главная фишка, которая принесет реальную пользу – это микроразметка.

Я с микроразметкой, как с понятием, познакомился всего пару месяцев назад. Мало чего понял тогда, но попробовал настроить основные элементы для статей и комментариев. Некоторые блогеры писали, что это чуть ли не волшебная кнопка толкающая сайты в ТОП (в основном ученики школы блогеров Александра Борисова) – не знаю с чего они так решили. Мне это сомнительным показалось сразу, теперь могу сказать точно – за 2 месяца наличия микроразметки на моем сайте никаких ощутимых движений в выдаче по продвигаемым запросам я не заметил.

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

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

Для сайта, функционирующего на любом движке, в том числе и WordPress, можно создать «хлебные крошки». Это осуществляется при помощи различных плагинов, CSS и PHP. Но какой бы способ не был выбран, следует придерживаться определенных правил, позволяющих повысить оптимизацию сайта, и предотвращающих ее снижение.

При использовании линейной цепочки нельзя пропускать страницы-звенья. Последняя страница, на которой посетитель находится в данный момент, это тоже звено цепочки, и оно должно быть отображено в навигации. Иногда на сайтах в навигацию не включают конечную страницу, если это карточка товара. С точки зрения логики это может быть и верно, но для посетителя такая «обрезанная» цепочка выглядит странно, и может сбить его с толку.

Еще один важный нюанс – не стоит при создании навигации вписывать ключевые фразы, если они не очень органично вписываются. Анкор навигационной ссылки должен иметь минимальную длину. К тому же он должен быть очень точным, и притягивать в него ключ не рекомендуется.

При разработке сайта, который будет оснащен «хлебными крошками», все равно нужно тщательно продумать основное меню. Крошки не заменят его, они будут работать просто как вспомогательный инструмент, и не всем посетителям он пригодится.

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

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

Очень важно размещать цепочку на каждой странице в одном и том же месте

Для того чтобы сайт наилучшим образом выводился Гуглом, нужно сделать микроразметку строки навигации. То есть каждый шаг, ведущий от главной страницы до той, которая выводится в поисковике нужно оформить как отдельную ссылку. Это осуществляется путем обертывания каждого элемента в блок (div), и добавления атрибута (itemprop= «url»). В готовый блок нужно добавить атрибут itemprop= «title».

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

При оформлении «хлебных крошек» нужно помнить о том, что они нужны в первую очередь для повышения удобства пользования ресурсом, и только потом они несут пользу для позиций сайта в поисковых системах. При помощи цепочки посетители могут в один клик переходить на нужные страницы, что положительным образом сказывается на конверсии сайта (соотношение количества посещений к количеству полезных действий посетителей, например, покупок). Однако некорректная реализация «хлебных крошек» может привести к обратному эффекту, снизив как юзабилити ресурса, так и его показатели SEO. Чтобы проверить качество установленной навигации, можно воспользоваться аудитом поискового продвижения.

Включаем хлебные крошки у себя на блоге

Итак, включить хлебные крошки на сайте при помощи этого плагина проще простого. Заходим в раздел «Дополнительно» и передвигаем тумблер с Disabled на Enabled. Если когда-нибудь потом захотите убрать их, достаточно просто передвинуть кнопку обратно.

Если вам нравится, как настроено меню по умолчанию, его можно оставить и сохранить изменения

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

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

Находим в правой части списка файл single.php (Отдельная запись).

И вставляем вот этот код:

<?php if ( function_exists(‘yoast_breadcrumb’) ) {yoast_breadcrumb(‘<p id=»breadcrumbs»>’,'</p>’);} ?>

Сейчас я вставил код в контентную часть и на сайте он будет отображаться вот так.

Давайте я поставлю его чуть выше.

Теперь хлебные крошки отображаются лучше.

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

Вы можете снова зайти в настройки плагина и отредактировать название главной страницы, допустим, на home или заголовок вашего сайта. Больше в код лезть не понадобится. Все изменения можно производить в панели инструментов Seo Yoast.

Если вы хотите узнать больше про Yoast, посмотрите вот это видео. Здесь есть подробная инструкция по использованию этой программы и всем ее возможностям:

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

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

Для начала вам понадобится понять «Основы html», разобраться в языке разметки.

Бесплатные уроки по CSS позволят понять что такое блочная разметка и как работать с каскадными таблицами.

По завершению вы освоите новую профессию и сможете начать создавать сайты, делать верстку. Выйдете на качественно новый уровень работы.

Ну вот и все. Если вам была полезна эта публикация подписывайтесь на рассылку. Присоединяйтесь, с момента основания моего блога это сделали уже 200 человек! Я проверяю информацию, прежде чем дать вам совет. Это большая редкость в интернете.

Пользуйтесь только проверенным софтом и актуальной информацией.

До новых встреч и удачи в ваших начинаниях!

Плагины разметки для разных CMS

Добавить навигационную цепочку в сниппет можно при помощи специальных плагинов для CMS.

WordPress

Самым популярным плагином хлебных крошек для WordPress считается Breadcrumb NavXT. Есть и другие: Instant Breadcrumbs, Flexy Breadcrumb, Surbma | Yoast SEO Breadcrumb Shortcode, Breadcrumb, breadcrumb simple и еще множество.

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

• показать крошки везде — в файл header.php;

• для всех записей — в файл single.php;

• для статистических страниц — в файл page.php;

• для всех рубрик — в файл category.php.

В меню плагинов можно настроить ссылки, задать значок разделителя для ссылок.

Joomla

Добавить хлебные крошки в CMS Joomla можно с помощью модуля «Навигатор сайта», тип модуля — «mod_breadcrumbs». Он находится в Панели управления > Расширения > Менеджер модулей.

Настройка модуля

Настройте модуль под свой сайт и укажите:

позицию модуля, в которой он будет выводиться на странице (отображение позиций включается так: Расширения — Менеджер шаблонов — Настройки — опция Просмотр позиций модулей — Включено);

• название главной страницы;

• разделитель текста для элементов навигации (обычно «/»).

На главной странице хлебные крошки отображать не нужно, поэтому на вкладке «Привязка к пунктам меню» выберите опцию «На всех страницах, кроме» и отметьте пункт с домашней страницей.

Opencart

Хлебные крошки для движка Opencart устанавливают с помощью модуля. Под разные версии CMS есть разные модули: «Умные хлебные крошки» для Opencart 3.0, Правильные хлебные крошки для Opencart 2.x. Есть бесплатный модификатор, который делает неактивной ссылку на текущую страницу в хлебных крошках.

1С Битрикс

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

Moguta

Для этого движка есть бесплатный плагин Хлебные крошки. Для установки в Панели управления сайтом зайдите в раздел Маркетплейс, там найдите бесплатный плагин и запустите установку.

Установка плагина

Проверьте правильность настройки с помощью валидатора Яндекса или Google.

Для чего нужны хлебные крошки на сайте

Перед тем как перейти непосредственно к обзору модулей, пару слов скажу о том, как и зачем применятся данное решение:

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

Теоретически допускается вывод данного блока не на всех страницах. Например, у вас есть блог, где изначально предусмотрено несколько традиционных путей по сайту: теги и категории, архивы дат, авторов, а также конкретные посты. В разделах и заметках навигацию я бы оставил, тогда как в метках и датах ценность подобной информации минимальна, т.к. она просто дублирует заголовок. Если установленные плагины хлебных крошек для Вордпресс не позволяют сделать это напрямую, используйте условные операторы. Кроме того, желательно максимально и ненавязчиво оформить элемент через макет и стили.

Глупо получится, когда сразу же под цепочкой «Главная» — «Категория» — «Заголовок поста» вы видите тот же тайтл + указание текущей категории. Подобное отображение рубрик, кстати, часто встречается в стандартных WP шаблонах, поэтому после интеграции соответствующего решения желательно этот нюанс подправить. 

Заменить Home в хлебных крошках на Главная

Доброго времени суток, Коллеги! Подскажите, как решить проблему. При создании новой страницы, в хлебных крошках этой страницы Главная указана на английском Home. Как это дело привести в порядок, подскажите, Гуру! ))) Всем здоровья!

Тема изменена 1 год, 7 месяцев назад пользователем vladseverrr .

Страница, с которой нужна помощь:

Для начала разобраться как создаются хлебные крошки &#8212; это фишка темы или работает сторонний плагин? А потом перевести нужное слово или вручную в файлах темы или плагина (не самое правильное и требующее опыта решение) или с его помощью

zoltsmaster спасибо, что не обошли мою проблему стороной.

Да, это фишка темы. И я бы поправил этот файл вручную, если бы дали направление, его его искать, в каком файле&#8230;

Для этого вам следует обратиться в ТП вашей коммерческой темы п.9 правил форума.

Если Вы задаете такие вопросы &#8212; вам не нужно этого делать. Подскажу ещё раз! Попробуйте плагин-переводчик https://ru.wordpress.org/plugins/loco-translate/

гораздо проще и удобней чем loco-translate для перевода небольшого количества фраз

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

Это до первого обновления темы.

А можно как-то зафиксировать же&#8230;?

Она есть. Добавить измененный код в неё. Правильно?

вам выше дали советы по переводу/замене, которые не требуют создания дочерней темы, но вы их даже не прочитали похоже&#8230;

Yui , прочитал, попробовал &#8212; не получилось. Я не привык игнорировать советы знающих людей и искренне за них благодарен! Так как сам являюсь модератором на одном из крупнейших форумов России. )

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

Как сделать хлебные крошки WordPress без плагина?

Делается все довольно просто и всего в 2 этапа.

На первом этапе необходимо добавить функцию этих самых «хлебных крошек» (англ. — breadcrumbs) в ваш шаблон WordPress, для чего в файл functions.php (в самый конец перед ?>) шаблона вставить следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function breadcrumbs() {
$showOnHome = ; // 1 - показывать "хлебные крошки" на главной странице, 0 - не показывать
$delimiter = '»'; // разделить между "крошками"
$home = 'Главная'; // текст ссылка "Главная"
$showCurrent = 1; // 1 - показывать название текущей статьи/страницы, 0 - не показывать
$before = '<span class="current">'; // тег перед текущей "крошкой"
$after = '</span>'; // тег после текущей "крошки"
 
global $post;
$homeLink = get_bloginfo('url');
 
if (is_home() || is_front_page()) {
 
if ($showOnHome == 1) echo '

‘; } else { echo ‘

‘ . $home . ‘ ‘ . $delimiter . ‘ ‘; if ( is_category() ) { global $wp_query; $cat_obj = $wp_query->get_queried_object(); $thisCat = $cat_obj->term_id; $thisCat = get_category($thisCat); $parentCat = get_category($thisCat->parent); if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ‘ ‘ . $delimiter . ‘ ‘)); echo $before . single_cat_title(», false). $after; } elseif ( is_day() ) { echo ‘‘ . get_the_time(‘Y’) . ‘ ‘ . $delimiter . ‘ ‘; echo ‘‘ . get_the_time(‘F’) . ‘ ‘ . $delimiter . ‘ ‘; echo $before . get_the_time(‘d’) . $after; } elseif ( is_month() ) { echo ‘‘ . get_the_time(‘Y’) . ‘ ‘ . $delimiter . ‘ ‘; echo $before . get_the_time(‘F’) . $after; } elseif ( is_year() ) { echo $before . get_the_time(‘Y’) . $after; } elseif ( is_single() && !is_attachment() ) { if ( get_post_type() != ‘post’ ) { $post_type = get_post_type_object(get_post_type()); $slug = $post_type->rewrite; echo ‘‘ . $post_type->labels->singular_name . ‘ ‘ . $delimiter . ‘ ‘; if ($showCurrent == 1) echo $before . get_the_title() . $after; } else { $cat = get_the_category(); $cat = $cat; echo get_category_parents($cat, TRUE, ‘ ‘ . $delimiter . ‘ ‘); if ($showCurrent == 1) echo $before . get_the_title() . $after; } } elseif ( !is_single() && !is_page() && get_post_type() != ‘post’ && !is_404() ) { $post_type = get_post_type_object(get_post_type()); echo $before . $post_type->labels->singular_name . $after; } elseif ( is_attachment() ) { $parent = get_post($post->post_parent); $cat = get_the_category($parent->ID); $cat = $cat; echo get_category_parents($cat, TRUE, ‘ ‘ . $delimiter . ‘ ‘); echo ‘‘ . $parent->post_title . ‘ ‘ . $delimiter . ‘ ‘; if ($showCurrent == 1) echo $before . get_the_title() . $after; } elseif ( is_page() && !$post->post_parent ) { if ($showCurrent == 1) echo $before . get_the_title() . $after; } elseif ( is_page() && $post->post_parent ) { $parent_id = $post->post_parent; $breadcrumbs = array(); while ($parent_id) { $page = get_page($parent_id); $breadcrumbs[] = ‘‘ . get_the_title($page->ID) . ‘‘; $parent_id = $page->post_parent; } $breadcrumbs = array_reverse($breadcrumbs); foreach ($breadcrumbs as $crumb) echo $crumb . ‘ ‘ . $delimiter . ‘ ‘; if ($showCurrent == 1) echo $before . get_the_title() . $after; } elseif ( is_search() ) { echo $before . ‘Результаты поиска по запросу «‘ . get_search_query() . ‘»‘ . $after; } elseif ( is_tag() ) { echo $before . ‘Записи с тегом «‘ . single_tag_title(», false) . ‘»‘ . $after; } elseif ( is_author() ) { global $author; $userdata = get_userdata($author); echo $before . ‘Статьи автора ‘ . $userdata->display_name . $after; } elseif ( is_404() ) { echo $before . ‘Error 404’ . $after; } if ( get_query_var(‘paged’) ) { if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ‘ (‘; echo __(‘Page’) . ‘ ‘ . get_query_var(‘paged’); if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ‘)’; } echo ‘

‘; } }

На втором этапе необходимо сделать так, чтобы добавленная нами функция запускалась там, где нужно.

Для этого необходимо добавить в файлы single.php, page.php, archive.php, search.php шаблона следующий код:

1

<!--?php if (function_exists('breadcrumbs')) breadcrumbs(); ?-->

Для того, чтобы «хлебные крошки» отображались как у меня на сайте (перед заголовками записей), необходимо добавлять данный код в перечисленные файлы сразу после конструкции, отвечающей за вывод контента, которая во многих шаблонах WordPress выглядит следующим образом (хотя может и отличаться от представленной):

То есть как показано на рисунке:

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

Напоследок добавлю, что разработчиком данной функции является известный блогер Dimox.

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

Для настройки используют разметку Breadcrumbs. Благодаря разметке поисковикам проще считывать информацию о странице.

Советы для создания правильных хлебных крошек

На главной крошки не нужны.

Главная страница — стартовая, в цепочке навигации на главной просто нечего отображать.

Главная и товарная страницы petshop.ru

Ссылка на страницу, где находится пользователь, не нужна.

Если в крошках будет кликабельная ссылка на текущую страницу, образуется циклическая ссылка. Страница будет ссылаться сама на себя, это бессмысленно и может ухудшить ранжирование сайта.

Есть два варианта оформления хлебных крошек, чтобы избежать циклической ссылки. Название текущей страницы делают некликабельным, как на сайте apteka.ru:

Страница товара

Второй вариант — текущую страницу убирают из цепочки. В этом примере с lamoda.ru крошки заканчиваются на разделе «Декор настольный», это предыдущая страница для товара Philippi.

Cтраница товара

Привычное место для хлебных крошек — верхняя часть страницы.

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

Новость на seroundtable.com

Замените первую ссылку на ключ или бренд.

Специалист по оптимизации Сергей Кокшаров (Devaka) советует использовать потенциал первой ссылки в хлебных крошках: вместо слова «Главная» писать основное ключевое слово сайта или название бренда, если один короткий ключ подобрать не получается.

Вместо крошек вида «Главная > Продукция > Пиломатериалы > Брус» сделать «Строительные материалы > Продукция > Пиломатериалы > Брус».

Как настроить разметку BreadcrumbList на сайте

Яндекс формирует крошки по своему алгоритму. Для Google настроить разметку можно вручную с помощью разметки Schema.org.

Разметка «BreadcrumbList» — разновидность «ItemList». Она предполагает использование форматов Microdata и RDFa.

Пример разметки «BreadcrumbList» через Microdata:

Типичная ошибка разметки хлебных крошек

Пользователи часто сталкиваются с ошибкой «Отсутствует поле «id»». Ошибка обычно связана с тем, что пользователи указывают в разметке последним пунктом текущую страницу, которая, логично, не имеет ссылки, чтобы не ссылаться сама на себя. Но все item — это ссылки, так что последний пункт тоже должен быть ссылкой, иначе появляется ошибка.

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

Настройка хлебных крошек с плагином Really Simple Breadcrumb

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

Устанавливаем и активируем плагин Really Simple Breadcrumb удобным для себя способом. Я обычно это делаю через админ панель своего блога. Во вкладке «Плагины» кликаю на «Добавить новый», и в строке поиска набираю название плагина, жму на Enter.
Далее, устанавливаю, и активирую нужный мне плагин.

Для отображения хлебных крошек в файле single.php (статьи) и page.php (статические страницы), прописываем в нужном месте следующий код:

/* Убираем дубль в breadcrumbs*/
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’ );

Я это делаю выше строки отвечающей за вывод заголовка. В моем случае она выглядит так:

<h1 class=»post-title»><?php the_title() ?></h1>,

где <?php the_title() ?>— выводит заголовок.

Вот и все. Плагин работает красиво и корректно.

Если хотите убрать дубли заголовков публикаций и статических страниц блога в навигационной строке, нужно будет закомментировать пару строчек в файле breadcrumb.php установленного плагина.

Тридцатая строка выглядит так the_title();,
после комментирования так /*the_title();*/

В наших статьях дублей теперь нет.

И сорок пятая строка выглядит так echo the_title();,
после комментирования так /*echo the_title();*/ .

Теперь на статических страницах дублей тоже нет.

Также в файле breadcrumb.php в 17 строке можно изменить внешний вид разделителя на свой.

Все хорошо, но в этом варианте отсутствует микроразметка. Для чего она нужна? С микроразметкой хлебные крошки в сниппете выдачи Гугл будут отображаться вместо URL. А это внешне намного привлекательнее и повышает CTR (кликабельность).

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

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

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

Стрелочками я их отметила. Хоть они и разные, но смысл несут один, а также содержат ключевые слова.

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

Но зачем, если можно просто её изменить с помощью плагина Yoast SEO? И тем самым положительно повлиять на продвижение в поисковиках.

А делается это в редакторе самой статьи. Спускаетесь ниже, где проводится анализ seo и читабельности. Находите вкладку Дополнительно и открываете.

В строке Заголовок для «хлебных крошек» пишете своё название. Я делаю таким образом. Перед написанием статьи сперва пишу обычный заголовок. Сразу же спускаюсь в этот раздел и вписываю заголовок для крошек, который содержит ключевое слово/фразу. А потом уже стряпаю статью.

Подведём итоги:

1. Мы узнали о преимуществах хлебных крошек
2. Подключили их в разделе «Отображение в поисковой выдаче»
3. Вывели на сайт, использовав html-код
4. Поменяли название последней страницы в редакторе статьи

И всё это с помощью отличного плагина Yoast SEO!

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

А в следующем уроке нас ждёт не менее важная задача — Установить SSL и настроить переход на HTTPS.

Что это такое?

Что ж начнем с самого начала, с понятия. «Хлебные крошки WordPress» что это такое? «Хлебные крошки» или как их еще называют, навигационная цепочка – это элемент навигации по сайту. Выглядит этот элемент как путь, проложенный от главной страницы до текущей страницы. Предыстория такого названия заключена в сказке, где маленькие дети заблудились и искали путь домой по хлебным крошкам.

Проведя аналогии, сразу становится очевидными, что «хлебные крошки» в нашей ситуации – это элементы, которые помогают пользователям найти путь к той или иной странице. Эти элементы в целом и создают навигационную цепочку. А чтобы Вам было еще понятней, то вот вам пример навигационной цепочки:

Главная страница » Раздел » Подраздел » Текущая страница.

или

Главная » Статьи » wordpress » Установка и настройка темы

Чаще всего данные элементы используют на сайтах со сложной структурой, где необходимо упростить путь для посетителей сайта.

Наличие хлебных крошек на сайте позволяет:

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

Для их реализации можно воспользоваться специальным плагином или создать хлебные крошки wordpress без использования плагина.

Что такое хлебные крошки и какая у них структура

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

Обычно на этой цепочке отображается путь от главной страницы до той, на которой сейчас находится пользователь. Стандартно, выглядит это так: Главная страница — Раздел — Подраздел — Страница. 

Но встречаются и другие варианты.

Динамические хлебные крошки. Это когда навигационная цепочка отображает вложенность страниц в зависимости от пути пользователя, а не от иерархии страниц. Например, на вашем сайте есть разделы с товарами «Подарки для парня» и «Подарки для друга». Носки могут одновременно находиться в двух разделах, поэтому навигационная цепочка для страницы с этим товаром может выглядеть по-разному — в зависимости от того, как на нее попал пользователь.

Хлебные крошки с выпадающим списком. Это навигационная цепочка с более расширенным функционалом. У каждого раздела списка при наведении отображается список смежных разделов. То есть пользователь может не просто вернуться на один уровень выше, но и перейти в смежный раздел любой категории.

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

Еще можно столкнуться с примерами, когда навигационная цепочка начинается не с главной страницы сайта, а с каталога.