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

Хлебные крошки на сайте: что это такое и как они влияют на SEO

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

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

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

У дублирующей навигации есть две основные функции, а именно:

Улучшение юзабилити сайта

Положительное влияние на SEO

Хлебные крошки: какими они бывают

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

Линейная

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

Навигация здесь начинается с одного из разделов каталога, а не с главной страницы.

Система «Назад»

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

Линейная + кнопка «Назад»

Объединяет два варианта. В этом случае доступна и линейная навигационная цепочка, и кнопка «Назад».

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

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

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

Источник

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

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

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

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

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

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

Пример микроразметки хлебных крошек в формате Microdata для страницы «Кружки», которая имеет навигационную цепочку из ссылок «Главная > Каталог > Столовая > Чай и кофе»:

itemscope itemtype=http://schema.org/BreadcrumbList говорит о том, что элемент относится к хлебным крошкам и состоит из цепочки связанных веб страниц.

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

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

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

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

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

Поколение ЕГЭ. «Гензель и Гретель» братьев Гримм

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

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

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

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

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

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

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

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

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

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

Так только в категориях и это правильно, так как человек может быть не на первой странице, пример:
https://avtogsm.ru/telephone-smartfone-c549.html?offset=40

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

Бедолаги, их еще и в гугле наверное забанили.

Источник

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

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

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

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

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

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

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

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

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

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

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

Где используют хлебные крошки?

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

А вот в интернет-магазинах и форумах без хлебных крошек никуда.

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

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

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

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

Хлебные крошки с выпадающим списком

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

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

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

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

Основные функции хлебных крошек

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

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

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

Красивое представление сниппета в поиске

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

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

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

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

Каждый раздел строки – это отдельная ссылка, которая влияет на статический вес других разделов.

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

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

Ставим юзабилити выше. Главная> Заказать пиццу. Так лучше? Конечно! Гораздо симпатичнее, да и сама фраза не выбивается из вида.

На скриншоте показано, как надо прописывать ключи и как не надо.

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

Например, без наименования «Игра Switch на картридже» можно было спокойно обойтись.

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

Покажем на примере WordPress.

С плагином

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

Далее заходим в меню плагина и настраиваем отображение. Ставим разделитель “>” и добавляем ссылки.

Без плагина

В файл functions.php добавляем функцию get_breadcrumb().

Далее в single.php (макет отображение постов) вызываем эту функцию:

Если кажется сложным, можете доверить это нам.

Для Bitrix

В файле header.php шаблона сайта размещаем код вызова компонента bitrix.breadcrumb:

Для Joomla

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

В менеджере модулей Joomla создаем модуль с названием «Навигатор сайта». Далее отрывается окно настроек => Указываем позицию модуля, название главной страницы, указываем разделитель текста => Сохраняем.

Рекомендации по хлебным крошкам

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

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

Чтобы поисковый робот понимал каждый элемент на сайте и красиво показывал его в сниппете.

У нас в блоге микроразметка настроена с помощью Microdata (словарь Shema.org), вот таким образом:

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

Где type – Breadcrumblist (хлебные крошки)

itemListElement – Каждый пункт списка

name – тег с названием Хлебной крошки

item – разметка ссылки

Также пример микроразметки с помощью JSON-LD (рекомендован Google как основной способ микроразметки):

Очевидный плюс – это меньше кода.

В валидаторе получаем:

Не использовать на главной

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

Лучше располагать хлебные крошки сверху на видном месте

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

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

Использовать символ > между названиями разделов (уровней)

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

Выделяйте последний элемент жирным шрифтом

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

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

Под стиль сайту

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

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

Послесловие

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

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

Источник

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

Строим навигацию правильно

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

Навигационная цепочка в CMS Битрикс

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

«Хлебные крошки» дублируют разделы верхнего и бокового меню

В статье разберемся:

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

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

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

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

Так выглядит размеченная навигационная цепочка в сниппете в выдаче Google

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

Навигационная цепочка в сниппете в выдаче Яндекса

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

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

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

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

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

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

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

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

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

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

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

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

Эта функция позволяет пользователям перейти не только на уровень выше, но и на другие разделы каждого уровня:

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

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

Модуль SEO в системе Promopult: все инструменты для улучшения качества сайта и поискового продвижения. Полный комплекс работ — с нами вы не упустите ни одной мелочи. Чек-листы, подсказки, прозрачная отчетность и рекомендации профессионалов. Гарантии, оплата работ в рассрочку.

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

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

Какой бы способ вы ни выбрали, придерживайтесь следующих правил:

Подводим итоги

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

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

Хотите проверить, насколько грамотно и корректно формируются «хлебные крошки» на вашем сайте? Сделайте это в рамках продвинутого SEO-аудита в PromoPult.

Источник

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

В статье:

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

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

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

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

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

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

Выдача Google

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

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

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

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

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

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

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

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

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

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

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

На главной крошки не нужны.

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

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

Ссылка на страницу, где находится пользователь, не нужна.

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

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

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

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

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

Привычное место для хлебных крошек — верхняя часть страницы.

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

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

Замените первую ссылку на ключ или бренд.

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

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

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

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

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

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

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

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

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

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

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

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

Отчет в Google Search Console

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

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

WordPress

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

показать крошки везде — в файл 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 вырастет, но незначительно, а если красную, то вырастет намного больше.

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

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

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

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

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

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

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

Источник