Микроразметка Schema.org для WordPress

  • 28.02.2020 22:50
  • 0
  • 247

Schema.org – общепринятый стандарт семантической разметки html-кода, которая основывается на внедрении в теги специальных атрибутов.

Микроразметка Schema.org отлично интерпретируется поисковыми системами Google, Yandex, Bing, Yahoo и прочими.

Для чего нужна семантическая разметка документа

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

  • Карточки товаров интернет-магазинов
  • Статьи
  • Посты в блогах
  • Страницы контактов
  • Кулинарные рецепты
  • Пошаговые инструкции и др.

микроразметка wordpress

Кроме того, внедрение Schema позволяет создать расширенные сниппеты в выдаче поисковиков, которые, в свою очередь, повышают CTR и, следовательно, посещаемость ресурса (на картинке выше показан пример расширенного сниппета, реализованного с помощью Схемы).

Как реализовать микроразметку на WordPress

Для внедрения Schema.org в Вордпресс существуют готовые решения, к примеру, плагины:

  • Schema Pro
  • All in One Rich Snippets

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

Поэтому в этой статье мы разберем внедрение микроразметки вручную.

wordpress микроразметка

Пошаговая инструкция по внедрению семантической разметки Schema.org в Вордпресс

В самом начале скажу, что Ваша тема 100% отличается от моей по тегам и классам. Так что действовать придется по аналогии.

Разметка шапки

В самом начале реализуем разметку верхней части нашего сайта. Для это открываем в редакторе файл header.php и ищем соответствующие элементы кода.

Первым делом разметим тег <body>:

<body itemscope="itemscope" itemtype="http://schema.org/WebPage">

Мы указали поисковикам, что каждая страница нашего сайта имеет тип WebPage. Это и понятно.

Далее размечаем тег <header>. У Вас это может быть <div class=”header”> или что-то другое:

<header itemscope itemtype="http://schema.org/WPHeader">

Здесь мы указываем, что содержимое тега <header> является шапкой сайта на Вордпрессе.

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

У меня код выглядит следующим образом:

<a itemprop="name" href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>

Внутри тега <a> у меня завернуто изображение с логотипом. Разметка скажет поисковику, что данный код – названия моего проекта.

Теперь переходим к описанию. У меня оно выглядит от так:

<span itemprop="description">

<?php bloginfo('description'); ?>

</span>

Указываем ПС, что этот код содержит описание сайта.

Разметка навигации

Сразу под шапкой у меня располагается навигационное меню. Размечаем его с помощью директивы SiteNavigationElement:

<nav itemscope itemtype="http://www.schema.org/SiteNavigationElement">

<ul class="menu">

<li itemprop="name"><a itemprop="url" href="https://webliberty.ru/">Главная</a></li>

<li itemprop="name"><a itemprop="url" href="https://webliberty.ru/author-bloga/">Автор</a></li>

</ul>

</nav>

Поисковики отлично читают html-код страниц. Но этим кодом мы говорим им, что это главное меню ресурса с определенными элементами. После внедрения свойств name и url в навигацию можно ожидать появления быстрых ссылок к сниппетах. Они повышают CTR проекта.

На этом я сохраняю и закрываю файл header.php.

Разметка основного содержимого страницы

Для этой работы нам понадобятся сразу 2 файла: single.php и page.php.

Первым делом ставлю тип содержимого в теге, определяющем начало поста:

<div class="PostText" itemscope itemtype="http://schema.org/Article">

Говорим ПС о том, что это – статья.

Далее маркируем заголовок статьи:

<h1 itemprop="headline"><?php the_title(); ?></h1>

Следующий шаг – категория статьи:

<span itemprop="articleSection"><?php the_category(',') ?></span>

Далее идет дата публикации и автор.

Для даты:

<span itemprop="datePublished"><?php the_time('Y-m-d')?></span>

Для автора:

<span itemprop="author"><?php the_author() ?></span>

Теперь находим тег, открывающий тело статьи, и преобразовываем к виду:

<div class="postcontent" itemprop="articleBody">

<?php the_content(); ?>

</div>

На этом все. С текстовой составляющей мы покончили. Не забудь внедрить код в оба файла. У меня они идентичны. Поэтому я сначала разметил один, скопировал его код и вставил во второй.

Сохраняем и закрываем оба файла.

Разметка сайдбара (боковой колонки)

Открываем sidebar.php. Тут все элементарно – нам потребуется найти открывающий колонку тег (у меня это <aside>) и преобразовать следующим образом:

<aside itemscope itemtype="http://schema.org/WPSideBar">

Этим мы говорим поисковым системам, что это – боковая колонка ВП-сайта.

Это все. Сохраняем и закрываем файл.

Разметка комментариев

Если у Вас реализовано комментирование, размечаем его. Это поможет поисковику понять, что это – не основной контент, а его обсуждение.

Открываем файл comments.php

Вот как выглядит размеченный комментарий у меня:

<?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ) ?> id="comment-<?php comment_ID() ?>" itemprop="comment" itemscope="itemscope" itemtype="http://schema.org/Comment">

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

Далее нам нужно разметить автора комментария:

<?php printf( __( '<cite class="fn" itemprop="creator">%s</cite>' ), get_comment_author_link() ); ?>

Здесь атрибут itemprop=»creator» указывает на автора комментария.

Далее делаем дату публикации комментария:

<span itemprop="datePublished">

<?php printf( __('%1$s'), get_comment_date('Y-m-d')); ?>

</span>

в <?php comment_time('H:i'); ?>

Осталось поработать над текстом комментария. Мой результат получился вот таким:

<div itemprop="text"><?php comment_text(); ?></div>

Комменты мы сделали. Сохраняем и закрываем файл.

Размечаем подвал сайта

Конечным этапом внедрения Схема.орг на сайт будет разметка футера. Открываем footer.php, ищем тег, открывающий эту секцию. У меня подвал заключен в тег <footer>. У Вас может быть <div>

Результат выглядит вот так:

<footer itemscope="itemscope" itemtype="http://schema.org/WPFooter">

По аналогии с шапкой, мы указали, что данная секция – подвал сайта на Вордпрессе.

Все. Разметка закончена. Сохраняем и закрываем файл.

Проверка в валидаторе

У Яндекса есть специальный сервис для проверки микроразметки Schema. Для проверки можно вставить УРЛ страницы сайта или ее исходный код.

микроразметка сайта wordpress

Если ошибок нет, это – успех.

Итоги

Итак, мы внедрили микроразметку сайта. Теперь продвигать проект будет еще легче.

Так как я – аффилейт казино, то этой разметки достаточно для моих проектов. Если у Вас проект, который содержит контактную информацию или какие-то инструкции, то у Яндекса есть документация для соответствующих типов страниц. Если владеете английским языком, то можно обратиться к официальной документации разработчиков стандарта Schema.org.

Комментарии (0)
Чтобы оставить комментарий, необходимо войти на сайт
Войти
Последние комментарии
Big Affiliate
Привет. Шаблон довольно старый, возможно он уже не совместим с текущими версиями вордпресса.
Выбрал для себя на Mostbet Partners гибридную схему. Мало кто сегодня предлагает такое преимущество. Считаю, что CPA+RS дает максимальный выхлоп. Выгода очевидна, если действовать с умом. ПП предлагает хорошее гео и минималку на вывод от 50 баксов.
Привет. Установила шаблон BCL но он не заработал, на сайте ни чего не отображается. Я в этом деле новичок, вы могли бы помочь разобраться
Пользователи