Хлебные крошки в яндексе. "Хлебные крошки" - что это такое? Примеры навигации

20.08.202327.05.2017

Давайте для начала разберемся — что это такое — хлебные крошки на сайте и зачем они нужны.

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

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

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

1. Внутренняя перелинковка

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

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

2. Поведенческие факторы

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

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

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

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

Главная

Теперь рассмотрим, что это такое.

Первое, что нам необходимо сделать — это обернуть каждую ссылку в тег и в самом теге прописать
itemscope=»» itemprop=»itemListElement» itemtype=»http://schema.org/ListItem»

ССЫЛКА

Этот тег у нас остается по умолчанию. В нем мы говорим поисковикам — что вот это разметка schema и элемент этой разметки называется itemListElement. Данная конструкция используется во всех ссылках.

Главная

Соответственно, если бы у нас был второй уровень вложенности, надо было бы написать content=»2″.

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

Навигационная цепочка: что это такое?

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

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

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

«Хлебные крошки» на сайтах

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

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

Примеры использования хлебных крошек

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

В общем виде выглядит система навигации следующим образом:

переход от центральной страницы к статье через какой-либо раздел сайта;
переход от центральной страницы к статье через публикационный архив.

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

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

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

Основные функции и преимущества использования навигации на сайте

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

Применение навигации имеет следующее назначение:

Оптимизация внутренней структуры сайта.
Связывание отдельных страниц ресурса ссылками (наращивание внутренней ссылочной массы).
«Помощь» поисковым роботам в «исследовании» веб-площадки. Так, «хлебные крошки» выполняют те же функции, что и карта сайта и Robots.txt, дополняют данные элементы.
Положительно влияет на число кликов на рекламные ссылки и баннеры за счет того, что навигационная цепочка имеет связь с Uniform Resource Locator (URL) при выдаче.
Повышает релевантность - уровень соответствия результатов поиска ожиданиям поиска.

Почему успешным ресурсам не обойтись без навигации?

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

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

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

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

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

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

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

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

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

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

Далее в файл следует вставить код. Еще одна часть кода вставляется туда, где в конечном итоге должны быть расположены «хлебные крошки» на сайте. Как правило, это конструктивные элементы шаблона сайта - файл index.php или single.php. В заключение можно оформить навигационную цепочку особым образом, настроить стили, в чем помогут элементарные знания CSS.

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

Навигационная цепочка для CMS Joomla

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

Специальный модуль имеет название «mod_breadcrumbs». Найти его можно в «Менеджере модулей», который расположен в категории «Расширения» общей панели управления. Далее остается только произвести настройки «хлебных крошек».

«Хлебные крошки» с помощью плагина Breadcrumb NavXT для wordpress

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

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

if(function_exists("bcn_display"))

Другие варианты внутренней оптимизации

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

Так, меры по продвижению веб-ресурса (помимо создания «хлебных крошек») могут быть следующими:

Перелиновка - реализация взаимосвязи внутри электронного ресурса с помощью ссылок. Это и блоки «Вам также может быть интересно», и «Похожие страницы», и ссылки в тексте, которые ведут на страницы того же сайта (пример выше на фото).
Регистрация в «Яндекс-Вебмастер» и Google Search Console. Поисковые системы не только дадут рекомендации по улучшению и продвижению сайта, но и быстрее найдут новый ресурс для индексации, если он зарегистрирован в их каталогах. Кроме того, подобный шаг позволит подтвердить авторство текстов в случае возникновения проблем в дальнейшем.
Файл robots.txt. В состав данного файла входят команды для поисковиков, которые индексируют сайт. Так, поисковый робот не будет «блуждать» по ресурсу, а «прочитает» страницы последовательно и в полном объеме.
SEF или ЧПУ (человекопонятный URL), которые повышают удобство использования веб-ресурса за счет отображения файловой структуры вместо непонятных идентификаторов. Пример использования ниже.
Фавикон. Небольшое изображение, которое отображается на вкладках или в закладках браузера и может находиться в поисковой выдаче перед ссылкой, помогает пользователям визуально запомнить сайт.

Для интернет-магазинов: как повысить конверсию (кроме навигации)?

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

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

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

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

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

Пример использования

Главная страница -> Раздел сайта -> Запись из раздела

Главная страница -> Архив публикаций -> Запись из раздела

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

Эта часть навигации создана для удобства пользователя, который после прочтения статьи может посетить категорию этой статьи, чтобы посетить подобные страницы, или вернуться в корневой документ – на главную страницу сайта. Так как большинство посетителей приходят из поисковых систем, навигация такого рода поможет ему разобраться в структуре сайта и переходить на страницы меньшего уровня вложенности (например, рубрики или архив записей). Это повышает пользовательские факторы, позволяет дольше задержать посетителя на сайте и является частью внутренней перелинковки (хотя, во многих случаях breadcrumbs помещаются в теги или их ссылкам даются значения rel=”nofollow”. В таком случае, они размещаются исключительно для пользователя).

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

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

Все же, часто хлебные крошки используются на:

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

Карта сайта часто заменяет breadcrumbs, если она правильно разработана (имеется в виду html-карта, а не файл sitemap.xml для поисковиков). Такая страница должна иметь ссылки на все главные разделы, что позволит пользователю с легкостью переходить по ним и искать нужную информацию.

На форумах и интернет-магазинах хлебные крошки – обязательный атрибут.

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

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

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

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

Вывод хлебных крошек может проводиться с помощью дополнений к популярным ЦМС (модуль для Друпал, плагин для Вордпресс, в Joomla есть встроенная возможность вывода пути к странице), на сайте с авторским php вставляется блоком через функции include или require (require-once). На популярных ЦМС для форумов (phpBB и прочее) эти функции или уже установлены, или могут быть установлены через соответственные расширения.

«Хлебные крошки» (от англ. «breadcrumbs») - это навигационная цепочка на сайте, которая отражает путь от главной страницы до текущей. Они впервые использовались в файловых менеджерах типа Norton Commander или Volkov Commander и показывали путь к корневой папке.

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

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

В далеком 1995 году Якоб Нильсен сформулировал 10 принципов юзабилити , первый из которых - «Видимость статуса системы». Суть его в том, что пользователь всегда должен знать, в какой части сайта он находится. Именно для реализации этого принципа нужны «хлебные крошки». Известный дизайнер Артемий Лебедев в «Ководстве» пишет, что дублирующая навигация уместна, когда есть логическая вложенность содержания, то есть почти на всех информационных сайтах. Добавим, что навигационная цепочка необходима также интернет-магазинам и корпоративным сайтам.

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

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

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

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

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

Навигационная цепочка может быть организована по разным принципам:

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

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

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

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

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

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

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

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

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

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

Создать навигационную цепочку можно разными способами: с помощью PHP, CSS, плагинов для популярных CMS WordPress, Joomla! и других движков - в сети можно найти массу решений. Какой бы способ вы ни выбрали, придерживайтесь следующих советов:

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

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