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

Что такое хлебные крошки?

Навигационная цепочка (навигационное меню, «хлебные крошки», англ. Breadcrumbs) — элемент навигации по веб-сайту, представляющий собой путь по сайту от его «корня» до текущей страницы, на которой находится пользователь (Википедия). Такую строчку вы можете наблюдать у на большинстве веб-сайтов над заголовком статьи. И у меня посмотрите. Примерно, вот так:

Хлебные крошки на сайте ВордПресс

Кто то считает, что хлебные крошки не обязательно устанавливать на сайт, а кто то наоборот.

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

Google и Яндекс подчеркивают важность хлебных крошек во всех своих документах и руководствах по SEO. Причина проста: трассы Breadcrumb состоят из слов, причем чаще всего из ключевых и им есть что предложить, как роботам поисковиков, так и пользователям

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

И так, Приступим.

«Хлебные крошки» с помощью функции плагина Yoast WordPress SEO

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

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

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

Настройки Хлебных крошек в Yoast SEO

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

Как добавить «хлебные крошки» (Breadcrumbs) в вашу тему

Хлебные крошки не появятся, пока вы не вставите небольшой код на свой сайт. Начните с копирования следующего кода:

Теперь надо установить код в тему/шаблон, где будет выводиться строчка навигации. Общие места, где вы можете поместить свои хлебные крошки, находятся внутри файла single.php и/или page.php чуть выше заголовка страницы. Другой вариант, который делает это действительно простым в некоторых темах, это просто вставка кода в header.php.

В примере возьмём тему Twenty Eleven. Идем: Внешний вид — Редактор тем. Открываем файл single.php (одна запись) и вставляем код:

Вставка кода в шаблон WP

Сохраняем файл и смотрим, что у нас получилось в итоге:

Хлебные крошки от Yoast SEO

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

Заголовок этой страницы, который будет выводиться в хлебных крошках

Вот, как то, так получится:

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

Идём, далее. Если вы используете другой SEO плагин, не Yoast SEO, а например, Rank Math.

Включаем хлебные крошки в Rank Math SEO

Переходите Общие настройки — Хлебные крошки. Включение функции Breadcrumbs в SEO плагине Rank Math позволяет вам настроить хлебные крошки под ваши нужды:

Включить функцию хлебных крошек

Настраиваем и сохраняем изменение. Используйте следующий код в файлах шаблона вашей темы для отображения хлебных крошек:

Вставка кода хлебных крошек также как написано выше, для Yoast SEO.

Также добавить в ВорДпресс хлебные крошки можно с помощью специальных плагинов.

Где «хлебные крошки» на сайтах просто необходимы

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

Однако на некоторых интернет-площадках «хлебные крошки» рекомендованы к использованию:

  • онлайн-каталоги;
  • тематические форумы и блоги;
  • веб-сайты, на которых недоступна к просмотру полная структура;
  • веб-ресурсы, на которых нет карты сайта.

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

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

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

«Хлебные крошки» по структуре сайта

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

Меню-крошка с историей просмотров

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

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

Плюсы использования

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

«Хлебные крошки» и SEO

Этот навигационный инструмент косвенно влияет на SEO-продвижение веб-ресурса. Он не только помогает пользователям ориентироваться на сайте и улучшает внешний вид веб-страниц, но и позволяет повысить позиции интернет-ресурса в поисковой выдаче «Яндекса» и Google. «Хлебные крошки» выступают в качестве средства внутренней SEO-оптимизации и улучшают поведенческие факторы.

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

Перелинковка

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

Как сделать «хлебные крошки»

  • установка специального плагина, соответствующего CMS;
  • внедрение дополнительного кода в файлы сайта.

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

3 причины полюбить хлебные крошки

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

1. Улучшение юзабилити  

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

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

2. Качественная внутренняя перелинковка

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

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

Узнать детальнее про внутреннюю перелинковку и проверить ее качество можно с помощью инструментов SE Ranking. 

3. Прокачанный сниппет и рост позиций

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

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

Посмотреть, как выглядел сниппет в выдаче за разные даты, можно в SE Ranking. Для этого нужно добавить свой сайт и интересующие ключевые слова в проект. Все данные про сниппет распределены по поисковым системам и датам, хранятся в разделе «Аналитика и трафик» в течение 30 дней.

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

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

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

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

После того, как вы все сделаете – обязательно проверьте правильную работу микроразметки в специальных валидаторах Яндекса и Google, мало ли, всплывут какие-то косяки:

webmaster.yandex.ru/microtest.xmldevelopers.google.com/structured-data/testing-tool/

У меня все высветилось корректно:

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

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

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

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

  1. Стандартные. На большинстве сайтов можно проследить такой формат: Главная → Раздел → Категория → Товар.

  2. Динамические. Формируются на основании переходов между страницами. Например, если вы перейдёте на страницу товара из Раздела 1, цепочка будет выглядеть так: Главная → Раздел 1 → Товар. Если вы попадёте на страницу с тем же товаром через Раздел 2, хлебные крошки отобразятся так: Главная → Раздел 2 → Товар.

  3. Расширенные. При наведении стрелки на раздел навигационной цепочки выпадает список с вариантами перехода по смежным страницам.

  4. Сокращённые. При глубокой вложенности страниц навигационную цепочку сокращают до главной, текущей и смежных страниц. Либо оставляют название текущей страницы и кнопку «Назад».

  5. Ещё один способ сократить цепочку хлебные крошки — начать их со страницы каталога товаров, а не с главной.

Reviews

http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>lass=»plugin-reviews»>

Hello,

easy to use, very useful. Working with every template (Divi also ;))

** old review bollow, but problem fixed very quickly by the team (very reactive! good job!!)
I spend 2 days looking for a bug on one of my websites, it could not save any changes :'(
— wp 5.3.2
— template Divi 4.2.2
We just found the problem : this extension, Breadcrumb, is not compatible with Divi template.
Have a nice day,
Rashel

Easy to use, custom breadcrumbs on any page u want.
We use it on our product and category pages for easy navigation.
Perfect plugin!

This plugin displays whatever you have in your permalink (user friendly URL) and if you have a generated date in your URL it will break it down and it will show you that the day is a page, the month is another page and the year another page. I don’t recommend it…

Great Plugin

I’ve installed and configured in zero time the plugin.
I choose it because have also the shortcode option!
Is very lightweight.
Support was very fast to fix some css Astra theme problem.

Good Job

Simple and reliable!

Вариант 3:

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

<ul class=»breadcrumb-3″>
<li>
<a href=»#link»>Главная</a>
</li>
<li>
<a href=»#link»>Каталог</a>
</li>
<li>
<a href=»#link»>Хлебные крошки</a>
</li>
<li>
<a href=»#link»>Последний элемент</a>
</li>
</ul>

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

<ul class=»breadcrumb-3″>

<li>

<a href=»#link»>Главная</a>

</li>

<li>

<a href=»#link»>Каталог</a>

</li>

<li>

<a href=»#link»>Хлебные крошки</a>

</li>

<li>

<a href=»#link»>Последний элемент</a>

</li>

</ul>

ul.breadcrumb-3 {
list-style: none;
display: flex;
flex-wrap: wrap;
margin: 20px;
padding: 0;
}
ul.breadcrumb-3 li {
margin: 2px 0;
}
ul.breadcrumb-3 li a {
color: #FFF;
display: block;
background: #337AB7;
text-decoration: none;
position: relative;
height: 30px;
line-height: 30px;
padding: 0 10px 0 5px;
text-align: center;
margin-right: 23px;
font-size: 13px;
font-family: Verdana, sans-serif;
transition: all 0.3s;
}
ul.breadcrumb-3 li:nth-child(even) a {
background-color: #2d6b9f;
}
ul.breadcrumb-3 li:nth-child(even) a:before {
border-color: #2d6b9f;
border-left-color: transparent;
}
ul.breadcrumb-3 li:nth-child(even) a:after {
border-left-color: #2d6b9f;
}
ul.breadcrumb-3 li:first-child a {
padding-left: 15px;
border-radius: 4px 0 0 4px;
}
ul.breadcrumb-3 li:first-child a:before {
border: none;
}
ul.breadcrumb-3 li:last-child a {
padding-right: 15px;
border-radius: 0 4px 4px 0;
}
ul.breadcrumb-3 li:last-child a:after {
border: none;
}
ul.breadcrumb-3 li a:before,
ul.breadcrumb-3 li a:after {
content: «»;
position: absolute;
top: 0;
border: 0 solid #337AB7;
border-width: 15px 10px;
width: 0;
height: 0;
transition: all 0.3s;
}
ul.breadcrumb-3 li a:before {
left: -20px;
border-left-color: transparent;
}
ul.breadcrumb-3 li a:after {
left: 100%;
border-color: transparent;
border-left-color: #337AB7;
}
ul.breadcrumb-3 li a:hover {
background-color: #BFE2FF;
color: #000;
}
ul.breadcrumb-3 li a:hover:before {
border-color: #BFE2FF;
border-left-color: transparent;
}
ul.breadcrumb-3 li a:hover:after {
border-left-color: #BFE2FF;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

ul.breadcrumb-3 {

list-stylenone;

displayflex;

flex-wrapwrap;

margin20px;

padding;

}

ul.breadcrumb-3 li {

margin2px;

}

ul.breadcrumb-3 li a {

color#FFF;

displayblock;

background#337AB7;

text-decorationnone;

positionrelative;

height30px;

line-height30px;

padding10px5px;

text-aligncenter;

margin-right23px;

font-size13px;

font-familyVerdana,sans-serif;

transitionall0.3s;

}

ul.breadcrumb-3 li:nth-child(even) a {

background-color#2d6b9f;

}

ul.breadcrumb-3 li:nth-child(even) a:before {

border-color#2d6b9f;

border-left-colortransparent;

}

ul.breadcrumb-3 li:nth-child(even) a:after {

border-left-color#2d6b9f;

}

ul.breadcrumb-3 li:first-child a {

padding-left15px;

border-radius4px4px;

}

ul.breadcrumb-3 li:first-child a:before {

bordernone;

}

ul.breadcrumb-3 li:last-child a {

padding-right15px;

border-radius4px4px;

}

ul.breadcrumb-3 li:last-child a:after {

bordernone;

}
ul.breadcrumb-3 li a:before,

ul.breadcrumb-3 li a:after {

content»»;

positionabsolute;

top;

bordersolid#337AB7;

border-width15px10px;

width;

height;

transitionall0.3s;

}

ul.breadcrumb-3 li a:before {

left-20px;

border-left-colortransparent;

}

ul.breadcrumb-3 li a:after {

left100%;

border-colortransparent;

border-left-color#337AB7;

}

ul.breadcrumb-3 li a:hover {

background-color#BFE2FF;

color#000;

}

ul.breadcrumb-3 li a:hover:before {

border-color#BFE2FF;

border-left-colortransparent;

}

ul.breadcrumb-3 li a:hover:after {

border-left-color#BFE2FF;

}

Description

Breadcrumb is easy and light-weight plugin to display breadcrumb navigation to your WordPress site, easy to customize and change style for breadcrumb. You can use filter hook and action hook to rewrite the plugin without editing the plugin code. This plugin almost working on all WordPress pages like archive, category, tags, custom taxonomies, custom post types, defult post, date, year, month, author and search page to display breadcrumb dynamically.

Breadcrumb by http://pickplugins.com

  • Buy Premium »
  • Live Demo »
  • Support »
  • Documentation »

Tutorials

  • Install & setup
  • Limit link text
  • Customize home text
  • Change style
  • Install pro and setup (Premium)
  • Hide on archives (Premium)
  • Hide by post types (Premium)
  • Hide by post ids (Premium)

Plugin Features

Use via short-codes
You can display breadcrumb anywhere via shortcodes.

Display anywhere
Breadcrumb display on home page, any post type, page, parent pages, author page, archive page, tag page, custom taxonomy page, search page, woocommerce shop, product pages.

Custom front text
You can display custom prefix text before breadcrumb start.

Custom separator text
You can set custom separator text as you need and match with your theme. you can also hide the last separator if you want.

Limit word link text
You can limit word count or character count on link text and use set custom ending text.

Hide “Home” text
you can hide or display “Home” elements on breadcrumb

Custom font size for link text
you can set custom font size for link text

Container padding margin
Set custom margin and padding for breadcrumb container.

Custom color
you can set custom text color for link text, separator and link background color

Override via filter hook
You can override breadcrumb element via filter hook.

Premium features

Hide on archives
You can dynamically hide breadcrumb on archive pages like Front page, Home page, Blog, Author, Search, Year, Month, Date, Categories, Tags

Hide by post types
Hide breadcrumb based on different post types.

Hide by post ids
Hide breadcrumb based on post ids, you can use any post ids to hide breadcrumb to hide any specific post, Custom post types also supported.

Как выглядят?

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

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

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

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

Плагин Breadcrumb NavXT

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

Загрузить плагин можно на странице: http://wordpress.org/extend/plugins/breadcrumb-navxt/ (работает на Вордпресс не ниже 3.0 и PHP 5). После скачивания заливаем плагин в папку wp-content/plugins и активируем его в админ панели. Заметим, что если у вас уже стояла старая версия модуля, то ее необходимо отключить, или же плагин может немного глючить (не сохраняются настройки). Если выключить все же забыли и ничего не работает, то после установки выключаем его и ставим по-новому. Теперь все будет корректно запускаться.

Далее необходимо отобразить крошки в вашем шаблоне. Для этого открываем файл header.php и добавляем следующий код:

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

Итак, заходим админку ресурса, смотрим на левую панель и выбираем там пункт «Breadcrumb NavXT». Тут будет показано несколько вкладок по типу «Общие», «Текущая позиция» и т.п. На главной вкладке «Общие» расположены параметры, которые будут затрагивать все страницы сайта. Поле «Разделитель» позволяет указать символ, который будет как разделитель хлебных крошек (на наш взгляд, наиболее удачный символ – «>» – простой и понятный каждому).

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

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

Стоит взять во внимание: этот текст может учитываться поисковыми системами, как анкор. То есть, стоит указать ключевики, которые касаются вашей главной страницы

После этого сохраняем все внесённые изменения при помощи соответствующей кнопки.

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

Следующее поле «Текст текущей позиции» можно не трогать, просто потому, что оно хорошо показывает смысл перехода (этот текст будет видеть посетитель, когда наведет курсор мыши на ссылку). Вкладка «Записи/Страницы» позволяет настроить показ ссылок на страницы со контентом и статические страницы площадки (для статей можно задать надпись «Текущая статья»).

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

Плагин SEO by Yoast

В качестве альтернативы вышеописанному способу можно использовать плагин SEO by Yaost, который способен создавать очень привлекательные крошки. Его основные достоинства:

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

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

  1. В админ панели переходим в раздел «SEO – Дополнительно»;
  2. Произойдет загрузка дополнительных настроек плагина (он создан не только для отображения крошек), но конкретно нас интересует раздел «Навигационная цепочка»;
  3. Активируем крошки, но для их появления на площадке необходимо будет разместить специальный код (найти его сможете в конце этого списка);
  4. Выбираем один из разделителей, который поддерживается HTML5;
  5. Далее выбираем текст главной страницы сайта (например, «Главная», «Домой» и т.д.);
  6. Префикс – это символ или слово, которое будет отображаться перед всеми крошками на ресурсе (обычно ставят стрелочку);
  7. Далее можно выбрать префиксы конкретно для архивов, страниц результатов поиска, страницы 404;
  8. Выделять последний пункт жирным может и кому-то покажется полезным, но последняя страница часто идентична заголовку, поэтому тут решайте сами, как поступить;
  9. Последний пункт настроек – таксономия (можно выбрать между рубриками, форматами, метками);
  10. Сохраняем внесенные изменения.

После выполнения настройки необходимо добавить код в шаблон:

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

Что нужно знать при создании хлебных крошек

В процессе внедрения навигационной цепочки на сайт важно учесть несколько правил:

  1. Последнее звено цепочки (текущее положение посетителя) делайте некликабельным. В противном случае появится циклическая ссылка, которая может пагубно влиять на продвижение.
  2. На главной странице не должно быть хлебных крошек. Иначе цепочка будет включать одно звено со ссылкой на главную страницу.
  3. Расположите хлебные крошки так, чтобы они были заметны пользователям. По стандарту все привыкли видеть навигационную цепочку под шапкой. Для удобства можно продублировать её в нижней части страницы.
  4. Сочетайте хлебные крошки с микроразметкой. Поисковым системам проще считать размеченную информацию об описываемом объекте. Благодаря микроразметке поисковики узнают, что относится к цене, какая информация описывает объект, и что входит в хлебные крошки.

    Используйте популярный словарь разметки — Schema.org. Его поддерживают все поисковые системы. В WordPress для создания микроразметки хлебных крошек добавьте участок кода в нижнюю часть раздела functions.php. Пример кода:

    <div itemscope=»» itemtype=»http://schema.org/BreadcrumbList» id=»breadcrumbs»>
    <span itemscope=»» itemprop=»itemListElement» itemtype=»http://schema.org/ListItem»>
    <a rel=»nofollow» itemprop=»item» title=»Главная» href=»//yoursite.com»>
    <span itemprop=»name»>Главная</span>
    <meta itemprop=»position» content=»1″>
    </a>
    </span>
    <span itemscope=»» itemprop=»itemListElement» itemtype=»http://schema.org/ListItem»>
    <a itemprop=»item» title=»Товары» href=»//yoursite.com/tovary»>
    <span itemprop=»name»>Товары</span>
    <meta itemprop=»position» content=»2″>
    </a>
    </span>
    </div>
    В данном случае itemscope указывает на тип объекта, а itemprop описывает раздел, который нужно указать в цепочке хлебных крошек.

Google использовать форматы Microdata, RDF и JSON-LD для создания хлебных крошек. Пример кода Microdata с использованием словаря schema.org:

<ol itemscope itemtype=»http://schema.org/BreadcrumbList»>
<li itemprop=»itemListElement» itemscope
itemtype=»http://schema.org/ListItem»>
<a itemprop=»item» href=»/»>
<span itemprop=»name»>Главная</span></a>
<meta itemprop=»position» content=»1″ />
</li>
<li itemprop=»itemListElement» itemscope
itemtype=»http://schema.org/ListItem»>
<a itemprop=»item» href=»/catalog/»>
<span itemprop=»name»>Каталог</span></a>
<meta itemprop=»position» content=»2″ />
</li>
<li itemprop=»itemListElement» itemscope
itemtype=»http://schema.org/ListItem»>
<a itemprop=»item» href=»/catalog/planshety/»>
<span itemprop=»name»>Планшеты</span></a>
<meta itemprop=»position» content=»3″ />
</li>
<li itemprop=»itemListElement» itemscope
itemtype=»http://schema.org/ListItem»>
<a itemprop=»item» href=» /catalog/stolovaya/iPad/»>
<span itemprop=»name»>iPad</span></a>
<meta itemprop=»position» content=»4″ />
</li>
</ol>

Внешний вид сниппета в поисковой выдаче

Итак, я не видел смысла в такой примочке для своего блога, пока не столкнулся со вторым значением крошек – оказывается, их видят не только люди, но и поисковые системы. И поисковые системы их видят не только как внутренние ссылки, влияющие на перелинковку и распределение веса страниц, но и как важный элемент навигации. Яндекс и Google используют этот элемент для формирования сниппета. Как это выглядит, долго рассказывать не хочется, лучше один раз увидеть своими глазами:

Сниппет – это отображение сайта в результатах поисковой выдачи.

Чем привлекательнее сниппет, тем выше его кликабельность, это дает сразу двойной эффект:

  • Больше кликают, соответственно, выше трафик на сайт,
  • Кликабельность сниппета относится к поведенческим факторам и чем она выше, тем проще ресурсу карабкаться в ТОП по нужным запросам.

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

Интернет поисковик не человек, он не может заглянуть на страницу и понять – эта ссылка из меню, эта из текста статьи, а эта хлебная крошка.

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

В выдаче Google видно, что не больше 10% сайтов имеет в своем арсенале правильные хлебные крошки, остальные работают по старинке, высвечивая в сниппете URL страницы.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector