Как сделать микроразметку сайта или блога на WordPress

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

Шаблон называется XMarkup. Скачать его можете здесь вместе с инструкцией по созданию блога. Эта тема WordPress довольно известна в узких кругах, к тому же это моя первая тема блога.

Итак, чтобы внедрить микроразметку Schema.org, нам в первую очередь нужно проверить есть ли у нас микроразметка. Сделать это можно в Яндекс Вебмастере или в вебмастере Google. Но я рекомендую проверять именно через Яндекс, потому что гугл покажет что все отлично, если у вас установлен любой другой формат микроразметки, а нас интересует именно Schema.org. Для главной страницы должна присутствовать разметка анонсов постов, если выводятся последние записи, категории и дата анонсов, а так же изображения. Вот какой результат показал только что созданный мною сайт: Как видите, есть лишь описание последней статьи, выводимое плагином All In One Seo Pack, и немало других ошибок. Поэтому я буду делать микроразметку Schema.org с нуля. В первую очередь отключите возможность SEO плагину делать микроразметку Shema. В плагине All In One Seo Pack эту возможность можно отключить, просто убрав галочку в SEO настройках. По сути микроразметка это просто подстановка необходимых правил к определенным кускам кода. Этой подстановкой мы говорим поисковым системам, что означает тот или иной кусок кода и его содержимое. Для блога должны присутствовать следующие классы:

• Основа главной страницы — itemscope itemtype=”http://schema.org/BlogPosting”
• Основа записи блога — itemscope itemtype=”http://schema.org/Article”
• Основа комментариев — itemprop=”comment” itemscope itemtype=”http://schema.org/Comment”
• Название статьи — itemprop=”name”
• Описание статьи — itemprop=”description”
• Тело статьи — itemprop=”articleBody”
• Рубрика — itemprop=”articleSection”
• Дата публикации — itemprop=”datePublished”
• Автор — itemprop=”author”
• Автор комментария — itemprop=”creator”
• Текст комментария — itemprop=”text”
• Изображения — itemprop=”image”

Микроразметка записей блога

За вывод записей блога отвечает файл single.php соответственно все манипуляции нужно делать в этом файле. В первую очередь нужно указать поисковым системам, что этот формат страницы является постом блога делается это при помощи следующего правила:

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

Просто ищем код, отвечающий за вывод всего текста страницы и в его класс вставляем вышеуказанное правило. Получится примерно так: Теперь нужно разметить название статьи. Как я уже заметил выше, название размечается правилом itemprop=”name”. Ищем кусочек кода с упоминанием title и в его класс вставляем правило. Выглядеть это будет так: Теперь размечаем текст статьи при помощи правила itemprop=”articleBody”, вставив его в класс отвечающий за вывод статьи. Говоря простым языком просто ищем такой код и в его класс вставляем правило. Выглядеть это будет так: После этого нужно разметить рубрики при помощи правила itemprop=”articleSection”. У меня в коде для слова «Рубрика» и ссылки с названием самой рубрики был прописан один класс, поэтому я ссылку взял в дополнительный тег и внутрь него вставил правило articleSection. Если сделаете правильно, у вас должно получиться вот так:

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

Микроразметка даты публикации в WordPress

Если вы хотите сделать разметку даты публикации сначала убедитесь, что она у вас выводится в необходимом формате. Валидатор поддерживает только формат даты ISO 8601. Если интересует, почитайте в википедии что это за формат. Если говорить простым языком, то дата публикации должна быть такого вида:

Год-месяц-число (2015-07-10)

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

Можно было изменить формат, подправить стили или сделать в этом случае микроразметку даты через файл function.php, но я не силен в PHP, а возиться с изменением стилей не особо хочется. Я решил просто удалить этот блок, а дату вывести в виде обычной строчки при помощи вот этого куска кода:

Дата:

И соответственно в файл style.css прописал стили для класса date. В итоге стало вот так в коде:

И на странице:

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

Микроразметка schema для автора статьи выводится при помощи правила itemprop=”author”. Снова ищем код выводящий автора статьи и заключаем его в тег с правилом микроразметки. Должно выглядить так:

Ух! На этом микроразметка страницы поста закончена. Проверяем в валидаторе и видим следующее:

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

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

Что это значит? Допустим, вы написали оптимизированную статью «Как раскрутить группу ВКонтакте» длиною в 3 К символов, а в комментариях вас благодарят за советы, спрашивают про совсем другие соц. сети, в общем пишут что угодно, кроме главного ключа – раскрутить группу ВКонтакте. Когда вы только опубликуете статью, она будет релевантна на сто процентов, но чем больше будет писаться комментариев, не связанных с основной темой, тем менее релевантной будет ваша статья в глазах поискового робота. Чтобы этого не произошло, нужно роботу дать понять, что комментарии являются комментариями, а не продолжением статьи.

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

По хорошему нужно выкорчевывать такую микроразметку с корнем, но для этого придется перелопатить весь шаблон вдоль и поперек, проще сверстать новый. Поэтому достаточно просто переименовать vcard на любое другое слово, чтобы данный тип микроразметки не учитывался. Поочередно открываем файлы своего блога и ищем упоминание vcard, затем переименовываем его на любое слово, например, card. Переименовав vcard, мы можем убедиться что микроразметки комментариев не существует, что нам и требовалось, теперь будем внедрять микроразметку shema.org Комментарии размечаются при помощи правила

itemprop=”comment” itemscope itemtype=”http://schema.org/Comment”

Чаще всего микроразметка комментариев протисходит в файле comments.php или function.php. Ищем блок или начало функции, отвечающиую за вывод комментариев и подключаем вышеуказанное правило. Вот пример как это подключено в моем случае:

Теперь необходимо разметить автора комментария, дату публикации и сам комментарий. Начнем с автора. Автор комментария размечается правилом itemprop=”creator”. Просто ищем в коде функцию, выводящую автора комментария и вставляем данное правило. Должно получится вот так:

Теперь размечаем дату публикации комментария. Дата комментария должна быть в формате ISO 8601. То есть точно так же, как и при выводе даты публикации статьи. Здесь опять же возникла небольшая проблема с выбранным мной шаблоном.

Во первых формат даты был не тот, что нужен, во вторых для даты был прописан отдельный CSS класс. Да и просто выводилось три отдельных записи. Чтобы вам было понятнее, что я имею ввиду, вот кусочек кода, который выводил у меня дату комментария до внедрения микроразметки:

echo ‘’;                                                comment_date(‘j ‘);                                                rus_month2();                                                comment_date(‘, Y в g:i |’);                                                echo ‘’;

Я поменял формат вывода даты на ISO 8601, и вставил правило микроразметки даты публикации schema org- itemprop=”datePublished”. В результате все стало выводиться как надо. Вот пример кода, как стало:

Теперь нужно разметить сам комментарий. Делается это при помощи правила itemprop=”text”. Ничего нового, так же ищем функцию вывода текста комментария, и вставляем необходимое правило. Вот пример того, что должно получиться: Теперь проверяем результат в валидаторе Яндекса:

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

Автоматическая микроразметка комментариев WordPress

Недавно я случайно попал на блог Виталия Кириллова. Он в своей статье предлагает при помощи PHP убить сразу двух зайцев — исправить ошибку с неподдерживаемым Яндексом форматом Vcard и автоматически разметить комментарии. Я проверил на тестовом блоге, все прекрасно работает.

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

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

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

Мне стало интересно, как это изображение появилось в сниппете выдачи. Открыв исходный код страницы, я увидел, что изображению присвоено свойство itemprop=”image”, это свойство микроразметки schema org для изображений.

Так как я очень хорошо знаком с блогом advdk.com, я написал его автору Алексею Кобзареву на почту с вопросом, как он сделал микроразметку изображений. Алексей дал мне ссылку на пост своего блога, где рассказывал о внедрении микроразметки на блог. Почитать этот пост можете здесь. На своем блоге Алексей опубликовал PHP код, который автоматически делает микроразметку всех изображений блога на WordPress, подставляя правило itemprop=”image” к каждому изображению записи. Достаточно вставить PHP код в файл functions.php в начало сразу после открывающего тега 

// Микроразметка картинок 
function mayak_image_marking($content) {
global $post;
$pattern = "
                  
После того как я вставил этот код, все картинки автоматически разметились.
                  
Микроразметка хлебных крошек
                  
Я уже писал про хлебные крошки на своем блоге, но от той навигационной цепочки была польза только в виде визуального восприятия, где находится пользователь в данный момент. Если же рассматривать с точки зрения SEO, пользы от них особой не было. Я долго искал способ внедрения хлебных крошек, чтобы навигационная цепочка красиво отображалась в сниппете. И наконец нашел на одном из блогов. Сейчас вот так выглядят мои записи в поисковой выдаче Google:  Способ довольно простой, просто повторите все действия, что я сейчас опишу.
                  
1. Откройте файл functions.php сразу после открывающегося тега 
                  
// подключаем хлебные крошки
 function dimox_breadcrumbs() {
 $text['home'] = 'Главная страница'; // текст ссылки "Главная"
 $text['category'] = 'Архив рубрики "%s"'; // текст рубрики
 $text['search'] = 'Результаты поиска по запросу "%s"'; // текст с результатами поиска
 $text['tag'] = 'Записи с меткой "%s"'; // текст тега
 $text['author'] = 'Статьи автора %s'; // текст автора
 $text['404'] = 'Ошибка 404'; // текст страницы 404
 $show_current = 0; // 1 - показывать название текущей статьи/страницы/рубрики, 0 - не показывать
 $show_on_home = 1; // 1 - показывать "хлебные крошки" на главной, 0 - не показывать
 $show_home_link = 1; // 1 - показывать ссылку "Главная", 0 - не показывать
 $show_title = 1; // 1 - показывать подсказку (title) для ссылок, 0 - не показывать
 $delimiter = ' » '; // разделить между "крошками"
 $before = ''; // тег перед текущей "крошкой"
 $after = ''; // тег после текущей "крошки"
 /* === КОНЕЦ ОПЦИЙ === */
 global $post;
 $home_link = home_url('/');
 $link_before = '';
 $link_after = '';
 $link_attr = ' rel="v:url" property="v:title"';
 $link = $link_before . '%2$s' . $link_after;
 $parent_id = $parent_id_2 = $post->post_parent;
 $frontpage_id = get_option('page_on_front');
 if (is_home() || is_front_page()) {
 if ($show_on_home == 1) echo '' . $text['home'] . '';
 } else {
 echo '';
 if ($show_home_link == 1) {
 echo sprintf($link, $home_link, $text['home']);
 if ($frontpage_id == 0 || $parent_id != $frontpage_id) echo $delimiter;
 }
 if ( is_category() ) {
 $this_cat = get_category(get_query_var('cat'), false);
 if ($this_cat->parent != 0) {
 $cats = get_category_parents($this_cat->parent, TRUE, $delimiter);
 if ($show_current == 0) $cats = preg_replace("#^(.+)$delimiter$#", "$1", $cats);
 $cats = str_replace('', '' . $link_after, $cats);
 if ($show_title == 0) $cats = preg_replace('/ title="(.*?)"/', '', $cats);
 echo $cats;
 }
 if ($show_current == 1) echo $before . sprintf($text['category'], single_cat_title('', false)) . $after;
 } elseif ( is_search() ) {
 echo $before . sprintf($text['search'], get_search_query()) . $after;
 } elseif ( is_day() ) {
 echo sprintf($link, get_year_link(get_the_time('Y')), get_the_time('Y')) . $delimiter;
 echo sprintf($link, get_month_link(get_the_time('Y'),get_the_time('m')), get_the_time('F')) . $delimiter;
 echo $before . get_the_time('d') . $after;
 } elseif ( is_month() ) {
 echo sprintf($link, get_year_link(get_the_time('Y')), get_the_time('Y')) . $delimiter;
 echo $before . get_the_time('F') . $after;
 } elseif ( is_year() ) {
 echo $before . get_the_time('Y') . $after;
 } elseif ( is_single() && !is_attachment() ) {
 if ( get_post_type() != 'post' ) {
 $post_type = get_post_type_object(get_post_type());
 $slug = $post_type->rewrite;
 printf($link, $home_link . '/' . $slug['slug'] . '/', $post_type->labels->singular_name);
 if ($show_current == 1) echo $delimiter . $before . get_the_title() . $after;
 } else {
 $cat = get_the_category(); $cat = $cat[0];
 $cats = get_category_parents($cat, TRUE, $delimiter);
 if ($show_current == 0) $cats = preg_replace("#^(.+)$delimiter$#", "$1", $cats);
 $cats = str_replace('', '' . $link_after, $cats);
 if ($show_title == 0) $cats = preg_replace('/ title="(.*?)"/', '', $cats);
 echo $cats;
 if ($show_current == 1) echo $before . get_the_title() . $after;
 }
 } elseif ( !is_single() && !is_page() && get_post_type() != 'post' && !is_404() ) {
 $post_type = get_post_type_object(get_post_type());
 echo $before . $post_type->labels->singular_name . $after;
 } elseif ( is_attachment() ) {
 $parent = get_post($parent_id);
 $cat = get_the_category($parent->ID); $cat = $cat[0];
 $cats = get_category_parents($cat, TRUE, $delimiter);
 $cats = str_replace('', '' . $link_after, $cats);
 if ($show_title == 0) $cats = preg_replace('/ title="(.*?)"/', '', $cats);
 echo $cats;
 printf($link, get_permalink($parent), $parent->post_title);
 if ($show_current == 1) echo $delimiter . $before . get_the_title() . $after;
 } elseif ( is_page() && !$parent_id ) {
 if ($show_current == 1) echo $before . get_the_title() . $after;
 } elseif ( is_page() && $parent_id ) {
 if ($parent_id != $frontpage_id) {
 $breadcrumbs = array();
 while ($parent_id) {
 $page = get_page($parent_id);
 if ($parent_id != $frontpage_id) {
 $breadcrumbs[] = sprintf($link, get_permalink($page->ID), get_the_title($page->ID));
 }
 $parent_id = $page->post_parent;
 }
 $breadcrumbs = array_reverse($breadcrumbs);
 for ($i = 0; $i display_name) . $after;
 } elseif ( is_404() ) {
 echo $before . $text['404'] . $after;
 }
 if ( get_query_var('paged') ) {
 if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ' (';
 echo __('Page') . ' ' . get_query_var('paged');
 if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';
 }
 echo '';
 }
} 
// end dimox_breadcrumbs()
                  
Обращаю ваше внимание, что хлебные крошки должны располагаться под заголовком H1 если они стоят перед заголовком, это конечно не критично, но неправильно. Заголовок это главное, на что обращают в первую очередь поисковые роботы. Если у вас вообще не выводится заголовок H1 (такое бывает в некоторых бесплатных шаблонах WordPress), а вместо него присутствует заголовок H2, вам нужно это срочно исправлять! По логике вещей на странице не может быть заголовок второго уровня при отсутствии заголовка H1. Я об этом не раз упоминал и подробно описал в статье – SEO оптимизация статей блога.
                  

                    
                    

                      Возможно вас заинтересует:  Фильтр АГС Яндекса.
                    
                  
                  
2. Теперь в то место где требуется вывести навигационную цепочку вставьте вот этот код:
                  

                  
3. После вставки хлебных крошек в шаблон темы, нужно настроить стили для хлебных крошек. Для этого откройте файл style.css и в самый конец вставьте вот этот код:
                  
.entry-meta { font-size: 12px; width: 100%; height: auto; margin: 11px -1px 11px; font: normal 11px Arial, sans-serif; color: #000; text-decoration: none }
                  
При желании измените стили на свои, я просто привел пример со своего блога. Если вы все сделали правильно, через несколько недель в сниппете Google можете увидеть настроенные хлебные крошки.
                  
Микроразметка главной страницы блога
                  
Все анонсы статей на главной странице блога размечаются при помощи правила BlogPosting, а затем уже для анонсов размечаются названия и описания. Чаще всего за главную страницу отвечает файл index.php но может быть и другой. На пример, в теме моего блога за вывод главной страницы отвечает файл content.php. Если у вас шаблон Xmarkup, то смело открывайте файл index.php и в коде ищите класс, отвечающий за вывод всех анонсов записей на главной странице. В этот класс нужно вставить свойство:
                  

                    
itemscope itemtype=”http://schema.org/BlogPosting”
                  
                  
Вот как это должно выглядеть в коде:
                  

                    
                    
                  
                  
Теперь нам нужно разметить название статей, для этого ищем в коде упоминание  После того как нашли, заключаем его в тег span со значением itemprop=”name”. Должно получиться примерно так:
                  

                    
                    
                  
                  
Следующий шаг это описание статей выводимых анонсом на главной странице. Размечаются описания статей на главной при помощи свойства itemprop=”description” Просто ищем в файле код  и перед ним в spanвставляем значение itemprop=”description” Должно получиться примерно так:
                  

                    
                    
                  
                  
Теперь необходимо сделать разметку автора статьи. Она делается при помощи свойства itemprop=”author”. Просто ищите в файле код, отвечающий за вывод автора. Чаще всего это  и придайте ему свойство. Должно получиться примерно так:
                  

                    
                    
                  
                  
Микроразметка категорий для главной страницы отмечается свойством itemprop=”articleSection”. Ищем в код отвечающий за вывод категории. Называться может по разному, но всегда следует за словами «Рубрика», «Postedin» или другими в зависимости от того что видно на странице вашей темы. В выбранном мной шаблоне, код, выводящий название категории — category->cat_name. Смело заключаем его в  и ставим значение articleSection. Должно получиться так:
                  

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

                    
                    
                  
                  
Яндекс прекрасно различает все анонсы на главной страницы, видит названия, категорию, дату публикации и автора.