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

Добавил пользователь Morpheus
Обновлено: 19.09.2024

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

Хлебные крошки выполняют ряд важных функций:

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

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

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

Микроразметка осуществляется путем добавления специальных HTML-тегов, которые сообщают поисковым роботам к какому типу контента относится элемент.

Поддерживаемые Google форматы микроразметки:

Далее каждому элементу навигации добавляем следующие атрибуты:

itemprop="itemListElement" itemscope itemtype item" — для разметки ссылки;
itemprop="name"> — у тега с названием хлебной крошки;
В конце блока хлебной крошки добавляем , который определяет позицию элемента в навигационной цепочке.

Существует известная проблема в том, что валидатор микроразметки выдает предупреждение, когда в коде нет атрибута itemprop="item" у последнего элемента хлебной крошки. Это возникает из-за отсутствия у элемента ссылки.

Но это не мешает поисковой системе Google корректно выстраивать цепочку ссылок в сниппете.

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

Ждите новые заметки в блоге или ищите на нашем сайте.

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

Да, сказки как-то пропустил, сразу на книжки без картинок перешел, кстати, рекомендую.

У меня был томик без картинок. Так что рекомендую)

vc.ru каким образом "это" попадает на главную виси ?

Комментарий удален по просьбе пользователя

Редактору понравилась статья

Это вся статья? Ожидал большего.

Просто это реклама сайта, а статья - замануха. Ожидать от рекламы интересного не стоит.

согласен, главное ссылку впендюрить)

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

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

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

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

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

Всем привет!

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

Значение и пример хлебных крошек

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

Хлебные крошки выделены оранжевой рамочкой. Их также называют навигационной цепочкой.

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

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

Хлебные крошки: как сделать на своем блоге?

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

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

Вот образец кода, который нужно вставить в файл functions.php:

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

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

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

Хлебные крошки на WordPress: плагин

Наиболее распространенные плагины для вывода хлебных крошек: Yoast WordPress Seo, BreadCrumb NavXT. Плагин WordPress SEO by Yoast является многофункциональным и хлебные крошки в его арсенале – лишь малая часть. Поэтому, если данный плагин у вас уже установлен, то вы можете использовать и эту его функцию.

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

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

Внести изменения в стили можно по аналогии с тем, как это было описано выше.

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

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

Такой вид более понятен и приятен для пользователя, нежели просто url страницы.

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

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

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

itemprop="url" – определяет значение url, его нужно добавить в каждый тег a

После добавления кода снова проверьте, распознали ли хлебные крошки Яндекс и Гугл.

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

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

Envato Elements: Миллионы цифровых продуктов. Неограниченная загрузка. От 16.50$ в месяц. Получить неограниченный доступ

Особенности Breadcrumbs for Elementor

Динамические хлебные крошки — автоматически создают основу хлебных крошек в иерархии страниц.
Статическая хлебная крошка — позволяет вам создавать свою навигационную крошку по своему усмотрению (вы можете очень легко добавлять / удалять элементы)
8 макетов на выбор
Широкие возможности настройки (цвета, размер шрифта)
Готова схема Google (легко включить / отключить схему Google для хлебных крошек)

Breadcrumbs for Elementor is an add-on that allows you to easily add breadcrumbs on your website using Elementor page builder. Features Dynamic breadcrumbs – automatically creates the breadcrumb base on page hierarchy. Static breadcrumb – allows you to create your breadcrumb as you wish (you can add/remove items really easy) 8 layouts to pick from Highly customizable (colors, font-size) Google Schema ready (easy to enable/disable google schema for breadcrumbs) Please check out our live demo page. Changelog 13/07/2019 - Version 1.1 Added: - Option to show or hide the custom post type parent archive 15/02/2019 - Version 1.0 Initial release.
Read more →

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

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

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

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

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

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

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

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

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

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

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

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

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

Как хлебные крошки влияют на SEO

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

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

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

Вот несколько рекомендаций, которые вы можете применить, для оптимизации хлебных крошек для SEO:

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

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

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

С помощью темы оформления.

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

А вот как будут выглядеть готовые хлебные крошки.

С помощью плагина WordPress.

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

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

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

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

Плагин Breadcrumb NavXT

Breadcrumb NavXT — это обновленная версия старого плагина под названием Breadcrumb Navigation XT. Вы можете использовать Breadcrumb NavXT для создания крошек на основе местоположения по всему сайту. Он имеет более 800 000 активных установок и популярен среди пользователей WordPress.

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

Плагин Flexy Breadcrumb

Структуры Schema являются одним из наиболее важных аспектов SEO. Этот плагин WordPress для хлебных крошек интегрирован с Google Fonts, что позволяет без проблем вписаться в дизайн вашего веб-сайта.

После установки и активации плагина перейдите в область Flexy Breadcrumb на боковой панели панели управления WordPress:

Плагин Breadcrumb

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

Как только вы установите и активируете плагин, то на панели управления вашим сайтом WordPress, сразу появится соответствующий пункт.

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

Заключение.

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

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

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

Читайте также: