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

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

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

Поделиться этим постом

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

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

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

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

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

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

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

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

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

2. Виды хлебных крошек

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

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

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

В продвижении SEO хлебные крошки играют важную роль:

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

В процессе внедрения навигационной цепочки на сайт важно учесть несколько правил:

Используйте популярный словарь разметки — Schema.org. Его поддерживают все поисковые системы. В WordPress для создания микроразметки хлебных крошек добавьте участок кода в нижнюю часть раздела functions.php. Пример кода:

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

Google рекомендует использовать форматы Microdata, RDF и JSON-LD для создания хлебных крошек. Пример кода Microdata с использованием словаря schema.org:

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

Быстрый способ создать хлебные крошки — подключить плагин CMS. Для WordPress используйте популярные плагины Breadcrumb NavXT или SEO Yoast. Рассмотрим пример с Breadcrumb. Для отображения навигационной цепочки нужно скачать плагин и добавить код в header.php, если хлебные крошки нужны на каждой странице. Пример кода:

Редактируйте настройки отображения цепочки в соответствующем разделе плагина:

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

После сохранения настроек хлебные крошки появятся на сайте:

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

В Joomla подключение хлебных крошек доступно в разделе «Менеджер модулей» панели управления:

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

Настройка навигационной цепочки также возможна и вручуную. Пропишите код и добавьте его в место будущего отображения хлебных крошек в HTML. Если они нужны на всех страницах — добавьте код в раздел header.php либо добавьте в раздел functions.php. Пример:

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

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

Источник

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

В сказке братьев Гримм Гензель и Гретель так и не смогли вернуться домой по хлебным крошкам, так как их склевали птицы. У нас, в 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. Обратите внимание на стрелочку, которая ведет от каталога товаров – во-первых, это очень интуитивно, а, во-вторых, пользователь сразу видит, откуда он начал свой путь.

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

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

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

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

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

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

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

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

Послесловие

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

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

Источник

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

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

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

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

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

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

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

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

Виды хлебных крошек

Существует три основных тип хлебных крошек. Давайте посмотрим на них поближе.

1.Основанные на местоположении.

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

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

2.Основанные на атрибутах.

Показывают аттрибуты страницы. Например, на этом скриншоте показано, что мы находимся на странице с компьютерами с процессором Intel Core i7.

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

3.Основанные на истории.

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

В основном это выглядит так: Главная> Предыдущая страница> Предыдущая страница> Предыдущая страница> Текущая страница.

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

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

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

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

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

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

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

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

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

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

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

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

Вам нужно здесь изменить анкор и ссылку на главную страницу своего сайта:

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

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

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

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

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

Получилось вот так:

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

Ну а теперь, на этом все на сегодня. До встречи в следующих постах.

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

Александр, дайте задание на фрилансе сделают

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

Всё, сделал себе эту функцию на блоге. Спасибо, Николай.

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

Источник

Почему хлебные крошки полезны для SEO

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

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

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

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

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

Но встречаются и другие варианты.

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

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

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

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

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

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

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

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

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

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

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

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

3 причины полюбить хлебные крошки

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

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

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

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

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

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

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

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

2. Качественная внутренняя перелинковка

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

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

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

Узнать детальнее про внутреннюю перелинковку и проверить ее качество можно с помощью инструментов SE Ranking.

3. Прокачанный сниппет и рост позиций

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

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

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

Посмотреть, как выглядел сниппет в выдаче за разные даты, можно в SE Ranking. Для этого нужно добавить свой сайт и интересующие ключевые слова в проект. Все данные про сниппет распределены по поисковым системам и датам, хранятся в разделе «Аналитика и трафик» в течение 30 дней.

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

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

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

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

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

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

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

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

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

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

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

Можно использовать специальные плагины (Breadcrumb NavXT, SEO by Yoast) или настроить хлебные крошки самостоятельно.

С плагином

Для этого скачиваем плагин (бесплатно, но должна быть версия не ниже WordPress 3.0 и хост должен поддерживать PHP5).

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

Пример кода для добавления:

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

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

Без плагина

Программный код WordPress прост и добавить в него код хлебных крошек тоже не составит особого труда.

Для этого найдите файл functions.php и вставьте туда следующий код:

Главное правило — не вставляйте эту функцию внутри другой функции, чтобы не было конфликта.

Теперь, чтобы хлебные крошки отображались на сайте, просто поместите код «вызова хлебных крошек” в те места, где они должны быть:

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

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

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

Модуль навигатора по сайту позволяет посетителям понять, где они находятся, и при необходимости вернуться обратно.

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

Что такое хлебные крошки в интернет терминологии. Смотреть фото Что такое хлебные крошки в интернет терминологии. Смотреть картинку Что такое хлебные крошки в интернет терминологии. Картинка про Что такое хлебные крошки в интернет терминологии. Фото Что такое хлебные крошки в интернет терминологии

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

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

Только код необходимо вручную проставить на всех страницах.

Почему у вас еще нет хлебных крошек?

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

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

А как обстоят дела с хлебными крошками на вашем сайте? Все правильно настроили?

Источник

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *