Как сделать микроразметку на сайте вордпресс?

Всем привет! Сегодня решил написать мощную статью про то, как сделать микроразметку на сайте Вордпресс! А вы знаете вообще что это такое? А для чего это нужно? А какой эффект даёт микроразметка в плане ранжирования? Всё это и кое-что ещё Вы узнаете из этой статьи.

Жил был поисковик, читал сайты, изучал информацию на них, некоторые индексировал, на некоторые накладывал фильтры… Устал он, стал упускать в индексе некоторую информацию, уж очень много сайтов создаётся, обновляется, что на отдых и времени нет. Тогда он решил упростить этот процесс и создал специальные атрибуты и сказал, что если поместить их на сайт, то уж точно он ничего не потеряет и вся информация, заключённая в эти атрибуты обязательно попадёт в индекс, а ключевая — в сниппет. И с тех пор те, кто прислушался к словам поисковика стали жить счастливо и был им заветный ТОП .

Микроразметка помогает все данные собрать в определённую, удобную для поисковика, последовательность данных (структурирует данные), что облегчает последнему работу, по извлечению и переработке информации.

В 2011 году все крупные поисковики, такие как Гугл и Яндекс (они нас в большей мере интересуют) сообщили о внедрении семантической микроразметке.

Кстати, вот есть неплохое видео по микроразметке:

Как проверить микроразметку?

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

Для этого вам нужно войти в Яндекс Вебмастер, ввести Url проверяемой страницы сайта и нажать «Проверить микроразметку«.

У Гугла микроразметку можно проверить здесь по аналогии.

Микроразметка на движке WordPress

Перед тем, как начать внедрение микроразметки, необходимо сначала убедиться, что у вас её нет. Для проверки используйте пост, в котором читатели оставили несколько комментариев. Дело в том, что в некоторых бесплатных шаблонах есть своя микроразметка формата «hCard«, в которой присутствуют атрибуты именно для описания человека, написавшего контент. Т.е. указывается фамилия, ник, аватар автора. Эту и любую другую микроразметку необходимо удалить и только после этого приступать к настройке микроразметки schema.org.

После того, как «левая» микроразметка удалена, приступим к установке микроразметки  schema.org. Для начала разметим название сайта и его описание.

Для этого в админке блога открываем header.php, находим тег header и добавляем к нему  itemscope itemtype, где itemscope указывает на то, что вся информация, которая будет заключена внутри тега, описывает какую-то сущность, а itemtype говорит, что это за сущность.

Теперь давайте покажем, что мы будем описывать именно header вордпресс-блога:

itemscope itemtype=»http://schema.org/WPHeader»

Для того, чтобы указать поисковикам какую именно информацию мы хотим им показать используют атрибут itemprop.

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

itemprop=»headline»

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

В стандартных шаблонах, функция, которая отвечает за вывод заголовка сайта (<?php bloginfo(‘name’); ?>), находится в теге h1. Вот именно туда мы и добавляем наш атрибут (см. скрин ниже).

За описание сайта в стандартных шаблонах отвечает функция <?php bloginfo( ‘description’ ); ?>, которая находится в теге h2. Опять же внутрь этого тега добавляем следующий атрибут:

itemprop=»description»

А вот, что должно получиться:

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

Для семантической разметки header.php мы использовали следующие атрибуты:

• itemscope itemtype=»http://schema.org/WPHeader»
• itemprop=»headline»
• itemprop=»description»

Микроразметка статьи

Итак, при микроразметке статьи нам нужно указать поисковому роботу, что вот это — начало статьи; это — контент поста; это — дата публикации статьи; это — автор поста. Для микроразметки статьи откройте файл single.php либо файл с подобным названием, может быть content-single.php.

Теперь нам нужно найти функцию (она заключена в контейнере div), отвечающую за вывод контента, это функция обычно имеет название content либо что-то похожее, у меня, например, вообще  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>.

А добавить нужно следующий атрибут:

itemscope itemtype=»http://schema.org/Article»

У меня получилось вот так:

</div>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article itemscope itemtype=»http://schema.org/Article»>

Опять же, у меня шаблон индивидуальный, поэтому нестандартно. У вас же должно получиться примерно так:

<div id=»content» itemscope itemtype=»http://schema.org/Article»>

Ок. Идём дальше.

Для того, чтобы вывести заголовок статьи, Вордпресс использует функцию <?php the_title(); ?>, ищем её и внутри её контейнера либо тега, в моём случае h1, вставляем следующий код:

itemprop=»name»

Вот что получилось у меня:

<h1 class=»title» itemprop=»name»><?php the_title(); ?></h1>

Для того, чтобы разметить содержание статьи, нам необходимо для начала найти функцию, которая отвечает за её вывод. Это функция <?php the_content(); ?>, находим её и внутри неё добавляем следующий код:

itemprop=»articleBody»

В итоге у меня получилось следующее:

<div class=»post_content» itemprop=»articleBody»>
<?php the_content(); ?>
</div>

Далее нам нужно указать роботу на автора статьи, находим функцию <?php the_author() ?>, в некоторых случаях данная функция не имеет контейнера, а внутрь её нельзя вставить необходимый код, так как шаблон перестанет работать, тогда её нужно будет заключить в тег <span> </span>:

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

Код, который нужно вставить, как вы уже поняли — это itemprop=»author».

В моём шаблоне я убрал надпись автора статьи, посчитал лишним, поэтому свой код я вам не покажу.

Дальше размечаем дату публикации поста. За вывод даты отвечает функция <?php the_time(‘Y-m-d’); ?>, находим её, и в её контейнер (если его нет, заключаем <span> </span> ) вставляем следующий код:

itemprop=»datePublished»

У меня получилось в итоге так:

<div class=»info_date» itemprop=»datePublished»><?php the_time(‘Y-m-d’); ?></div>

Ну и последнее по микроразметке статьи: если вы хотите указать поисковому роботу на рубрику, в которой находится размечаемая статья, то нужно найти функцию <?php the_category(‘, ‘); ?>, и вставить в её контейнер или при отсутствии его между тегами <span> </span> следующий код:

itemprop=»articleSection»

Итог проделанной работы:

<div class=»info_cat» itemprop=»articleSection»><?php the_category(‘, ‘); ?></div>

либо ( со span)

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

Вот список атрибутов, которые понадобятся для разметки статьи:

• itemscope itemtype=»http://schema.org/Article»
• itemprop=»articleBody»
• itemprop=»name»
• itemprop=»articleSection»
• itemprop=»datePublished»
• itemprop=»author»

Семантическая микроразметка изображений сайта

Раньше приходилось делать микроразметку картинок вручную! Т.е. внутри каждой картинки вставлять атрибут «itemprop=»image». 

Представьте только: к каждой картинке! Это хоть и не долго (когда руку набьёшь), но нудно очень. Благо можно этот процесс автоматизировать. Для этого в файле functions.php нужно добавить следующий код:

/*** ДОБАВЛЯЕМ МИКРОРАЗМЕТКУ ИЗОБРАЖЕНИЙ ***/
function micro_image($content) { global $post; $pattern = «<img»; $replacement = ‘<img itemprop=»image»‘; $content = str_replace($pattern, $replacement, $content); return $content; } add_filter(‘the_content’, ‘micro_image’);

Вот и всё. Неважно где, главное, чтобы предыдущий код (функция) закрывалась. Обычно добавляют в конец, перед ?>.

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

Честно говоря в Интернете сложно найти нормальное пояснение для разметки комментариев. Да и в каждом шаблоне может быть по-разному. Поэтому я предлагаю самое простое решение — внедрение микроразметки комментариев через функцию (код), который нужно будет вставить в файл functions.php ПОСЛЕ тега ?>, а не как мы привыкли до ?>, этот код вы можете скачать посмотреть здесь.

Отлично. Идём дальше. Теперь нам нужно найти в файле comments.php такой код:

<?php wp_list_comments(); ?>

После чего в его скобках вставить вот этот код:

‘callback=mayak_comment’

Если в скобках есть какой-либо код, то ‘callback=mayak_comment’ добавляем через & в самый конец выражения, например вот так:

<?php wp_list_comments(‘type=»comment»&callback=mayak_comment’); ?>

Теперь, для того, чтобы показать поисковому роботу на общее число комментариев к определённой статье, необходимо в файле comments.php найти следующую строку:

<h3 id=»comments»>Комментариев к записи: <?php comments_number(‘Нет’, ‘1’, ‘%’ );?></h3> 

Это опять же у стандартных шаблонов, у вас может отличаться.

И в данный контейнер функции <?php comments_number(‘Нет’, ‘1’, ‘%’ );?> добавляем следующий атрибут:

itemprop=»interactionCount»

В результате получаем следующее:

<h3 id=»comments» itemprop=»interactionCount»>Комментариев к записи: <?php comments_number(‘Нет’, ‘1’, ‘%’ );?></h3>

Семантическая разметка контактных данных

Здесь всё просто, вставляете свои контактные данные в шаблон кода:

<div itemscope itemtype=»http://schema.org/PostalAddress»>

<span itemprop=»name»>Прописываем название блога</span>

<span itemprop=»postalCode»>Ваш индекс</span>

<span itemprop=»addressLocality»>Город, в котором Вы живете</span>

<span itemprop=»streetAddress»>Адрес</span>
<span itemprop=»telephone»>Телефон</span> <span itemprop=»email»>Электронная почта (желательно, чтобы в адресе фигурировал домен)</span>

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

А вы уже оформили подписку на обновления блога?