Скидка 35 % на курсы маркетинга – до 1 декабря

Скидка 35 % на курсы маркетинга – до 1 декабря

Подробнее
mail@texterra.ru
Заказать звонок
Заказать услугу
Позвонить: 8 (800) 775-16-41
Связаться со мной

Растем как на дрожжах – полный гайд по… хлебным крошкам

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

Растем как на дрожжах – полный гайд по… хлебным крошкам
Дата публикации: 31 мая 2022
Сергей Ломакин
3 258
Время чтения: 9 минут
Растем как на дрожжах – полный гайд по… хлебным крошкам Редакция «Текстерры»
Редакция «Текстерры»

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

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

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

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

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

Хлебные крошки – это просто навигационная цепочка, созданная для удобства пользователя

Хлебные крошки на странице результатов поиска Google

А так навигационная цепочка выглядит на странице сайта:

Хлебные крошки можно встретить в Википедии

Навигационная цепочка может располагаться на странице сразу под заголовком

В интерфейсе программ тоже есть хлебные крошки. Например, в Windows:

Навигационная цепочка улучшает пользовательский опыт и помогает ему ориентироваться

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

Хлебные крошки нужны на любом сайте, особенно если у них усложненная структура.

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

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

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

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

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

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

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

Стандартная цепочка

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

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

Стандартные хлебные крошки на сайте маркетплейса Amazon

Цепочка с раскрывающимися списками

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

Сложные хлебные крошки включают в себя смежные разделы сайта

Так выглядят хлебные крошки с раскрывающимися списками

Динамические хлебные крошки

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

Динамические хлебные крошки можно увидеть на сайте «М.Видео»

Характерный маркет динамических хлебных крошек – нахождение страницы сразу в двух-четырех (редко) разделах сразу

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

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

Как сделать расширенный сниппет: очень подробное руководство

Как сделать расширенный сниппет: очень подробное руководство

В словаре schema.org для разметки хлебных крошек используется схема BreadcrumbList. Обратите внимание на обязательные и необязательные свойства breadcrumbs:

BreadcrumbList – это ItemList, состоящий из цепочки связанных веб-страниц, обычно описываемых с использованием URL-адреса и названия

BreadcrumbList – это ItemList, состоящий из цепочки связанных веб-страниц, обычно описываемых с использованием URL-адреса и названия

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

<ul itemscope itemtype="https://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a href="/" title="Домашняя" itemprop="item"> <span itemprop="name">Домашняя</span> <meta itemprop="position" content="0"> </a></li> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a href="/razdel/" title="Раздел" itemprop="item"> <span itemprop="name">Раздел</span> <meta itemprop="position" content="1"> </a></li> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a href="/razdel/podrazdel/" title="Субраздел" itemprop="item"> <span itemprop="name">Субдраздел</span> <meta itemprop="position" content="2"> </a> </li> </ul>

Теперь разберем обязательные атрибуты breadcrumbs для schema.org и взглянем на HTML хлебных крошек подробнее:

  • itemscope и itemtype показывает краулеру ПС, какой объект находится на странице. В нашем случае itemtype=https://schema.org/BreadcrumbList. Элемент BreadcrumbList – это список навигационной цепочки.
  • itemprop="itemListElement" – значение используется, чтобы показать, что item выступает в качестве самостоятельного пункта списка-листа.
  • itemprop="item" – размечает URL.
  • itemprop="name" – имя навигационной цепочки.
  • meta itemprop="position" content="%number%" – невидимый тег. Используется для указания расположения элемента в цепочке.

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

Хлебные крошки schema.org можно проверить при помощи нескольких инструментов. Сперва попробуйте «Инструмент проверки расширенных результатов поиска». При помощи него вы узнаете, на какие сниппеты и формы расширенных результатов может рассчитывать ваша страница.

«Инструмент проверки расширенных результатов поиска» и «Валидатор разметки schema.org»

Если хлебные крошки на странице опознаны корректно, нужно осуществить проверку «Валидатором разметки schema.org»

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

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

Breadcrumb NavXT – плагин созданный на основе Breadcrumb Navigation XT

Интерфейс Breadcrumb NavXT в 2022 году

Breadcrumb NavXT автоматически создает хлебные крошки для любого WP-сайта – опыт кодинга не понадобится. Breadcrumb NavXT тоже позволяет редактировать классы и менять код хлебных крошек.

При помощи Breadcrumb NavXT вы сможете:

  • работать с хлебными крошками сразу на нескольких сайтах на уровне администратора сети;
  • создавать хлебные крошки, размеченные схемой BreadcrumbList (поддерживается только синтаксис RDFa и словарь schema.org);
  • управлять хлебными крошками через встроенные в WordPress виджеты.

Еще один вариант – плагин Yoast SEO.

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

Так активировать хлебные крошки можно в англоязычной версии Yoast SEO

Вот подробная инструкция, как установить хлебные крошки на свой сайт при помощи Yoast SEO.

  1. Откройте раздел «Плагины» в административной панели WordPress.
Авторизуйтесь в админке WordPress и откройте раздел «Плагины». Нажмите «Добавить новый»

Добавляем новый плагин

  1. Укажите название плагина в поисковой строке:
Находим Yoast SEO в разделе «Добавить плагин»

Указали название плагина в поисковой строке

  1. Активируйте плагин в этом же разделе («Плагины»). Для этого нажмите кнопку «Активировать» (кнопка «Установить» в течение минуты после нажатия превратиться в кнопку «Активировать»).
  2. Откройте настройки плагина и перейдите в раздел «Цепочки навигации»:
Настройте хлебные крошки вручную

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

  1. Сохраните настройки плагина, нажав кнопку «Сохранить изменения» внизу страницы.
  2. Откройте раздел «Внешний вид» и вкладку «Редактор тем»:
Редактор тем позволяет редактировать любые файлы темы прямо из админки WordPress

Открываем редактор тем в админке WordPress

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

Редактируйте тот файл, где должна показываться навигационная цепочка

Файлы темы Astra в «Редакторе тем» WordPress

  1. Если хлебные крошки должны выводиться на всех страницах сайта, добавляем код в заголовок. Находим заголовок сайта (header.php) в «Редакторе тем» и добавляем следующий фрагмент кода:

if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb( ' ','' ); }

Внимание: header должен быть доступен для редактирования на вашей теме. Код Yoast SEO необходимо добавлять между тегами <?php и ?>.

Не забудьте сохранить настройки редактируемого файла, нажав «Обновить» внизу страницы.

Также добавить хлебные крошки страниц на WordPress вы можете, выбрав стороннюю тему, которая поддерживает breadcrumbs. Например, Root, Compasso, Hestia, Pixwell, Reboot, OGS, Astra. Многие из них можно купить на ThemeForest.

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

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

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

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

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

  1. Откройте модуль «Управления структурой».
Выберите необходимую страницу в «Управлении структурой»

Так выглядит управление структурой сайта в Bitrix

  1. Перейдите в настройки.
  2. Найдите строку «Настройки для сайтов».
  3. В столбце «Тип» добавьте следующую строку: not_show_nav_chain.
  4. В столбце «Название» дайте созданному свойству имя, например, «Запретить показ навигационной цепочки» или «Не показывать».
Скрыть хлебные крошки можно в «Настройках для сайтов»

Создали новое свойство not_show_nav_chain

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

В свойствах раздела – указываем запрет необходимого параметра

Задаем запрет вывода хлебных крошек на уровне раздела

Чтобы запретить вывод хлебных крошек, укажите букву Y (от английского Yes). Сохраните настройки страницы или раздела. Все, Bitrix не будет вводить хлебные крошки на указанной странице или в указанном разделе.

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

Для этого не нужны плагины и расширения, как на других CMS.

  1. Откройте раздел «Меню» и найдите блок ME605:
Для быстрого нахождения блока ME605 можно использовать поисковую строку

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

  1. Укажите имя для каждой цепочки и URL, с которым связана веб-страница из хлебных крошек.
Как вывести сайт на «Тильде» в топ поиска – это проще, чем кажется

Как вывести сайт на «Тильде» в топ поиска – это проще, чем кажется

Резюме

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

Главные преимущества хлебных крошек:

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

© «TexTerra», при полном или частичном копировании материала ссылка на первоисточник обязательна.
Нашли ошибку в тексте? Выделите нужный фрагмент и нажмите ctrl + enter.

Закажите бесплатную консультацию

Оставьте свои контакты,
мы свяжемся с вами в ближайшее время.

Ошибка заполнения!