Навигация хлебные крошки

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

Данная навигация имеет ряд функций:

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

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

  • Низкий поток пользователей из-за непонятности ориентирования в структуре сайта.
  • Низкий уровень индексирования портала в поисковых системах.

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

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

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

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

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

itargency.ru

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


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

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

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

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

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

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

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

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

Линейная

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

Навигация хлебные крошки

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

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

Навигация хлебные крошки

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

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

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

Навигация хлебные крошки

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

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

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


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

Навигация хлебные крошки

semantica.in

Навигация хлебные крошки

От переводчика

Юзабилити интернет-магазина — это конструктор, состоящий из множества разных деталей. Одна из шестерёнок этого конструктора — это «хлебные крошки». О них и пойдёт речь в статье. Это мой перевод статьи: http://baymard.com/blog/ecommerce-breadcrumbs. Неточности или ошибки перевода (если Вы такие найдёте) прошу отправлять в личные сообщения — я оперативно внесу необходимые правки. Если статья будет интересна — обязательно переведу и другие материалы подобной тематики.


Введение

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

Сопоставляя различные показатели 40 крупнейших сайтов e-commerce, исследователи обнаружили, что 68% интернет-магазинов испытывают трудности с внедрением этого компонента: 45% сайтов располагают лишь одним вариантом «крошек», а у 23% сайтов «хлебные крошки» вообще отсутствуют.

Навигация хлебные крошки
Некоторые из 68% самых успешных интернет-магазинов, слабым местом которых являются «хлебные крошки»

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

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

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

Навигация хлебные крошки
Вариант «хлебных крошек», основанный на структуре сайта, позволяет пользователям легко переходить к категориям товаров, чтобы подробнее узнать о других товарах в категории. Участник исследований, не уверенный на 100% в выборе куртки, легко перешел к категории «Куртки и пальто» на странице товаров H&M, используя структурный вариант «крошек».

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

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

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

habr.com

Основные SEO-требования к хлебным крошкам

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

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


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

Если главная страница сайта продвигается по конкурентным запросам, то (не в ущерб навигации) лучше использовать в качестве анкора ссылки не слово «Главная», а фрагмент соответствующей фразы или весь запрос целиком. Скажем: Мебель > Офисная > Стулья и кресла.

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

Безусловно, понятная навигация внутри сайта повышает глубину просмотра и вовлеченность пользователя. Как следует из ряда SEO-исследований [1, 2] данные поведенческие факторы (доля переходов из поиска со временем просмотра более 1 минуты, глубина просмотра) существенно сказываются на ранжировании сайта по продвигаемым запросам.

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

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


3. Представление сайта на выдаче (сниппет)

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

Наглядная цепочка в Яндексе
Рис. 1. Отображение наглядной цепочки навигации в выдаче Яндекса.

Сравнение в Google
Рис. 2. Отображение оформленной с помощью структурированных данных и не оформленной цепочки навигации в выдаче Google.

Google поддерживает три формата передачи структурированных данных — JSON-LD, Microdata, RDFa [3]. Для оформления хлебных крошек рекомендуется использовать Microdata и RDFa [4]. Пример оформления кода в формате Microdata для данных типа BreadcrumbList представлен ниже (сама цепочка: SEO > Трафик > Заказ).

<ol itemscope itemtype=»http://schema.org/BreadcrumbList»>
  <li itemprop=»itemListElement» itemscope
      itemtype=»http://schema.o.
.png» alt=»SEO»/></a>
    <meta itemprop=»position» content=»1″ />
  </li>
  >
  <li itemprop=»itemListElement» itemscope
      itemtype=»http://schema.org/ListItem»>
    <a itemscope itemtype=»http://schema.org/Thing»
       itemprop=»item» href=»https://example.com/SEO/Traffic»>
      <span itemprop=»name»>Трафик</span>
      <img itemprop=»image» src=»http://example.com/images/icon-Traffic.png» alt=»Traffic»/></a>
    <meta itemprop=»position» content=»2″ />
  </li>
  >
  <li itemprop=»itemListElement» itemscope
      itemtype=»http://schema.org/ListItem»>
    <a itemscope itemtype=»http://schema.org/Thing»
       itemprop=»item» href=»https://example.com/SEO/Traffic/Order»>
      <span itemprop=»name»>Заказ</span>
      <img itemprop=»image» src=»http://example.com/images/icon-Order.png» alt=»Order»/></a>
    <meta itemprop=»position» content=»3″ />
  </li>
</ol>

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

Контролировать правильность обработки и отображение структурированных данных можно с помощью соответствующей вкладки в Search Console от Google, путь: Вид в поиске > Структурированные данные.

Структурированные данные
Рис. 3. Инструмент работы со структурированными данными от Google в Search Console.

4. Добрые советы

  • Включение текущий страницы с отсутствием ссылки на неё в конце дублирующей навигации — является хорошим тоном.
    Скажем: SEO > Тарифы > Трафик > Онлайн-заказ.

  • Не стоит злоупотреблять вхождением ключевых фраз в цепочке — это повышает плотность их вхождений и увеличивает вероятность применения текстовых пост-фильтров. 1–2 вхождений для слова будет достаточно.

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

Полезные ссылки

  1. Эффективная работа с коммерческими и поведенческими факторами в 2016 году, Cybermarketing, 2016, http://www.slideshare.net/SergeyYurkov1/2016-cybermarketing-16.

  2. Аналитика поведенческих факторов Яндекс/Гугл, SEO conference в Казани, 2015, http://www.slideshare.net/staspolomar/ss-53154946.

  3. Introduction to Structured Data, Google Developers, 2016, https://developers.google.com/search/docs/guides/intro-structured-data.

  4. Breadcrumbs, Google Developers, 2016, https://developers.google.com/search/docs/data-types/breadcrumbs.

pixelplus.ru

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

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

Из Википедии:  Элемент навигации ( обычно в разных файловых менеджерах на подобии Total Commander ), который представляет собой полный путь по всей файловой системы от корня до текущей папки, в которой находится пользователь.

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

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

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

к оглавлению ^

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

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

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

к оглавлению ^

Пример хлебных крошек

После этого переходим в файл single.php или header.php, в зависимости от вашего шаблона, и ставим в нужное нам место вот этот короткий код. Переходим на любую статью на сайте и смотрим на результат.

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

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

к оглавлению ^

Добавляем крошки на Wordpress без плагина

Для вывода на WordPress можно так же воспользоваться кодом, без плагина. Второй способ вставки не сильно отличается от первого. Можно попробовать оба варианта, если по какой то причине один из них не подходит или не нравится.

  • Делаем резервную копию баз данных;
  • Копируем готовый код в functions.php;
  • Вызываем функцию в файле single.php;
  • Проверяем хлебные крошки на странице записей.

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

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

Хлебные крошки wordpress без плагина

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

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

Хлебные крошки без плагина

Все три варианта работают, пользоваться можно любым из них. При желании можно добавить несколько своих стилей. Я лично ничего не дополнял, чтоб не переборщить…может в дальнейшем поменяю решение, пока не решился. В третьем примере используется блок div breadcrumbs (#breadcrumbs). С его помощью можно добавить свои стили в файл style.css для оформления навигации крошек.

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

к оглавлению ^

Самые знаменитые плагины

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

  1. Сео комбайн Yoast SEO.
  2. Плагин BreadCrumb NavXT.

к оглавлению ^

Плагин Yoast SEO

Раньше этот плагин назывался по другому, сейчас его название Yoast SEO. Если на других ресурсах вы найдете старое название плагина, знайте это один и тот же плагин. Заходим в админку сайта, «Плагины — Установить новый». После установки плагина, слева в меню появится новая кнопка «SEO». Нажимаем на нее, раздел «Дополнительно». Первая вкладка называется «Навигационная цепочка (breadcrumbs)».

Хлебные крошки wordpress с плагином

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

Хлебные крошки плагин yoast seo

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

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

Хлебные крошки плагин yoast

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

к оглавлению ^

Плагин BreadCrumb NavXT

Если вы не можете установить первый плагин от Yoast из-за своих личных причин, можно воспользоваться плагином BreadCrumb NavXT, который отвечает только за вывод на сайте wordpress. Так же само заходим в админку, «Плагины — Установить новый плагин».

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

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

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

nesmelov.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

cropas.by

Автор: Стивен Спенсер
Перевод: Всеволод Козлов

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

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

Как видите, очень наглядно и удобно!

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

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

Из моего примера меню «хлебные крошки» видно, что там все же имеется одна бездарная фраза – «Главная». Старайтесь у себя не допускать подобных фраз в виде текстов ссылок. Ее с легкостью можно преобразовать в «Товары для дома» и т.д.

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

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

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

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

Таких применений можно придумать великое множество! Фантазия безгранична, поэтому дерзайте и все у Вас получится!

Оригинал статьи: SEO Breadcrumb Trail Boosts Rankings

www.seoschool.ru

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

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

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

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

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

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

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

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

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

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

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

Советы и рекомендации

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

edison.bz


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector