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

Всем привет! На Блоге SEO сектанта гость. Зовут его Павел, остальное он предпочел оставить в секрете :)

Специально для Promored Павел написал интересный пост о том, как добавить в сниппет хлебные крошки без каких-либо плагинов.

Хлебные крошки являются одним из способов “расширения” сниппетов в Гугле, как и добавление рейтинга. В эпоху исчезнувших из выдачи фотографий авторов это то, что нужно!

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


Еще один хороший способ увеличить CTR сниппета в Гугле, а как следствие – и поведенческий фактор – это добавление хлебных крошек. Сами по себе хлебные крошки улучшают внутреннюю перелинковку на сайте, а при добавлении к ним микроразметки data-vocabulary.org/Breadcrumb они начинают отображаться и в сниппете Гугла, делая его куда привлекательнее.

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

В обычном сниппете мы видим url страницы, который очень редко выглядит привлекательным для пользователя

Сниппет с обычным урлом в Гугл

После отмены авторства в сниппетах Гугла, хлебные крошки и рейтинг остаются лучшими способами увеличения CTR сниппета.

Гугл сниппет с рейтингом и хлебными крошками

Микроразметка хлебных крошек должна выглядеть следующим образом
<div itemscope itemtype="https://data-vocabulary.org/Breadcrumb">

<a href="" itemprop="url">

<span itemprop="title">Главная</span>

</a>

</div>

Реализуем микроразметку хлебных крошек в WordPress

ok Добавляем ссылку на главную страницу

Первым элементом хлебных крошек будет ссылка на главную страницу, тут все просто:

<div itemscope itemtype="https://data-vocabulary.org/Breadcrumb">

<a href="../" itemprop="url">

<span itemprop="title">Главная</span>

</a> &rArr;

</div>

&rArr; – это двойная стрелочка вправо, используем для внешней привлекательности.

ok Добавляем ссылку на категорию

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

<div itemscope itemtype="https://data-vocabulary.org/Breadcrumb">

<?php $categories = get_the_category();

if($categories[0]){

echo '<a href="' . get_category_link($categories[0]->term_id ) . '" itemprop="url"><span

itemprop="title">'. $categories[0]->name . '</span></a> &rArr; ';}?>

</div>

ok Добавляем ссылку на запись

Ну и закончим все ссылкой на запись:

<div itemscope itemtype="https://data-vocabulary.org/Breadcrumb">

<a href="<?php the_permalink() ?>" itemprop="url">

<span itemprop="title"><?php the_title(); ?></span>

</a>

</div>

ok Делаем “обертку” для кода

Теперь обернем наш код еще одним дивом и добавим css класс

<div>

<div class="breadcrumb" itemscope itemtype="https://data-vocabulary.org/Breadcrumb">

<a href="../" itemprop="url">

<span itemprop="title">Главная</span>

</a> &rArr;

</div>

<div class="breadcrumb" itemscope itemtype="https://data-vocabulary.org/Breadcrumb">

<?php $categories = get_the_category();

if($categories[0]){

echo '<a href="' . get_category_link($categories[0]->term_id ) . '" itemprop="url"><span

itemprop="title">'. $categories[0]->name . '</span></a> &rArr; ';}?>

</div>

<div class="breadcrumb" itemscope itemtype="https://data-vocabulary.org/Breadcrumb">

<a href="<?php the_permalink() ?>" itemprop="url">

<span itemprop="title"><?php the_title(); ?></span>

</a>

</div>

</div>

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

<?php if(is_singular()) : ?>

Наш код

<?php endif; ?>

Также советую всем использовать html5 тег <nav>, чтобы объявить хлебные крошки элементом навигации.

ok Смотрим, что получилось

Соединяем все шаги, в результате получаем вот такой код:

<?php if(is_singular()) : ?>

<nav><div>

<div class="breadcrumb" itemscope itemtype="https://data-vocabulary.org/Breadcrumb">

<a href="../" itemprop="url">

<span itemprop="title">Главная</span>

</a> &rArr;

</div>

<div class="breadcrumb" itemscope itemtype="https://data-vocabulary.org/Breadcrumb">

<?php $categories = get_the_category();

if($categories[0]){

echo '<a href="' . get_category_link($categories[0]->term_id ) . '" itemprop="url"><span

itemprop="title">'. $categories[0]->name . '</span></a> &rArr; ';}?>

</div>

<div class="breadcrumb" itemscope itemtype="https://data-vocabulary.org/Breadcrumb">

<a href="<?php the_permalink() ?>" itemprop="url">

<span itemprop="title"><?php the_title(); ?></span>

</a>

</div>

</div></nav>

<?php endif; ?>

Вставляем его в шаблон туда, где хотите вывести хлебные крошки. Я вывел их под телом записи.

ok Меняем стиль хлебных крошек с помощью CSS

Добавляем в css стиль вашей темы селектор breadcrumb

.breadcrumb {display: inline-block;}

Через css можете настроить любое удобное отображение хлебных крошек. У меня получилось так:

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

ok Проверяем микроразметку в Google

После установки хлебных крошек, проверяем микроразметку с помощью инструмента проверки структурированных данных

Проверка разметки хлебных крошек в Гугле

Посмотреть, как это работает, вы можете на странице, рассказывающей как убрать рекламу в браузере Google Chrome


Теперь на связи снова SEO сектант. По этому же уроку (только с некоторыми изменениями) я разместила хлебные крошки у себя на блоге.

Хлебные крошки на Блоге SEO сектанта

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

Хлебные крошки в сниппете Гугла

Что я изменила:

  1. Ссылку на главную страницу в строке <a href=”../” itemprop=”url”>
  2. Вместо <a href=”../”, который подставлял ссылку на архив, я поставила <a href=”/”

  3. Убрала правило правило отображения хлебных крошек только в посте
  4. Я вставила код сразу в single.php, поэтому и убрала вот эту часть

    <?php if(is_singular()) : ?> 
    <?php endif; ?>
    

    Я еще посмотрела варианты стрелок, но эти мне понравились больше всех :)

    Вот и все, вперед разбрасывать хлебные крошки по своим сайтам! и не забывайте подписываться на Блог SEO сектанта!

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

1 звезда2 звезды3 звезды4 звезды5 звезд! Ура! (13 голосов, оценка: 4.92 из 5)
Loading...Loading...
Последние комментарии

Ответить на Вячеслав Отмена ответа

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

CommentLuv badge

Для любых предложений по сайту: [email protected]