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


Оглавление (нажмите, чтобы открыть):

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

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

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

Пример хлебных крошек на сайте

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

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

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

Как выглядит навигация хлебные крошки?

Эти навигационные цепочки в сниппете привлекают внимание, следовательно, увеличивают CTR .

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

У поисковых систем есть свои рекомендации по поводу оформления хлебных крошек, например — вот Рекомендации Google по оформлению хлебных крошек.

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

Почему «Хлебные крошки»?

Это сленговое название иронично отправляет нас к сказке братьев Гримм «Гензель и Гретель», где главных героев, брата с сестрой, отец завел в лес с целью оставить их там навсегда. Но благодаря своей находчивости сначала детям удалось вернуться домой — они кидали по дороге камешки, по которым смогли отыскать путь, а вот уже во второй раз они не смогли найти дорогу, потому что они кидали хлебные крошки, которые впоследствии склевали птицы. К слову, в сказке всё кончилось хорошо, и у вас всё будет хорошо, если будете использовать на своем сайте навигацию «хлебные крошки» 🙂

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

Хлебные крошки(breadcrumbs) – навигационная логическая цепочка, указывающая путь от главной страницы к текущей. Название «Хлебные крошки» является иронической отсылкой к немецкой сказке «Гензель и Гретель», в которой дети, когда их завели в лес во второй раз, не смогли найти обратную дорогу, так как на этот раз вместо маленьких камешков они оставляли за собой хлебные крошки, впоследствии склёванные лесными птицами.

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

В этой статье мы рассмотри виды хлебных крошек у популярных сайтов и научимся правильной разметке от shema.org.

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

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

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

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

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

Разрешается делать разделение хлебных крошек с помощью картинки как на этом сайте:

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

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

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

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

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

Нужны ли хлебные крошки в мобильной версии сайта?

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

Так же есть еще одно элегантное решение:

Выводить вместо всех крошек ссылку «Назад» — на родительскую вкладку. Пример на скриншоте ниже:

Убирать ли дублирование заголовка в хлебных крошках?

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

По данным сайта xandeadx.ru 70% ТОП20 сайтов не используют заголовок в хлебных крошках. wpschool.ru считает, это дублирование и советует убирать. Этот факт не подтвержден поисковиками, но все равно убирают заголовок «на всякий случай».

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

Микроразметка shema.org для хлебных крошек

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

Ниже предоставлен правильный код shema

Хлебные крошки в WordPress

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

Плагины хлебных крошек для WordPress

Если ваш сайт на WordPress, то существуют множество плагинов для хлебных крошек, например:

  • Breadcrumb NavXT
  • Yoast WordPress SEO
  • Breadcrumb Trail
  • Yummi «хлебные крошки»
  • Really Simple Breadcrumb
  • DP RDFa Breadcrumb Generator

Код хлебных крошек для WordPress без плагина

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

В файл functions.php вставляете следующий код:

Второй код и размещаем его в то место, где нужно вывести сами хлебные крошки:

Что такое «хлебные крошки» для wordpress и зачем они нужны?

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

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

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

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

Таким образом, плагин хлебных крошек для wordpress полезен не только посетителям, но и самому ресурсу.

Примеры плагинов для реализации хлебных крошек

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

Наиболее популярными навигационными плагинами wordpress являются:

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

Установка плагина Breadcrumb NavXT для WordPress

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

После активации в меню « Параметры » вы обнаружите новый пункт « Breadcrumb NavXT ». Кликните по нему и выставьте параметры так, как это показано ниже:


Далее выделите и скопируйте в буфер следующий код:

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

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

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

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

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

Ищите хлебные крошки сами

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

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

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

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

Хлебные крошки (Breadcrumbs) для WordPress

Привет читатели блога WordPress Mania! Если у вас, друзья, на сайте не реализованы хлебные крошки — не беда. Вы сами можете установить навигационную цепочку (ссылки) при помощи данной инструкции. И так, сегодня я покажу вам: как добавить хлебные крошки (Breadcrumbs) на сайт WordPress с помощью функции плагина Yoast WordPress SEO (надеюсь вы установили лучший многофункциональный SEO плагин).

А так же расскажу вам какие специальные плагины Breadcrumbs (хлебные крошки WordPress) существуют для этой цели. А для опытных пользователей есть возможность добавить хлебные крошки на сайт без плагина. И так, дамы и господа, читайте: Как сделать хлебные крошки в WordPress?

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

Так как этот блог для новичков объясню сначала:

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

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

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

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

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

На известных блогах Breadcrumbs присутствует, значит и нам не противопоказано. Приступим.

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

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

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

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

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

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

Мастер Йода рекомендует:  Несколько уязвимостей в Opera

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

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

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

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

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

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

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

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

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

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

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

Идём, далее. Если вы используете другой SEO плагин, не Yoast SEO, то добавить в ВорДпресс хлебные крошки можно с помощью специальных плагинов.

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

Самый популярный модуль на сегодняшний день — это Breadcrumb NavXT.

Плагин для WordPress Breadcrumb NavXT

Breadcrumb NavXT — это плагин совместимый с WordPress версий 4.0 и выше. Он генерирует локальные цепочки для вашего блога/сайта на ВордПресс. Поскольку Breadcrumb NavXT последовательно отображает иерархию страниц, она поможет обеспечить преимущества SEO.

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

И снова нам понадобится редактировать файл Отдельная запись ( single.php ) и/или Отдельная страница ( page.php ). Можно использовать файл Заголовок ( header.php ). Берём код:

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

Установка кода Breadcrumb NavXT на страницу сайта

Сохраняетесь. Открываем страницу блога и смотрим результат:

Навигационные ссылки на странице блога

Добавьте этот же код в файл Отдельная запись ( single.php, ) как показано для Yoast SEO. Хороший плагин? О, да! Не подходит? Да, без проблем.

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

Плагины хлебных крошек для WordPress

Ориентируйтесь по обновлениям. Обратите внимание на plugin SEO Breadcrumbs:

SEO Breadcrumbs (хлебные крошки)

Плагин WordPress SEO Breadcrumbs

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

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

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

Этот хак (нашел за бугром) подойдет для тех, кто не пользуется плагином . Открываем файл «Функции темы» ( functions.php ) и перед закрывающим тегом (в самом низу) ?> вставляем такой длинный код (не забудьте сделать резервную копию файла):

Обновите файл. Для вызова функции так же, как описано выше, в файлы single.php (одна запись); page.php (шаблон страницы); archive.php (архивы); search.php (результаты поиска) вставьте код:

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

Откройте файл «Таблица стилей» ( style.css ) и в конце кода вставьте:

Настройте стиль под ваш дизайн блога/сайта.

В заключение

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

Благодаря микроразметке Breadcrumbs (навигационная цепочка) встраивается в выдачу Google. В Яндекс такой функции нет, но поисковик может самостоятельно подстроить структуру сайта под шаблон микроразметки.

На этом у меня все. До новых встреч. Удачи.

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

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

Составляющие структуры сайта


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

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

  • Линейная структура – последовательное представление информации. Пользователь открывает одну страницу за другой, постепенно знакомясь с представленной на них информацией. Стандартная навигация для таких сайтов-книг – это переход на главную, предыдущую или следующую страницы. У линейной структуры может быть несколько ответвлений от главной страницы.
  • Древовидная структура – в данном случае строится иерархия, в которой от главной страницы пользователь переходит к разделам. К любому разделу могут быть открыты подразделы, к ним – также свои подразделения следующего уровня, а также конечные внутренние страницы.
  • Решетчатая структура – похожа на предыдущую, но представляет собой более сложный вариант, когда из любого раздела, с любой страницы можно перейти в любую часть сайта, в совершенно другие ветки.

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

Как осуществить оптимизацию структуры сайта?

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

Требования к главной странице

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

  • Нужно исключить наличие дублей главной страницы, доступных по разным адресам. Чтобы найти дубли, можно ввести в строку поиска Яндекса или Гугл title главной в кавычках.
  • Главная страница используется как отправная точка для навигации, представление ресурса с краткой информацией на нем. Здесь лучше не размещать запросы и не продвигать ее по ним.
  • На видном месте должны быть телефон и адрес организации (если ее деятельность предполагает возможность клиента приехать по месту ее нахождения), название, написанное текстом (не картинка или не только картинка). Обычно такую информацию размещают сверху, в шапке сайта.
  • На главной должен быть удобный каталог навигации для перехода в другие разделы и к отдельным страницам.
  • Такие элементы, как мета-теги, должны содержать наименование организации. Их следует делать короткими, ёмкими, без не несущих никакой информации знаков.

Оптимизация разделов

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

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

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

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

Работа с циклическими ссылками

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

Динамическая карта сайта

Использование динамической карты сайта в формате XML позволяет существенно увеличить скорость и эффективность индексации ресурса поисковыми роботами. Для настройки такой карты можно использовать плагин All in One SEO Pack.

Контроль уровня вложенности страниц

Большая степень вложенности страниц утяжеляет структуру сайта. Страницы с большой вложенностью хуже индексируются поисковиками. Чтобы определить страницы с большим уровнем вложенности, можно использовать ресурс Xenu Link Sleuth.

Также для оптимизации структуры рекомендуется создавать удобные для восприятия, содержащие ключевые запросы, краткие URL (так называемые ЧПУ).

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

Под хлебными крошками понимается элемент навигации, который отображается на каждой странице и представляет собой описание пути до данной страницы от главной, или иерархию уровней, которые ведут от главной страницы к той, на которой находится посетитель. Например: Главная/Автомобили/Toyota/Toyota Land Cruiser 200.

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

Использование знака копирайта

Чтобы показать, что сайт защищен от копирования, можно установить значок охраны авторского права — ©. Это стилизованная буква «с» из английского слова copyright, что означает «авторское право».

Размещают этот символ на сайте обычно в самом низу, в элементе «footer». Чтобы его использование приносило нужный эффект, и в последующем можно было использовать факт его наличия при защите своих исключительных прав собственности на сайт, необходимо оформить его в соответствии с законодательством. Регулируются нормы оформления знака в документе ГОСТ Р 7.0.1-2003 и статье 1271 ГК РФ.

Для соблюдения всех требований необходимо поместить на сайт следующую информацию:

  • Сам значок в том виде, которого требует ГОСТ (латинская буква «c», помещенная в окружность);
  • Данные владельца прав на объект (в данном случае сайт) – фамилия, имя, отчество, если это физическое лицо, и наименование, указанное как в официальных документах о регистрации, для организаций;
  • Год, когда сайт был размещен в интернете.

Правильный вид уведомления о копирайте: © ООО «Кисель», 2000-2020. Здесь важно все – даже постановка знаков препинания. Диапазон дат указывается, если на сайте периодически появляются новые данные, материалы. Если же обновлений нет, можно указать только год размещения сайта. Указание копирайта добавит сайту солидности и, если и не отпугнет мошенников, то его наличие может повысить доверие к порталу клиентов и партнеров.

Хлебные крошки на сайте — что это такое и как они помогают оптимизировать проект

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

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

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

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

Хлебные крошки на сайте — что это и зачем они нужны?

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

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

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

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

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

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

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

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

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

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

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

Ну и еще одно преимущество хлебных крошек связано с возможностью их отображения в результатах поиска, ежели вы грамотно примените микроразметку (например, Schema.org). Сравните два сниппета в поисковой выдаче Google с цепочкой навигации и без:

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

А вот для Яндекса ситуация сложнее. Если для Гугла достаточно просто внедрить разметку, то для «зеркала рунета» это обязательное, но недостаточное условие, и он формирует сниппеты с навигацией по своему разумению, в основном для крупных проектов.

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

Мастер Йода рекомендует:  Этика и нравственность в Internet

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

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

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

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

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

Обратите внимание, что основу (фон) можно оформить в виде картинок, а также средствами CSS. Оба варианта и рассмотрим, а уж потом вы выберете наиболее подходящий для себя.

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

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

Кстати, если вы умеете работать в том или ином редакторе изображений (например, в Фотошопе или его онлайн разновидности Pixlr), то сможете создать свой вариант с нужной вам цветовой гаммой, ежели в наборе не найдется подходящей.

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

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

Далее придется поработать с файлами темы Вордпресс (напомню, для новичков есть ссылка на соответствующей материал чуть выше по тексту). Пойдем по порядку.

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

Обратите внимание на то, что вам сразу необходимо в последней строке первого фрагмента кода заменить доменное имя моего блога («Goldbusinessnet.com») на заголовок вашего собственного ресурса или его домен, иначе навигационная цепочка будет отображаться некорректно:

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

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

При желании внедрить крошки в рубрики (категории) необходимо этот же код вызова таким же образом вставить в шаблон category.php или же в archive.php в зависимости от вашей темы.


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

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

Вы сразу должны вставить свою относительную ссылку на спрайт (ежели вы выбрали отличный от моего из загруженного архива), указанную в качестве параметра свойства background-image:

Далее вы можете подобрать другие значения таких свойств CSS как display, float, position. Если же все выше сказанное вы воспринимаете с трудом, то вам следует посетить этот раздел блога.

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

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

Для этого нужно заменить в соответствующем фрагменте кода стандартную функцию вывода заголовка «the_title()» на «trim_title_words(3, ‘. ‘)»:

Здесь «3» означает количество первых слов заголовка, которые будут отображаться. Естественно, вы вольны поставить свое значение. Тогда весь код для цепочки навигации будет таким:

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

Однако, чтобы эта функция заработала, надо в тот же замечательный файл functions.php внедрить еще один специальный код:

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

Навигационная цепочка или хлебные крошки

Что такое «хлебные крошки» на сайте и зачем они нужны

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

Нет, не уходите! Вы правильно зашли! Сейчас Вы во всем подробно разберетесь.

Итак, «хлебные крошки» на сайте – что же это такое?

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

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

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

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

Кстати, догадываетесь откуда оно произошло? Да, все верно. Из той самой немецкой сказки про Гензеля и Гретель, использовавших «хлебные крошки», чтобы обозначить свой обратный путь домой. Правда, с ними произошла неприятность – птицы склевали оставленную ими навигационную цепочку.

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

Вот наглядный пример навигационной цепочки «хлебные крошки»:

Нюансы и особенности, о которых нужно знать

  1. «Хлебные крошки» обычно отображаются в виде горизонтальной полосы, располагающейся в верхней части странички. Хотя вертикальные варианты также иногда встречаются, но гораздо реже.
  2. Желательно чтобы эта навигационная цепочка органично вписывалась в общий дизайн веб-ресурса, что будет формировать общее положительное мнение юзеров. Следовательно, можно сделать вывод о том, что наличие ее имеет некоторое влияние на поведенческие факторысайта, которые, в свою очередь, учитываются поисковыми системами при ранжировании результатов выдачи.
  3. А еще навигационная цепочка «хлебные крошки» имеет один нюанс, касающийся ее функционирования. Он связан с понятием «циклические ссылки» – те, которые приводят пользователя на ту же страничку, на которой он находится в момент нажатия на ссылку.

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

Что нужно уяснить

Если Вашей целью является не просто продвинуть свой сайт в ТОП поисковой выдачи, но и создать действительно качественный ресурс, который будет полезен и главное удобен для веб-пользователя, позаботьтесь о том, чтобы «хлебные крошки» присутствовали на всех страничках и указывали ему правильный путь.
Хотите побеседовать на тему статьи? Милости просим в комментарии

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

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

Навигация по странице:

Преимущества уникального сервиса

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

Как пользоваться данным модулем?

Установите специальный плагин Yoast SEO или Breadcrumb NavXT. После этого добавьте в шаблон темы специальный код от разработчиков, для вызова необходимого модуля. Для этого необходимо перейти в редактор тем, найти файл single.php и добавить туда код, который предоставили разработчики. С помощью редактирования style.css можно задать собственный стиль например изменить цвет и размер шрифта, который отображается в пути.

Устанавливаем хлебные крошки с помощью плагина Yoast SEO

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

Итак, переходим в SEO → Отображение в поисковой выдаче → «Хлебные крошки» → кликаем «Включено».

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

После того, как включили и настроили хлебные крошки — переходим в редактор тем. (Если вы впервые пользуетесь редактором тем — то при переходе даем свое согласие, нажимаем на «Я понимаю»).

Код, который предоставили разработчики плагина:

Я пошел другим путем и добавил этот код в тег div — для того, чтобы можно было задать свой индивидуальный стиль, например установить размер шрифта и цвет на свой вкус:

Разработчики плагина предлагают добавить код в: single.php и / или page.php чуть выше заголовка страницы или просто вставить код в header.php в самом конце. Я добавил код в single.php:

Прописываем необходимый стиль на свой вкус в файле style.css, я установил размер шрифта 18px и цвет # 3364c1 (светло-синий):

Добавляем этот стиль в style.css:

Готово! Вот что у нас получилось:

Заметьте, на странице имеется дубль названия статьи — его можно убрать. Для этого необходимо добавить следующий код в functions.php:

В итоге получаем:

Устанавливаем хлебные крошки с помощью плагина Breadcrumb NavXT

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

Далее, все аналогично, как и с предыдущим плагином. Нам необходимо разместить код предоставленный разработчиками. Разместите код в зависимости от того, где у вас будут отображаться хлебные крошки, например в single.php или header.php. Я добавил код в single.php:

Вот, что должно получиться после добавления кода:

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

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

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

Размещаем следующий код в single.php:

Аналогично, как с описанием предыдущих способов добавления «хлебных крошек», мы можем задать свой собственный стиль и добавить его в файл style.css. Вот вам пример:

Результат в этот раз показывать не буду ��. Вы можете поэкспериментировать с цветом и размером шрифта.

Как убрать хлебные крошки в WordPress

Для начала необходимо понять каким из способов были установлены «хлебные крошки»:

  1. Перейдите в установленные плагины и посмотрите не был ли реализован способ установки с помощью плагина Yoast SEO или Breadcrumb NavXT. Если использовался такой способ, то необходимо в настройках плагина отключить функцию показа, либо деактивировать/удалить плагин.
  2. Если плагин не был обнаружен, значит придется копаться в коде методом редактора тем и искать код в одном из файлов. В основном это: single.php, page.php или header.php. А пример кода вы можете посмотреть в одном из способов его реализации, поднимитесь немного выше.

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

Что такое «хлебные крошки» и для чего они нужны?

«Хлебные крошки» (от англ. «breadcrumbs») — это навигационная цепочка на сайте, которая отражает путь от главной страницы до текущей. Они впервые использовались в файловых менеджерах типа Norton Commander или Volkov Commander и показывали путь к корневой папке.

Для чего использовать эту дублирующую навигацию на сайте? Каким образом она влияет на юзабилити и SEO? Как ее реализовать? Ищите ответы на самые популярные вопросы о «хлебных крошках» в нашем новом посте.

Для чего используются «хлебные крошки»?


В далеком 1995 году Якоб Нильсен сформулировал 10 принципов юзабилити, первый из которых — «Видимость статуса системы». Суть его в том, что пользователь всегда должен знать, в какой части сайта он находится. Именно для реализации этого принципа нужны «хлебные крошки». Известный дизайнер Артемий Лебедев в «Ководстве» пишет, что дублирующая навигация уместна, когда есть логическая вложенность содержания, то есть почти на всех информационных сайтах. Добавим, что навигационная цепочка необходима также интернет-магазинам и корпоративным сайтам.

Мастер Йода рекомендует:  Событие onchange событие change Javascript

С точки зрения юзабилити «хлебные крошки» решают три задачи:

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

Помимо положительного влияния на юзабилити дублирующая навигация оказывает SEO-эффект:

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

Какими бывают «хлебные крошки»?

Навигационная цепочка может быть организована по разным принципам:

Линейный принцип. Это самый распространенный вариант — указывается полный путь от главной страницы до текущей. Пример — на рисунке ниже:

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

При очень сложной структуре сайта встречается урезанный вариант «хлебных крошек»:

В магазине Amazon «крошки» начинаются не с главной, а с названия раздела каталога. На скриншоте видно, что «началом отсчета» является раздел магазина «Home & Kitchen».

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

На скриншоте кнопка «Results» ведет с карточки товара на страницу с результатами поиска по запросу «Shoes».

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

В этом примере ссылки «Футболки мужские» и «Назад к обзору» дублируются, что негативно сказывается на юзабилити и SEO.

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

Удаляя и добавляя свойства, пользователь каждый раз формирует уникальный «путь» к странице с товарами.

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

Создать навигационную цепочку можно разными способами: с помощью PHP, CSS, плагинов для популярных CMS WordPress, Joomla! и других движков — в сети можно найти массу решений. Какой бы способ вы ни выбрали, придерживайтесь следующих советов:

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

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

уберите циклические ссылки — последний элемент навигационной цепочки не должен быть кликабельным (как на рисунке ниже), а прописан в виде текста:

сделайте микроразметку «хлебных крошек» — это позволит информативно отображать их в результатах поиска Google (инструкцию и примеры реализации кода можно найти в справке Google для вебмастеров):

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

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

    Хлебные крошки на сайте — что это такое и как они помогают оптимизировать проект

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

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

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

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

    Хлебные крошки на сайте — что это и зачем они нужны?

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

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

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

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

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

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

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

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

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

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

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

    Ну и еще одно преимущество хлебных крошек связано с возможностью их отображения в результатах поиска, ежели вы грамотно примените микроразметку (например, Schema.org). Сравните два сниппета в поисковой выдаче Google с цепочкой навигации и без:

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

    А вот для Яндекса ситуация сложнее. Если для Гугла достаточно просто внедрить разметку, то для «зеркала рунета» это обязательное, но недостаточное условие, и он формирует сниппеты с навигацией по своему разумению, в основном для крупных проектов.

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

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

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

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

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

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

    Обратите внимание, что основу (фон) можно оформить в виде картинок, а также средствами CSS. Оба варианта и рассмотрим, а уж потом вы выберете наиболее подходящий для себя.

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

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

    Кстати, если вы умеете работать в том или ином редакторе изображений (например, в Фотошопе или его онлайн разновидности Pixlr), то сможете создать свой вариант с нужной вам цветовой гаммой, ежели в наборе не найдется подходящей.

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

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

    Далее придется поработать с файлами темы Вордпресс (напомню, для новичков есть ссылка на соответствующей материал чуть выше по тексту). Пойдем по порядку.

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

    Обратите внимание на то, что вам сразу необходимо в последней строке первого фрагмента кода заменить доменное имя моего блога («Goldbusinessnet.com») на заголовок вашего собственного ресурса или его домен, иначе навигационная цепочка будет отображаться некорректно:

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

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

    При желании внедрить крошки в рубрики (категории) необходимо этот же код вызова таким же образом вставить в шаблон category.php или же в archive.php в зависимости от вашей темы.

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

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

    Вы сразу должны вставить свою относительную ссылку на спрайт (ежели вы выбрали отличный от моего из загруженного архива), указанную в качестве параметра свойства background-image:

    Далее вы можете подобрать другие значения таких свойств CSS как display, float, position. Если же все выше сказанное вы воспринимаете с трудом, то вам следует посетить этот раздел блога.

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

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

    Для этого нужно заменить в соответствующем фрагменте кода стандартную функцию вывода заголовка «the_title()» на «trim_title_words(3, ‘. ‘)»:

    Здесь «3» означает количество первых слов заголовка, которые будут отображаться. Естественно, вы вольны поставить свое значение. Тогда весь код для цепочки навигации будет таким:

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

    Однако, чтобы эта функция заработала, надо в тот же замечательный файл functions.php внедрить еще один специальный код:

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

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