Как сделать хлебные крошки на сайте 🍞 [Полное руководство + бонус]

Всё о хлебных крошках в SEO: зачем нужны, как добавить на сайт, какую разметку внедрить. Решения для WordPress, Bitrix, Joomla и других CMS.

Обновленный материал.

В статье:

1. Что такое хлебные крошки
2. Зачем они в SEO и каким сайтам нужны
3. Как добавить разметку с хлебными крошками на сайт
4. Как проверить правильность настройки
5. Автоматизация: плагины для разных CMS
6. Бонус: фишка для повышения CTR в выдаче

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

Разберемся, каким сайтам нужна такая разметка и как ее настроить правильно.

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

Товарная страница citilink.ru

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

Выдача Google

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

Каким сайтам нужны хлебные крошки и чем они полезны в SEO

Польза разметки «Breadcrumbs»:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Еще по теме:
Как внедрить микроразметку информации Schema.Org на сайт

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

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

<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/woman/">
<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/woman/dress/">
<span itemprop="name">Платья</span></a>
<meta itemprop="position" content="4″ />
</li>
</ol>

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

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

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

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

Проверить внедрение микроразметки можно с помощью инструментов от ПС: инструмента Google и валидатора Яндекса.

В обновленной версии Google Search Console внедрили отчет «Breadcrumbs», в русской версии он называется «Строки навигации» и находится в категории «Улучшения». Отчет показывает ошибки, связанные с отображением микроразметки в выдаче Google.

Отчет в Google Search Console

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

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

WordPress

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

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

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

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

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

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

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

Joomla

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

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

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

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

Opencart

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

Webasyst

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

Настройка плагина

1С Битрикс

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

Moguta

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

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

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

Бонус: фишка для повышения CTR в выдаче с помощью хлебных крошек

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

Читатель блога PR-CY и оптимизатор Витя Смертный поделился своим опытом работы с сайтом 100.ks.ua: чтобы сделать сниппет в выдаче заметнее, он добавил пару тематических эмодзи в описание и хлебные крошки.

Сниппет сайта в выдаче

После добавления эмодзи сниппет показал рост кликабельности. Он стал заметнее на белом фоне выдачи.

График с CTR сниппетаРост CTR сниппета

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

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

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

Эмодзи не отображается

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

Выбор эмодзи для автомобильной тематики

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

Красные маркеры

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

Перебор элементов

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

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

Обновила Елена Жмурина

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

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

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

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

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

Создавайте потрясающие сайты

С лучшим бесплатным конструктором страниц Elementor

Начать сейчас

Панировочная крошка NavXT — это плагин WordPress, 800 000+ активных установок, он используется для создания навигационных ссылок Breadcrumb на веб-сайтах WordPress. Этот плагин WordPress позволяет настроить его под нужды любого сайта WordPress.

Breadcrumb NavXT очень прост в использовании с простым интерфейсом, в то время как для многих других увлекательных пользователей он обеспечивает прямой доступ.

Ключевая особенность

• Формат RDFa
• Обширный контроль настройки
• Соответствующие значения по умолчанию

• Встроенный виджет WordPress
• Расширяется через ООП
• Совместимость с WPML

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

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

Шаблоны ссылок, доступные на странице настроек, используют параметры Schema.org, и вы можете изменить эти шаблоны ссылок навигации Breadcrumb.

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

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

Как отображать ссылки на хлебные крошки NavXT на вашем веб-сайте

Чтобы наконец задействовать ссылки Breadcrumb, вам нужно перейти на панель «Внешний вид» и выбрать «Настроить».

Выберите Breadcrumb NavXT в поле Источник Breadcrumb.

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

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

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

Ключевая особенность

• Разрешает хлебные крошки сайта
• Автоматически устанавливать канонические URL
• SEO-анализ

• Анализ читабельности
• Предварительный просмотр фрагмента
• FAQ и как заблокировать

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

После активации плагина Yoast SEO перейдите в панель SEO, а затем в Search Appearance. Перейдите на вкладку «Панировочные сухари» и включите параметр «Включить хлебные крошки».

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

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

Как отображать ссылки Yoast SEO на вашем веб-сайте

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

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

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

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

Как отобразить их на своем сайте — Go WordPress

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

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

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

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

В этом посте мы более подробно рассмотрим навигационные ссылки WordPress и то, как они могут улучшить ваш пользовательский опыт (UX) и поисковую оптимизацию (SEO). Затем мы покажем вам несколько различных способов добавить эти ссылки на ваш сайт WordPress.com. Давайте начнем!

Что такое навигационные ссылки WordPress Breadcrumb (и почему они важны для вашего сайта)

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

Важно отметить, что навигационная цепочка служит несколько иной цели, чем главное меню навигации.

Какова цель навигационной цепочки WordPress?

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

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

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

США > Нью-Йорк > Чем заняться > Бесплатные достопримечательности

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

США > Нью-Йорк > Чем заняться > Активный отдых

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

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

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

Как добавить навигационную цепочку на ваш сайт WordPress.com (2 метода)

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

Если вы являетесь пользователем WordPress.com, вам нужно будет использовать план с поддержкой плагинов для доступа к плагинам, упомянутым в этом руководстве.

1. Используйте плагин WordPress

Один из самых простых способов добавить навигацию по крошкам на ваш сайт — использовать бесплатный плагин. Давайте рассмотрим два популярных варианта: All in One SEO и Breadcrumb NavXt.

Добавление хлебных крошек с помощью All-in-One SEO

All-in-One SEO (AIOSEO) — один из самых мощных SEO-плагинов на рынке WordPress:

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

Для начала перейдите на Плагины > Добавьте новый в панель инструментов WordPress.com и выполните поиск «Все в одном SEO». Затем нажмите Установить сейчас , а затем Активировать :

Это приведет вас к мастеру установки плагина. Нажмите Давайте начнем :

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

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

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

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

После завершения настройки вернитесь на панель управления WordPress.com и перейдите к All in One SEO > . Общие настройки . Затем выберите в меню Breadcrumbs :

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

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

[aioseo_breadcrumbs]

Если вы используете редактор блоков, вы можете просто добавить Shortcode блок в свой пост и вставь туда код:

Кроме того, вы можете отобразить свою навигационную цепочку через специальный блок Гутенберга. Для этого вам просто нужно вставить блок AIOSEO — Breadcrumbs в свой пост:

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

Чтобы добавить его на свой сайт, перейдите на Внешний вид > Виджеты . В настройщике выберите параметр Widgets , найдите AIOSEO — хлебные крошки и добавьте его на боковую панель:

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

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

Кроме того, вы можете настроить метки для страницы архивов, страницы результатов и ошибок 404:

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

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

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

Одним из таких инструментов, который вы можете использовать, является Breadcrumb NavXT. Этот плагин создает «хлебные крошки» для вашего сайта WordPress. Это также позволяет вам настроить их в соответствии с вашими потребностями и предпочтениями.

После того, как вы установили и активировали плагин, перейдите в Настройки > Breadcrumb NavXT на панели управления WordPress. Здесь вы можете настроить параметры для различных цепочек навигации на вашем сайте:

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

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

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

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

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

Чтобы отобразить хлебные крошки на вашем сайте, перейдите к Внешний вид > Виджеты . Затем снова выберите Widgets в меню. Здесь вы можете добавить виджет Breadcrumb NavXT на боковую панель:

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

2. Используйте тему WordPress.com

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

TextBook

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

Тема имеет сложную иерархию страниц, как вы можете видеть в верхней части этого снимка экрана:

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

Sequential

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

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

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

Edin

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

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

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

Заключение

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

В этом посте мы рассмотрели два разных способа добавить навигацию по хлебным крошкам на свой сайт WordPress:

1. С помощью мощного SEO-плагина, такого как All in One SEO или Breadcrumb NavXt

.

2. С помощью темы WordPress. com, которая содержит навигационные ссылки, такие как TextBook, Sequential или Edin

Нравится:

Нравится Загрузка…

Как легко добавить навигационную цепочку в WordPress

Хотите знать, как легко добавить навигационную цепочку в WordPress?

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

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

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

• Что такое навигационная цепочка?
• Преимущества добавления навигационных цепочек на ваш сайт
• Простое добавление навигационных цепочек в WordPress
• Настройка навигационных цепочек 
• Использование профессиональных шаблонов навигационных крошек

Что такое навигационные крошки?

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

Вот пример навигационной цепочки:

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

Существует 2 основных преимущества использования хлебных крошек на вашем сайте WordPress, а именно:

1. Улучшение пользовательского интерфейса
2. Увеличение SEO (поисковая оптимизация)

Давайте углубимся в эти 2 фактора, чтобы лучше объяснить, как они связаны с использованием хлебных крошек на вашем сайте.

1. Хлебные крошки улучшают взаимодействие с пользователем

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

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

2. Хлебные крошки улучшают SEO

Хлебные крошки также помогают поисковым системам лучше ориентироваться на вашем веб-сайте и понимать его структуру.

Добавление навигационной цепочки на ваш сайт может улучшить SEO по следующим причинам:

• Более низкий показатель отказов: «Хлебные крошки» могут снизить показатель отказов, поскольку они помогают пользователям дольше оставаться на вашем веб-сайте. Например, вместо того, чтобы вернуться на страницу результатов поиска, они могут вернуться на главную страницу, чтобы найти дополнительную информацию.
• Увеличение CTR (Click-Through-Rate): Поскольку Google может отображать навигационную цепочку в результатах поиска, это побудит больше людей перейти на ваш сайт. Они могут легко увидеть, о чем ваша страница, прямо из результатов поиска.
• Улучшение рейтинга SEO: Более высокий рейтинг кликов и более низкий показатель отказов коррелируют с улучшенным рейтингом в поисковых системах. Чем больше людей переходит на ваш сайт и чем дольше они остаются на нем, тем больше Google будет отдавать предпочтение вашему сайту в результатах поиска. Он увидит, что ваш сайт предоставляет полезную информацию.

Теперь, когда вы знаете, что такое хлебные крошки и как они могут улучшить SEO, мы покажем вам, как легко добавить их на свой сайт с помощью лучшего SEO-плагина для WordPress All in One SEO (AIOSEO).

Простое добавление навигационных цепочек в WordPress

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

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

Добавление хлебных крошек с помощью шорткода WordPress

Для начала вам необходимо установить и активировать AIOSEO на своем веб-сайте WordPress. All in One SEO – это полноценный SEO-плагин для WordPress, который содержит множество мощных инструментов и функций для SEO.

С учетом вышесказанного, если вы никогда раньше не устанавливали плагин, посетите руководство WPBeginner о том, как установить плагин WordPress.

После установки AIOSEO перейдите в меню All-in-One SEO » General Settings, и нажмите на Breadcrumbs таб.

Здесь нужно проверить, чтобы кнопка Enable Breadcrumbs была синей, и все готово.

Затем нажмите значок Shortcode и скопируйте под ним шорткод AIOSEO Breadcrumbs:

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

Просто вставьте шорткод AIOSEO Breadcrumbs в свой пост или на страницу и нажмите кнопку «Обновить».

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

Вот так просто!

Добавление навигационных цепочек с помощью блока Gutenberg

Вы также можете добавить свою навигационную цепочку с помощью предустановленного блока AIOSEO Breadcrumbs Gutenberg .

Чтобы начать, перейдите к сообщению или странице, которую вы редактируете, и нажмите на знак плюса, чтобы создать новый блок. Затем используйте экран поиска для поиска «хлебных крошек» и AIOSEO — Breadcrumbs 9.Появится блок 0029.

Просто нажмите на него, и он будет добавлен в ваш пост или на страницу.

Вот оно!

Добавление навигационных цепочек для всего сайта с помощью кода PHP

Вы можете легко добавить навигационные крошки для всего сайта с помощью фрагмента кода PHP.

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

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

Перейдите к Внешний вид в настройках WordPress и щелкните вкладку Редактор тем .

Затем перейдите к файлу header.php в Theme Files и вставьте фрагмент кода PHP после отметки.

Теперь сохраните настройки, и все!

После обновления файла header.php на все ваши страницы будет добавлена ​​навигационная цепочка.

Вот так:

Хорошо выглядит, правда?!

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

Чтобы добавить хлебные крошки на свой сайт с помощью опции виджета, вам нужно перейти на Внешний вид » Виджеты . И если ваша тема поддерживает области виджетов, вы увидите их справа.

С левой стороны вы увидите список доступных виджетов. Нажмите на виджет AIOSEO – Breadcrumbs и перетащите его в область виджетов, где вы хотите его разместить.

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

Вот так:

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

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

Изменение разделителя хлебных крошек

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

Чтобы просмотреть все доступные разделители, просто нажмите на ссылку Показать еще .

Добавление или удаление ссылки на домашнюю страницу

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

Вы также можете добавить свой собственный ярлык домашней страницы . Просто введите текст по вашему выбору прямо в поле.

Добавление префикса перед навигационной цепочкой

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

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

Отображение страницы вашего блога в навигационной цепочке

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

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

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

Не забудьте сохранить настройки, когда закончите.

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

Настройка формата архива

В настройке Формат архива можно изменить метку для страницы архивов.

Просто введите текст по вашему выбору перед текстом по умолчанию Имя типа сообщения смарт-тег.

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

Таким образом, в настройке Search Result Format вы просто вводите свой собственный текст перед тегом Search String .

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

Форматирование метки ошибки 404

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

Вот как это может выглядеть:

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

Чтобы начать форматирование метки 404, просто введите собственный текст в поле 404 Error Format , и он будет добавлен в навигационную цепочку.

Отображение и связывание форматов хлебных крошек

Вы можете показать или скрыть свои сообщения, архив, поиск и форматы 404. А также связывать или не связывать их.

Просто перейдите к настройке Current Item и переключите Show current Item и Link current Item кнопки включения или выключения.

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

Использование шаблонов навигации Pro

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

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

Тем не менее, давайте покажем вам, как настроить шаблоны хлебных крошек.

Настройка шаблонов навигации

AIOSEO предоставляет вам полный контроль над редактированием всех шаблонов навигации с помощью предварительно установленных смарт-тегов или непосредственного редактирования кода HTML.

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

Использование смарт-тегов для настройки навигационной цепочки

Самый простой способ настроить шаблоны навигационной цепочки — использовать предустановленные смарт-теги AIOSEO с различными переменными.

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

И вы можете найти широкий выбор переменных, нажав на ссылку View all tags или используя символ # .

Вот так просто!

Редактирование HTML-кода для настройки навигационных цепочек

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

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

Не забудьте сохранить изменения.

This entry was posted in Популярное