Как сделать сниппеты с хлебными крошками в 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

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

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

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

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

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

</a> &rArr;

</div>

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

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

Вторым элементом выставим категорию, в которой находится запись. Если запись находится в нескольких категориях, выведется та, у которой меньше 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>

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

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

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

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

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

</a>

</div>

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

Теперь обернем наш код еще одним дивом и добавим 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; ?>

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

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

<?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; ?>

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

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

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

.breadcrumb {display: inline-block;}

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

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

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

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

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

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

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

1. Ссылку на главную страницу в строке <a href=”../” itemprop=”url”>

Вместо <a href=”../”, который подставлял ссылку на архив, я поставила <a href=”/”

2. Убрала правило правило отображения хлебных крошек только в посте

Я вставила код сразу в single.php, поэтому и убрала вот эту часть

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

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

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

Также интересно:

1. Как сделать детальный анализ сайта
2. Как сделать скриншот: 5 лучших программ
3. Используем Google Translate… не по назначению
4. А вы готовы надуть Google???