"Хлебные крошки" - что это такое? Примеры навигации. Хлебные крошки Когда нужно использовать хлебные крошки

Доброго времени суток, дорогие читатели!

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

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

Они кликабельные, это значит, что посетитель в любой момент может перейти на “уровень” выше – в подрубрику или рубрику. Как правило, breadcrumbs имеют такой вид: главная – рубрика – подрубрика – статья. Последний элемент очень часто удаляют, полагая, что это создает ненужное дублирование.

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

Как влияют на SEO

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

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

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

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

Если подводить итог, то breadcrumbs помогают:

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

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

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

Да-да, у них есть и разновидности. Их не так много, но все равно стоит учитывать этот момент.

Линейный

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

Кнопка “Назад”

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

Гибрид

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

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

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

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

С помощью шаблона

Разумно будет выбрать шаблон сразу с хлебными крошками. Если вы только продумываете дальнейший сайт и еще не приступили к его созданию – стоит заглянуть в какой-нибудь магазин шаблонов WordPress и поискать там тему с этой функцией (советую Root).

Это будет наиболее практичный вариант, потому как вам не придется устанавливать дополнительные плагины. При этом вам не придется вручную что-то дописывать или править, все будет работать, что называется, из коробки (сразу после установки).

Плагины

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

Yoast SEO – подробная инструкция по настройке крошек

Если в качестве SEO-плагина вы используете – у меня для вас отличные новости. Breadcrumbs присутствуют в функционале, поэтому вам остается лишь настроить их.

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

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

Обычно этот код вставляют в общие шаблоны страниц – single.php или page.php. Также некоторые пользователи вставляют этот код в header.php – в самый конец. Сработает ли это конкретно в вашем случае или нет – я не знаю, но вы можете попробовать.

Общие шаблоны страниц можно редактировать через встроенные инструменты WordPress. Идем во “Внешний вид” – “Редактор”, находим нужный файл в списке.

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

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

Лучше всего разместить breadcrumbs прямо под header – функция get_header (); – как раз служит для его вызова. Поэтому правильно будет расположить код из Yoast SEO прямо под ним.

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

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

Но ни код, ни шорткод не будут работать, если функция навигационной цепочки отключена в самом плагине. Чтобы включить ее, вы должны перейти в настройки плагина (вкладка “SEO”) – отображение в поисковой выдаче – хлебные крошки.

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

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

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

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

Breadcrumb NavXT

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

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

Данное расширение можно установить абсолютно бесплатно из каталога WordPress. Найти его можно по ключевым словам.

Breadcrumb


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

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

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

Заключение

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

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

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

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

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

Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA

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

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

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

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

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

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

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

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

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

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

Линейная

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

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

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

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

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

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

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

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

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

  • Никаких хлебных крошек на главной странице. Получится, что вы ставите на странице ссылку на нее же саму. Это отрицательно скажется на ранжировании. Подробнее о факторах ранжирования можно прочитать .
  • Последним кликабельным звеном цепочки должна быть предыдущая страница, иначе вы также продублируете ссылку, как в случае с хлебными крошками на главной.
  • Навигационные элементы должны быть хорошо видны пользователям. Текст должен контрастировать с фоном, и располагать элементы желательно вверху страницы.
  • В Яндексе и Гугле есть функция, которая позволяет отображать навигационные цепочки вашего сайта в результатах поиска. Для этого нужно сделать разметку микроданных. Это удобно, поскольку пользователь сразу видит структуру вашего сайта:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. Хлебные крошки, основанные на атрибутах, указывает атрибуты текущей страницы:

Ключевые слова

Многие вебмастера рассматривают хлебные крошки как удачную возможность впихнуть на страницу анкоры, заточенные под нужные ключевые слова.
Получается примерно такая картина:
Основное КС (линк на главную) > Основное КС + слово (линк на категорию) > Основное КС + слово

Например:
Фото (линк на главную) > Фото со знаменитостями (линк на категорию) > Фото с Моникой Белуччи

В некоторых случаях подобная организация выглядит удобно и естественно, однако я обычно придерживаюсь менее SEO-ориентированного подхода по нескольким причинам:
1. Известно, что анкорный текст, насыщенный ключевыми словами, выглядит, мягко говоря, некрасиво: «окна пластиковые купить в Москве срочно»;
2. Нельзя ставить юзабилити после SEO. Людям известно, что такое «Главная» и куда ведет линк с этим названием, поэтому не нужно вместо простого слова нагромождать ключевики, ведь пользователь может запутаться. Придерживайтесь общепринятых стандартов.

Хлебные крошки и сниппеты


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

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

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