Микроразметка Schema.org. Пример использования

Главная » SEO продвижение » Поисковые системы » Микроразметка Schema.org на примере кулинарного сайта

Микроразметка Schema.org на примере кулинарного сайта

2014-08-12 автор: Виталий Кириллов

Всем привет! Надо идти в ногу с временем и сегодня на SEO Маяк я расскажу, что за «зверь» семантическая микроразметка Schema.org.

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

Микроразметка Schema.org была признана основными поисковыми системами еще 2011 году и в данное время активно внедряется веб-мастерами в свои проекты.

Наверное главный вопрос, что дает эта микроразметка и стоит ли ей вообще размечать сайты?

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

Также микроразметка влияет на внешний вид сниппета. У меня пока еще нет своего примера для демонстрации, но вы наверняка встречали в выдачи Яндекса такие сниппеты:

mikrorazmetka

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

Микроразметка шапки сайта

Советую обязательно сделать резервную копию файлов, дабы избежать ненужных проблем. Прежде всего идем в Яндекс Вебмастер и жмем на строчку «Проверить микроразметку»:

mikrorazmetka1

На открывшийся странице в поле «URL документа» вбиваем свой домен и жмем кнопку «Проверить»:

mikrorazmetka2

Как видите, на dommenu.ru микроразметка не обнаружена. Теперь давайте это дело поправим.

Первым делом надо снять галочку в пункте «Use Schema.org Markup» в плагине All in One SEO Pack.

Затем с помощью FTP клиента Notepad++ открываем для редактирования файл header.php и ниже тега <body> ищем такую строчку:

<div id="wrapper">

У кого-то это может быть:

<div id="header">

У вас конечно может быть другая структура шаблона, главное, чтобы действие контейнера <div> распространялось до конца кода файла header.php. Надеюсь понятно объясняю.

В самый конец строчки нам надо вставить такой элемент разметки:

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

В общем выглядеть это должно так:

<div id="wrapper" itemscope itemtype="http://schema.org/WPHeader">

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

mikrorazmetka3

Обратите внимание на слово помеченное стрелочкой. Именно это слово находится в конце вставленного нами элемента микроразметки и не трудно догадаться, что это часть словаря Schema.org, которая будет отвечать за шапку сайта. Весь словарь можно посмотреть здесь.

В предупреждение сообщается, что не хватает обязательного поля description. Давайте его добавим. Для этого ищем в коде такую строчку:

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

И прямо в тег h2 (у вас это может быть другой тег) добавляем следующее:

itemprop="description"

После чего строчка должна выглядеть так:

<h2 itemprop="description"><?php bloginfo('description');?></h2>

Смотрим валидатор:

mikrorazmetka5

Ага, валидатор просит 250 символов в описании сайта, ну что же, давайте мы ему их предоставим:

mikrorazmetka4

Теперь полный порядок. Но на этом микроразметка header.php еще не закончена. Ищем строчку с заголовком сайта. У меня она выглядит так:

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

И также в тег h1 или любой другой, которые на вашем сайте оборачивает заголовок вставляем следующий элемент микроразметки:

itemprop="headline"

Строчка теперь выглядит так:

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

Обращаемся к валидатору:

mikrorazmetka6

Теперь в микроразметке шапки у нас есть название сайта. С шапкой вроде все, самое время приступить к разметке записей.

Микроразметка страниц с записями (рецептами)

Открываем любую страницу с рецептом, копируем URL и вставляем в валидатор:

mikrorazmetka7

Ужас, сплошные предупреждения, хотя шапочка теперь у нас аккуратная. А что самое главное нет никакой информации о самом рецепте. Оставим предупреждения пока в покое, ими мы займемся чуть позже, а пока приступим к разметке рецепта.

Для этого открываем файл single.php. У кого неразбериха с файлами советую почитать мою статью о структуре современных шаблонов.

Ищем в файле класс, который находиться ниже такого PHP кода:

<?php get_header(); ?>

У меня он выглядит так:

<div class="span-24" id="contentwrap">

И в самый конец строчки вставляем следующий элемент микроразметки:

itemscope itemtype="http://schema.org/Recipe"

Кстати вы заметили слово «Recipe». Это значит вступает в силу раздел словаря Schema.org отнёсшийся к рецептам. Должно получится следующее:

<div class="span-24" id="contentwrap" itemscope itemtype="http://schema.org/Recipe">

Просим валидатор проверить:

mikrorazmetka8

Итак раздел «Рецепты» активирован, но он пустой. Теперь надо его наполнить. Ищем заголовок рецепта. У меня он выглядит так:

<h2 class="title entry-title"><?php the_title(); ?></h2>

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

itemprop="name"

Вот что должно получится:

<h2 itemprop="name" class="title entry-title"><?php the_title(); ?></h2>

Смотрим валидатор:

mikrorazmetka9

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

<ol> 
<li>Капуста</li>
<li>Марковка</li> 
<li>Картошка</li> 
</ol>

Наша задача заключается в том, чтобы в каждый элемент списка <li> добавить разметку. Должно получится так:

<ol> 
<li itemprop="ingredients">Капуста</li> 
<li itemprop="ingredients">Марковка</li>
<li itemprop="ingredients">Картошка</li> 
</ol>

Делать это каждый раз вручную — дело неблагодарное, поэтому мы призовем на помощь PHP. Я написал небольшую функцию, которая сделает это за нас, причем исправит все старые рецепты и будет исправно работать с новыми.

Открываем файл functions.php и в самое начало, после тега <php вставляем следующую функцию:

function mayak_ingredients($content) {
global $post;
$pattern = "<li";
$replacement = '<li itemprop="ingredients"';
$content = str_replace($pattern, $replacement, $content);
return $content;
}
add_filter('the_content', 'mayak_ingredients');

Бежим к валидатору:

mikrorazmetka10

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

Все в тот же файл functions.php вставляем следующий код:

function mayak_text_description($content){
$ot = '<p(.*?)/p>';
$do = 'p itemprop="description" \\1/p';
$content = preg_replace($ot, $do, $content, 1);
return $content;
}
add_filter('the_content', 'mayak_text_description');

Помню, как после многочисленных фиаско, я с дрожью в пальцах нажимал кнопку «Проверить». Но для вас это просто, в общем жмем:

mikrorazmetka11

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

На самом деле с микроразметкой рецепта мы еще не закончили осталась пара маленьких моментов:

Момент №1. Кто автор рецепта?
Момент №2. Каким образом изображения попадут в поиск?

Да уж мороки с этой микроразметкой, ведь жили же без нее как-то раньше и ничего и вообще кто ее придумал… Ну да ладно, начнем с автора рецепта. Открываем файл single.php и ищем такой код:

<?php the_author() ?>

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

itemprop="author"

В общем выглядеть должно так:

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

Что скажет валидатор:

mikrorazmetka12

Итак, мы переходим к последнему этапу микроразметки страницы рецепта — это изображения. Допустим у нас есть код изображения, неважно, приведу для примера такой:

<img class="aligncenter size-full wp-image-3318" title="Mясной рулет с яйцом" src="http://DomMenu.ru/wp-content/uploads//2013/02/myasnoi-rulet-s-yaicom.jpg" alt="myasnoi rulet s yaicom" width="500" height="375"/>

Что нам надо сделать? Нам надо в каждое изображение добавить вот такой элемент микроразметки:

itemprop="image"

Я как-то прочитал на одном блоге, веб-мастерица привела целую фото-инструкцию как добавлять микроразметку в картинки. Естественно вручную.

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

function mayak_image_marking($content) {
global $post;
$pattern = "<img";
$replacement = '<img itemprop="image"';
$content = str_replace($pattern, $replacement, $content);
return $content;
}
add_filter('the_content', 'mayak_image_marking');

После чего, во все изображения какие были на блоге и какие будут, микроразметка внедриться сама. Проверяем результат на валидаторе. Вуаля:

mikrorazmetka13

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

Теперь разметим первое изображение в рецепте, которое должно отображаться в сниппете. Для этого внедрим, вернее поменяем в коде атрибут: itemprop='image' на itemprop='resultPhoto'.

В этом нам поможет простенькая функция:

function mayak_result_image($content) {
return  preg_replace(array('{<img itemprop="image"}'), array('<img itemprop="resultPhoto"'),$content, 1); 
}
add_filter('the_content', 'mayak_result_image');

Важно! Необходимо соблюсти последовательность функций. Функция mayak_result_image() должна обязательно располагаться в файле ниже функции mayak_image_marking(), иначе элементы не заменятся!

mikrorazmetka19

Осталось разметить зону комментариев. Приступим!

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

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

mikrorazmetka14

Опять разработчики WordPress накосячили, а люди месяцами греют себе мозги пытаясь найти ответы. Ну да ладно я тоже был среди этих людей и из общей массы веб-мастеров себе не выделяю, все мы «одной крови».

Поэтому я предлагаю миру лекарство, которое излечит Ваш сайт от этих предупреждений. Открываем многострадальный файл functions.php и вставляем в самый конец, ПОСЛЕ закрывающего тега ?> следующую не маленькую функцию:

<?php
/*** Микроразметка в комментариях ***/
function mayak_comment($comment, $args, $depth){
$GLOBALS['comment'] = $comment;
if ( 'div' == $args['style'] ) {
$tag = 'div';
$add_below = 'comment';
} else {
$tag = 'li';
$add_below = 'div-comment';
}
?>
<<?php echo $tag; ?> <?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ); ?> id="comment-<?php comment_ID(); ?>">
<?php if ( 'div' != $args['style'] ) : ?>
<div id="div-comment-<?php comment_ID(); ?>" class="comment-body">
<?php endif; ?>
<div class="comment-author">
<?php if ( 0 != $args['avatar_size'] ) echo get_avatar( $comment, $args['avatar_size'] ); ?>
</div>
<div itemprop="comment" itemscope="itemscope" itemtype="http://schema.org/Comment">
<?php printf( __('<div itemprop="creator">%s:</div>' ), get_comment_author_link() ); ?>
<?php if ( '0' == $comment->comment_approved ) : ?>
<em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ) ?></em>
<br />
<?php endif; ?>
<div class="comment-meta commentmetadata" itemprop="datePublished"><a href="<?php echo esc_url( get_comment_link( $comment->comment_ID, $args ) ); ?>">
<?php
/* translators: 1: date, 2: time */
printf( __( '%1$s' ), get_comment_date('Y-m-d')); ?></a><?php edit_comment_link( __( '(Edit)' ), '&nbsp;&nbsp;', '' );
?>
</div>
<span itemprop="text"><?php comment_text( get_comment_id(), array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?></span>
<div class="reply">
<?php comment_reply_link( array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
</div>
</div>
<?php if ( 'div' != $args['style'] ) : ?>
</div>
<?php endif; ?>
<?php
}
?>

После чего открываем файл comments.php и ищем там такой код:

<?php wp_list_comments(); ?>

И в скобки вставляем следующее:

'callback=mayak_comment'

Если в скобках уже был какой-то код, то просто добавляем в конец через знак «&». В общем может быть так:

<?php wp_list_comments('callback=mayak_comment'); ?>

или так:

<?php wp_list_comments(' type=comment&avatar_size=48&callback=mayak_comment' ); ?>

Идем проверять на валидаторе:

mikrorazmetka18

Больше никаких предупреждений, но остался один штрих. В том же файле comments.php ищем такую строчку:

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

У вас она может отличатся, но функция comments_numbe() везде одна. К тегу заголовка добавляем следующий элемент микроразметки:

itemprop="commentCount"

Должно получиться так:

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

И что это нам дало? А вот что:

mikrorazmetka17

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

Вышла в свет свежая статья: Гугл, Яндекс и обновление микроразметки Schema.org.

До встречи!

С уважением, Виталий Кириллов