Люди устроены так, что они не вернутся на Ваш сайт, если он им показался слишком сложным. Необходимо уметь упрощать. Иными словами, ориентироваться на самого обычного пользователя.
«Хлебные крошки» — неотъемлемая часть любого хорошего сайта. Возможно, Вы сталкивались с ними ранее, когда заходили на сайт и искали необходимую Вам информацию.
Этот процесс очень похож на поход за покупками в новый гипермаркет. Мы не знаем расположение товаров, но точно знаем, что нам нужно. В этом случае нам приходят на помощь знаки-указатели.
Эту же функцию и выполняют «Хлебные крошки» на любом сайте.
Давайте посмотрим, как это работает на практике.
Давайте разберемся, почему же всё-таки «Хлебные крошки», а не указатели, тропинки и прочее.
Помните сказку «Пряничный домик»? Гретель бросала хлебные крошки, чтобы найти дорогу до дома. Это и стало эталоном для «Хлебных крошек», которые мы видим на сайтах сегодня.
Хлебные крошки используются для обозначения иерархии на сайте. Они позволяют Вашим читателям понимать две вещи:
в каком разделе сайта они находятся на данный момент;
какую роль этот раздел играет в общей структуре.
Иными словами с их помощью можно делать две вещи: возвращаться на предыдущую страницу или отправляться на главную страницу.
Есть определенная классификация «Хлебных крошек». Они могут использоваться для различных целей. Прежде чем использовать их на своём сайте, необходимо решить, как и где их применять. Выделяют три вида «Хлебных крошек»:
«Хлебные крошки» основаны на иерархии. В таком случае сразу ясно, где именно Вы находитесь и на сколько пунктов Вам нужно вернуться для перехода на главную страницу. Например: Главная страница > Блог > Категория > Название.
Зачастую такой вид используется в блогах. Особенность в том, что они состоят из
«Хлебные крошки» должны показывать, о чем идет речь и включать ссылки на соответствующие категории.
«Хлебные крошки» по признакам. Самый популярный тип. Используется практически во всех интернет магазинах.
Они появляются после проведения определенных действий на сайте.
Они также могут быть более подробными, с указанием всех параметров страницы. Большое количество «крошек» позволяет пользователю переходить по категориям сайта. С такой навигацией пользователю легче найти нужный продукт.
«Хлебные крошки», основанные на событиях. Особенность их в том, что они могут показывать, что именно вы делали на сайте. Могут также встречаться в интернет-магазинах, но уже значительно реже. Это может быть переход к товару, который рассматривался ранее или просто возможность вернуться на предыдущую страницу.
Например: Главная страница > Предыдущая страница > Предыдущая страница > Текущая страница. Этот вид «Хлебных крошек» может быть совмещен с предыдущим, как показано на рисунке ниже.
«Хлебные крошки» также используются в Гугле. Этот процесс не выделяется в отдельный тип, однако он очень полезен.
На изображении благодаря «хлебным крошкам» видно, какое именно место занимает нужная пользователю страница во всем сайте. Есть вероятность, что пользователь проявит интерес к такому сайту.
Пользователи с удовольствием их используют и считают удобными. Крошки помогают пользователям не теряться. Благодаря им мы с легкостью можем найти выход. Нет необходимости нажимать клавишу «Назад».
Помогают Гуглу (Google) понять структуру Вашего сайта. Кроме того, Гугл может использовать их для отображения в поисковой системе. Именно поэтому очень важно правильно подбирать слова для «Хлебных крошек».
Снижают отказы. Это происходит за счет возможности нового способа просмотра вашего сайта. Людям проще искать необходимую информацию. Благодаря «Хлебным крошкам» мы можем найти короткий путь к другим разделам сайта. Если люди не найдут нужной информации на вашей странице, то они отправятся вводить запрос для поиска. Разве это Вам надо?
Помогают улучшать внутреннюю связь и структуру сайта. Они также указывают некоторые ключевые слова на разных веб-страницах и помогают поисковым системам видеть, как одна страница связана с другой. Использование иерархии улучшает СЕО страниц Вашего сайта. В любом случае «Хлебные крошки» красиво выглядят, привлекательны для пользователя и имеют множество преимуществ. Не забываем о главном. Целью любых действий является увеличение трафика. На эту тему есть прекрасное коротенькое видео, проясняющее особенности написания названий.
Существует несколько способов добавления «Хлебных крошек» на Ваш сайт. Для начала определим платформу, на которой он создан.
Итак, Вы используете WordPress. В этом случае нужно сделать выбор между одним из плагинов Yoast SEO и NavXT.
В любом случае необходимо убедиться, что шаблон, который Вы используете, поддерживает «Хлебные крошки». Иначе Вам придется изменить свой код.
Внимание! Прежде чем применять технические изменения на своем сайте, я настоятельно рекомендую Вам создать его резервную копию.
Разберем применение каждого из плагинов.
Yoast SEO является одним из лучших СЕО плагинов WordPress для развития и продвижения сайтов. Его также используют для добавления «хлебных крошек» на сайт. Ниже представлен подробный алгоритм действий.
Сначала необходимо обеспечить доступ к сайту через протокол передачи файлов по сети (FTP). Чаще всего «хлебные крошки» располагают до или после заголовка страницы.
Программный код помещается в один из файлов page.php, single.php или header.php. Он зависит непосредственно от используемого Вами шаблона WordPress, в котором расположена эта информация.
Добавляем «Хлебные крошки». Для этого помещаем следующий код в шаблон:
<?php
if (function_exists(’yoast_breadcrumbs’))
{
yoast_breadcrumbs(’<p id="breadcrumbs«>’,’</p>
’);
}
?>
Внимание! Рекомендую не добавлять код в functions.php. Могут возникнуть некоторые проблемы.
После добавления кода, находим меню Yoast SEO справа в боковом меню и отправляемся в раздел SEO > Внешний вид поиска > Хлебные крошки (Search Appearance > Breadcrumbs). Добавляем «Хлебные крошки».
NavXT является бесплатным плагином. Он довольно популярен, по двум причинам: легко настраивается и имеет много возможностей для улучшения стиля «Хлебных крошек».
Шаг 1. Устанавливаем плагин NavXT из директории вордпресс. Запускаем.
Шаг 2. Добавляем следующий код в файл header.php.
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/«>
<? php if(function_exists(’bcn_display’))
{
bcn_display();
}?>
</div>
Внимание! Некоторые шаблоны могут отличаться по структуре. Необходимо изучить этот нюанс. При возникновении трудностей следует связаться с разработчиком Вашего шаблона и узнать о размещении «Хлебных крошек».
Шаг 3. «Хлебные крошки» отразились на Вашем сайте. Для настройки этого плагина отправляемся в раздел «Настройки» > «Хлебные крошки» NavXT (settings > Breadcrumb NavXT)
Очередной вариант для WordPress — плагин «Хлебные крошки». Обновления выходят довольно редко. Тем не менее он считается стабильным плагином, который позволяет быстро добавлять панировочные сухари на ваш сайт.
Используется короткий код. Настройки можно изменить с любой страницы.
Значительным минусом является дизайн. Его можно отредактировать в CSS. В любом случае, если у Вас недостаточно знаний кодирования, то лучше использовать предыдущие два варианта. На мой взгляд они более простые и доступные для понимания.
Этот способ для тех, кто знаком с веб-сервисом GitHub. Там можно найти множество бесплатных репозиториев с фрагментами кода и плагинами для любого случая.
Например, jQuery rCrumbs. Создаем контейнер с неупорядоченным списком ссылок. Используем #breadCrumb в качестве ID и объединяем функцию rCrumb и список.
Это автоматически передает список в «Хлебные крошки». Можно управлять различными настройками. Такой плагин отлично подойдет для опытных программистов.
Просмотрев портал, можно заметить, что «Хлебные крошки» очень схожи друг с другом. Это связано с тем, что фрагменты дополняются работами других пользователей, которые бесплатно выпустили свои коды для копирования и обмена.
Фрагменты полезны только разработчикам, которые работают с Bootstrap. Тем не менее они бесценны для создания «Хлебных крошек».
Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.
Заполнить заявку
12327 тендеров
проведено за восемь лет работы нашего сайта.
CodePen — среда для фронтэнд-дизайнеров и разработчиков. Аналог GitHub для дизайнеров. Также дает возможность разработчикам сохранять свои фрагменты кода и делиться ими с миром.
По тегу CSS breadCrumb можно найти множество стилей готовых для использования.
Удобный и понятный интерфейс демонстрирует, за что отвечает каждая часть кода.
Можно не тратить средства и время на создание собственного дизайна. Зачем? Ведь можно изменить уже существующие дизайны.
Иногда обычные ссылки могут быть удобными, но, если Вы хотите усовершенствовать свои «хлебные крошки», то воспользуйтесь данными методами.
Рассмотрим наиболее удобные.
Довольно простой и понятный пользователям способ перехода со страницы на страницу. Хлебные крошки выглядят одинаково.
Отличие состоит в том, что выбранный сегмент помечается тенью. Этот вариант «Хлебных крошек» отлично подойдет для начала работы. Шаблон можно скачать тут.
Вариант похож на предыдущий, но отличается наличием домика на месте первой «крошки».
Каждый пользователь понимает, что значок домика соответствует домашней странице. Используя данные «хлебные крошки», мы сокращаем пространство на экране.
Предлагается темный и светлый варианты. Довольно простой интерфейс вписывается практически в любой дизайн.
Цвета можно изменить с помощью редактора Photoshop, но на это потребуется время. Скачать документ можно здесь.
Можно создавать градиент в CSS3 и применять на страницах с помощью «Хлебных крошек». С помощью расширений Photoshop можно экспортировать код из файлов PSD.
Эти действия можно проводить с помощью кодирования. В этом случае «хлебные крошки» можно будет быстро изменить, если появится необходимость.
В любом случае, при загрузке шаблона можно изменять цвета градиента в соответствии с любым проектом. Скачать шаблон можно здесь.
Следует помнить, что Гретель из сказки «Пряничный домик» потерялась даже несмотря на хлебные крошки. Не стоит допускать таких же ситуаций и с пользователями Ваших сайтов.
Надеюсь, что Вам была ясна и понятна описанная информация. Теперь можем подытожить, чему Вы научились и чего достигли после изучения статьи.
Поняли, что такое «Хлебные крошки» и зачем нас с Вами нужно их использовать.
Разобрали классификацию «Хлебных крошек» и поняли, какой именно тип Вам подходит.
Научились не только применять их, но и использовать различные системы для реализации применения.
Изучили различные дизайны «Хлебных крошек».
Стоит заметить, что все эти действия и способы абсолютно бесплатны. Конечно, никто не исключает вариант с наймом специалиста. Это может значительно сократить Ваше время. Но я не думаю, что специалист Вам понадобится после изучения данного материала.
Автор: Николай Шмичков
