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

Содержание
  1. Breadcrumbs в web-дизайне: применение и примеры
  2. Когда нужно использовать Breadcrumbs?
  3. Виды Breadcrumbs
  4. Они могут помочь пользователю 
  5. Ошибки при использовании Breadcrumbs
  6. Дизайн «хлебных крошек»
  7. Статистика
  8. Ориентация цепочек
  9. Примеры использования breadcrumbs в web-дизайне
  10. Как сделать правильные для SEO хлебные крошки на сайте?
  11. 1. Статический вес
  12. 2. Поведение пользователей
  13. 3. Сниппет
  14. 4. Помните
  15. Хлебные крошки – полезный элемент навигации и инструмент SEO
  16. Навигация «Хлебные крошки» – преимущества
  17. Сделать хлебные крошки? Это элементарно, Ватсон!
  18. Хлебные крошкиWordPress
  19. Хлебные крошки для Joomla
  20. Меню «Хлебные крошки» в интернет-магазинах
  21. Второй вид меню «Хлебные крошки» в интернет-магазине
  22. Некоторые замечания по хлебным крошкам на сайте
  23. Что такое «хлебные крошки» и для чего они нужны?
  24. Для чего используются «хлебные крошки»?
  25. Какими бывают «хлебные крошки»?
  26. Как создать правильные «хлебные крошки»?
  27. Подводим итоги
  28. Хлебные крошки для WordPress без плагина и с помощью Breadcrumb NavXT
  29. Зачем нужны хлебные крошки?
  30. Делаем без плагина
  31. «Хлебные крошки» на сайте: для чего они нужны? Навигация «Хлебные крошки»
  32. Так ли необходимая данная навигация?
  33. Вспомним сказку…
  34. Функции навигации
  35. Как сделать «хлебные крошки»? Основные структуры
  36. Типы построений, или Как самостоятельно залить модуль в систему?
  37. Популярные плагины с такой навигацией
  38. Поиск подходящего плагина
  39. Навигация, без которой не быть
  40. Подведем итог

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

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

Что такое breadcrumb?

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

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

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

Когда нужно использовать Breadcrumbs?

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

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

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

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

Виды Breadcrumbs

Существуют три основных вида «хлебных крошек». 

На основе местоположения 

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

На основе свойств

«Хлебные крошки» на  основе свойств отражают атрибуты конкретной страницы.

На основе пути

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

Они могут помочь пользователю 

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

Снижает  количество кликов или действий для возвращения на страницы более высокого уровня

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

Как правило, не  засоряют экран

Они, как правило, имеют горизонтальную ориентацию и поэтому не занимают на странице много места. 

Снижают показатель отказов

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

Ошибки при использовании Breadcrumbs

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

Использование навигационных цепочек, когда в этом нету необходимости

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

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

Использование «хлебных крошек» в качестве основной навигации

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

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

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

Не делайте на странице ссылку на эту же страницу (последний шаг в «хлебных крошках» должен быть без ссылки)

Дизайн «хлебных крошек»

При разработке цепочек навигации, могут возникнуть некоторые вопросы. Например:

Какой символ нужно использовать для отделения ссылок?

Общепринятым и наиболее узнаваемым символ для разделения гиперссылок в «хлебных крошках» является символ «больше, чем»  – (>).

Также можно использовать кавычки, указывающие на правый угол (») и косую черту (/).

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

Какими они должны быть?

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

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

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

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

Статистика

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

Ориентация цепочек

95% — горизонтальная

5% Вертикальная

Примеры использования breadcrumbs в web-дизайне

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

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

NASA

Nestle

Marchand de Trucs

Bridge 55 

Overstock.com

TechRadar UK

Apple Store

Использование других символов

BP

Martique

PSDTUTS

Mouse to Minx

Boden

Другие альтернативы 

Coolspotters

Cranfield

Lonelyplanet

Booreiland

По материалам – Jacob Gube

Также примеры «хлебных крошек» можно посмотреть здесь:

Перевод — Дежурка

Источник: http://www.dejurka.ru/web-design/breadcrumbs_in_web_design/

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

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

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

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

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

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

Чтобы перейти обратно в раздел sys(C) не обязательно делать несколько нажатий кнопки «Назад», можно просто кликнуть по названию самой папки, и вы окажетесь там.

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

Ниже пример «хлебных крошек» на сайте «BonPrix»:

Плюсы «хлебных крошек»:

  1. Упрощают навигацию по сайту для пользователя.
  2. Поисковые системы лучше ранжируют сайт с навигацией.
  3. Вы изначально грамотно свяжете страницы между собой (внутренняя перелинковка).
  4. Создают легкочитаемые сниппеты в поисковых системах. Сниппет – текст, который используется в качестве описания ссылок в поисковой выдаче.
  5. Создают правильный анкорный вес ссылки.

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

1. Статический вес

Вес страницы – это условная величина, которая показывает «значимость» сайта.

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

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

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

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

2. Поведение пользователей

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

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

3. Сниппет

Сниппет – это фрагмент текста, который выводится рядом со ссылкой в поисковой выдаче.

С помощью поисковой системы Google можно передавать структурированные данные и улучшить позиции сайта в выдаче. Яндекс немного отстает от Google и пока не умеет поддерживать данный вид разметки. Но Яндекс сам формирует цепочку навигации, которую можно увидеть в поиске.

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

Оформленная и неоформленная с помощью структурированных данных навигационная цепочка в выдаче Google:

Google использует три формата передачи структурированных данных – JSON-LD, Microdata, RDFa. «Хлебным крошкам» подойдут форматы Microdata и RDFa. Ниже представлен пример оформления кода в формате Microdata:

После оформления кода необходимо убедиться, нет ли ошибок. Для этого существует инструмент валидатор от Google.

Убедиться, что происходит правильная обработка и отображение структурированных данных поможет инструмент Search Console от Google.

4. Помните

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

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

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

Источник: https://www.obrazstroy.ru/blog/kak-sdelat-pravilnye-dlya-seo-khlebnye-kroshki-na-sayte/

Хлебные крошки – полезный элемент навигации и инструмент SEO

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

Хлебные крошки – это один из видов навигации сайта.

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

Короткую:

Или длинную:

В самом общем случае структура хлебных крошек на любом веб-ресурсе выглядит следующим образом: страница – Раздел – Подраздел – Страница.

  1. Существенно улучшает юзабилити сайта. Посетителю наглядно видно, где он находится и как ему попасть на интересующий его другой раздел ресурса. По сути можно говорить об особом виде меню – «Хлебные крошки».
  2. Любое меню – это один из способов внутренней перелинковки. А значит, с точки зрения SEO хлебные крошки  – это благо.

    Они увеличивают PageRank страниц и интернет-ресурса в целом, то есть улучшают его позиции в выдаче поисковых систем. Кстати, проверить качество перелинковки можно у нас в SE Ranking: Проверка перелинковки сайта.

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

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

Сделать хлебные крошки? Это элементарно, Ватсон!

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

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

WordPress  – самая распространенная CMS для блогов, да и не только. На этом движке их можно реализовать двумя путями:

  1. При помощи плагина Хлебных крошек – BreadcrumbNavXT. Для этого скачиваем плагин (бесплатно, но должна быть версия не ниже  WordPress 3.0 и хост должен поддерживать PHP5). Далее в файл header.php шаблона WordPress добавляем следующий код:

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

  1. Без плагина. Программный код WordPress прост и вставить в него код хлебных крошек тоже довольно просто. Для этого открываем файл single.php (можно найти поиском, а вообще находится в папке с темой). И после строчки:

Вставляем следующее:

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

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

Хлебные крошки для Joomla

Joomla  – вторая по распространённости CMS, а может, и первая. Код ее довольно сложен, поэтому реализуем хлебные крошки при помощи специального модуля «mod_breadcrumbs» (Панель управления – «Расширения» – «Менеджер модулей»). Затем заходим в настройки модуля и производим настройку под себя.

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

Статья в тему: Какую CMS выбрать для сайта?

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

 – Название раздела – Подраздел – и т. д.

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

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

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

Вы ищите хлебопечку (к слову,  в условиях дорожающих продуктов очень актуальная вещь). Но модель, которую вы искали, по каким-либо причинам, вам не понравилась.

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

– Бытовая техника – Мелкая бытовая техника – Хлебопечки.

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

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

Да, есть еще один!  Он базируется не на структуре сайта, а на истории нахождения посетителя на нем. Другими словами на любой странице интернет-магазина в этом случае располагается кнопка «Назад» (Back или Back to result– в западных интернет-магазинах).

Последовательно нажимая на нее, посетитель может возвратиться на страницы, которые он ранее посещал. Но ведь есть соответствующая функция браузера? Есть, но тут присутствует одна тонкость.

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

Какой вариант внедрять? Оба, конечно! Больше удобств для потенциальных покупателей – это больше продаж.

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

  1. На главной странице их не должно быть. Ссылку на самого себя поисковые системы воспринимают отрицательно. Так же не должна быть ссылка на страницу, на которой находится посетитель. Все это можно учесть соответствующей настройкой плагинов (модулей).
  2. Располагайте хлебные крошки в видимом для посетителя месте. Стандартное местоположение – под структурным меню веб-ресурса.
  3. Посредством специального кода хлебных крошек можно в выдаче поисковых систем Яндекса и Гугла получить навигационные цепочки для сайта. Делается это при помощи разметки микроданных.

    Выглядит это примерно так:

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

Источник: https://seranking.ru/blog/seo/khlebnye-kroshki-na-sajte/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#микроразметка#навигационная цепочка#навигация#перелинковка#сниппет#хлебные крошки#юзабилити

Источник: https://blog.seopult.ru/seotech/chto-takoe-xlebnye-kroshki-i-dlya-chego-oni-nuzhny.html

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

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

Доброго времени суток, уважаемые владельцы сайтов!

Сегодня затронем первую тему по поводу навигации сайта.

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

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

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

Зачем нужны хлебные крошки?

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

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

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

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

В большинстве случаев мы не встретим обычных сайтов со сложной структурой. Как правило, это идут обычные ресурсы на движке WordPress, где структура контента идет таким образом: – Рубрика – Статья.

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

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

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

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

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

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

Делаем без плагина

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

Пойдем с первого способа. Он достаточно прост и состоит их 2х шагов:

  1. Размещение кода в файле шаблона functions.php;
  2. Размещение кода вывода крошек в нужном месте.

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

Берем 1й код и копируем его в файл functions.php вашего шаблона оформления.

function the_breadcrumb() { if (!is_front_page()) { echo ''; echo ” » “; if (is_category() || is_single()) { the_category(' '); if (is_single()) { echo ” » “; the_title(); } } elseif (is_page()) { echo the_title(); } } else { echo 'Home'; }}

function the_breadcrumb() {        if (is_category() || is_single()) {

Можно разместить его в самом конце содержимого файла перед закрывающим тегом ?>. Если его нет, то можно вставить в самое начало файла перед открывающим тегом (см. скриншот ниже).

Когда будете размещать 1й код, проследите, чтобы кодировка файла была UTF-8 (без BOM). Если ее не будет, то некоторые символы и русские слова будут отображаться некорректно. В редакторе Notepad кодировка выставляется через пункт “Кодировка – Кодировать в UTF-8 (без BOM)”.

Далее берем второй код и размещаем его в то место, где нужно вывести сами хлебные крошки.

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

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

Для примера я взял один из стандартных шаблонов – TwentyTen. В нем код будет иметь следующее расположение (файл single.php).

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

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

Если нужно будет задать какие-то отступы, то просто вторую часть кода оборачиваете в блок с каким-то классом и задаете ему выравнивание. Например, вот так.

Также нужно задать сами стили. Ниже даю их вам. В стилях прописан путь к картинке, которая будет выступать в роли кнопок. Поэтому, скачайте архив отсюда с 6 изображениями разных цветов, выберите наиболее подходящее под ваш дизайн и загрузите его в папку images вашей темы оформления.#breadcrumb {display: block;float: none;margin: 20px 0px 40px -11px;font-weight: 600;}#breadcrumb ul {font-family : Helvetica, sans-serif;list-style : none; padding:0px}#breadcrumb ul li:before {background:none !important}.crumbs {display : block;}.crumbs ul li:before{background:none}.crumbs li.first {padding-left : 8px; float: left;}.crumbs li a, .crumbs li a:link, .crumbs li a:visited {color : #616d7e;display : block;float : left;font-size : 11px;margin-left : -13px;padding : 3px 17px 11px 25px;position : relative;text-decoration : none;}.crumbs li a {background-image: url(images/bg-crumbs.png);background-position : 100% 0%;background-repeat : no-repeat;position : relative;}.crumbs li a:hover {background-position : 100% -48px;color : #333;cursor : pointer;}.crumbs li a:active {background-position : 100% -96px;color : #333;}.crumbs li.first a span {border-left : 1px solid #d9d9d9;height : 29px;left : 0;position : absolute;top : 0;width : 3px;}
#breadcrumb {display: block;margin: 20px 0px 40px -11px;#breadcrumb ul {font-family : Helvetica, sans-serif;list-style : none; padding:0px}#breadcrumb ul li:before {background:none !important}.crumbs {display : block;}.crumbs ul li:before{background:none}.crumbs li.first {padding-left : 8px; float: left;}.crumbs li a, .crumbs li a:link, .crumbs li a:visited {color : #616d7e;display : block;float : left;font-size : 11px;margin-left : -13px;padding : 3px 17px 11px 25px;position : relative;text-decoration : none;}.crumbs li a {background-image: url(images/bg-crumbs.png);background-position : 100% 0%;background-repeat : no-repeat;position : relative;}.crumbs li a:hover {background-position : 100% -48px;color : #333;cursor : pointer;}.crumbs li a:active {background-position : 100% -96px;color : #333;}.crumbs li.first a span {border-left : 1px solid #d9d9d9;height : 29px;left : 0;position : absolute;top : 0;width : 3px;}

Источник: http://kostyakhmelev.ru/texnicheskaya-chast/hlebnyie-kroshki-wordpress.html

«Хлебные крошки» на сайте: для чего они нужны? Навигация «Хлебные крошки»

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

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

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

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

Именно поэтому ее значение, возможность реализации стоит рассмотреть подробнее.

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

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

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

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

Так ли необходимая данная навигация?

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

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

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

Вспомним сказку…

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

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

Функции навигации

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

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

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

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

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

  1. Для страниц, где размещаются категории каталога.
  2. Для карточек товаров.
  3. Для всех остальных страниц ресурса.

Типы построений, или Как самостоятельно залить модуль в систему?

Каждый из этих типов имеет свое построение. Кратко каждая система выглядит так:

1. Для страниц, в которых будет находиться информация каталога о его категориях, должна быть вот такая структура:

страница -> {Название категории уровня 1} -> Остальные страницы -> {Название категории уровня n}.

2. Для карточек товаров действует похожая система построения:

-> {Название категории уровня 1} -> … -> {Название категории уровня n} -> {Название товара}.

3. Для последнего типа построения (остальных сайтов) действует вот такая конструкция:

страница портала -> {Название какого-либо раздела уровня 1} -> Все остальные разделы -> {Название раздела уровня n}.

Популярные плагины с такой навигацией

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

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

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

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

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

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

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

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

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

Поиск подходящего плагина

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

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

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

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

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

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

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

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

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

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

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

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

Эти персонажи заложили основу работы сервисов, которые сегодня стали мировыми гигантами продаж.

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

Источник: http://fb.ru/article/209792/hlebnyie-kroshki-na-sayte-dlya-chego-oni-nujnyi-navigatsiya-hlebnyie-kroshki

Вкусняха
Добавить комментарий