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

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

"Хлебные крошки" очень тесно связаны с микроразметкой на сайте. Поэтому перед изучением данной статьи изучите прошлые статьи, посвященные микроразметке Schema.org и описанию различных видов разметки:

• Виды микроразметки для сайта (Schema.org, Open Graph, микроформаты)
• Как на практике использовать микроразметку Schema.org

Содержание

• Плюсы использования "хлебных крошек"
• Как сделать красивый сниппет на поисковой выдаче с "хлебными крошками"?
• Плагин "хлебные крошки" для CMS
• Тест на знание материала статьи

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

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

Вот как выглядят обычно "хлебные крошки":

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

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

Вы даже не догадываетесь о том, сколько полезных свойств имеют "Хлебные крошки". Разберем самые основные из них:

• Иерархия в навигации сайта;
• Удобство использования (юзабилити);
• Помощь в поиске материалов;
• Релевантность материала.

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

1) Иерархия в навигации сайта

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

2) Удобство использования

Данные ссылки также улучшают юзабилити (удобство использования) сайта. Многие говорят, что данные ссылки не используются посетителями. Но вот скриншот из сервиса Яндекс.Метрики одной нашей статьи за последнюю неделю:

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

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

В 1990-2000 годах, некоторые веб-мастера ошибочно полагали, что главная точка входа на сайт, это главная страница сайта. Но поисковые системы изменили это. Специально для этого я сделал наглядное изображение:

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

Если посетитель захочет почитать похожие статьи, то он сможет просто перейти на уровень вверх и увидеть ряд статей на похожую тематику.

3) Помощь в поиске материалов

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

О том, как сделать такой же вывод "хлебных крошек" на поисковой выдаче мы погорим дальше в этой статье.

4) Релевантность материала

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

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

Для этого необходимо воспользоваться микоразметкой. Но ведь есть несколько видов микроразметки.

Приведу простой пример "хлебных крошек":

1
2
3
4
5
6
7
8
9
10
11

<ol>
    <li>
        <a href="http://www.example.com/">Главная</a> ›
    </li>
    <li>
        <a href="http://www.example.com/css3">CSS3</a> ›
    </li>
    <li>
        <a href="http://www.example.com/css3/html-structure">HTML структура</a>
    </li>
</ol>

А сейчас этот же пример, но уже с с микроразметкой Schema.org:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/arts">
            <span itemprop="name">Arts</span>
        </a>
        <meta itemprop="position" content="1" />
    </li>
    ›
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/arts/books">
            <span itemprop="name">Books</span>
        </a>
    <meta itemprop="position" content="2" />
    </li>
    ›
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/arts/books/poetry">
            <span itemprop="name">Poetry</span>
        </a>
        <meta itemprop="position" content="3" />
    </li>
</ol>

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

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

Плагин "хлебные крошки" для CMS

Сколько CMS — столько и плагинов. Поэтому начнем с CMS WordPress, так как она сама я популярная среди всех. Итак, вот список плагинов, которые позволяют сделать "хлебные крошки" на своем сайте:

• Плагин "Yoast SEO" — перейти на страницу с плагином
• Плагин "Breadcrumb NavXT" — перейти на страницу с плагином
• Плагин "Really Simple Breadcrumb" — перейти на страницу с плагином

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

А вот плагины для других CMS, которые позволяют сделать "хлебные крошки" для любой CMS:

• Плагин для CMS "Joomla" — перейти на страницу с плагином
• Плагин для CMS "Drupal" — перейти на страницу с плагином
• Плагин для CMS "Magento" — перейти на страницу с плагином

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

Тест на закрепление материала

Вывод

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

Успехов!

С Уважением, Юрий Немец