Как вставить фото в плагине add schema для рецептов

Всем привет! Надо идти в ногу с временем и сегодня на 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){ return $content. '</span>';} function mayak_recipeInstructions($the_content) { global $post; $the_content=preg_replace('#<h3(.?)</h3>#','<h3\1</h3><span itemprop="recipeInstructions">',$the_content); return $the_content;} add_filter('the_content', 'mayak_recipeInstructions'); add_filter('the_content', 'mayak_text_description');

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

mikrorazmetka11

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

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

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

Момент №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

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

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

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

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/UserComments"> <?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="commentTime"><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="commentText"><?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'); ?>

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

mikrorazmetka15

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

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

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

itemprop="interactionCount"

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

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

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

mikrorazmetka16

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

До встречи!

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

Источник: http://seo-mayak.com/seo-prodvizhenie/poiskovye-si...

  • Раздел: Бурито |
  • Автор: Fogjuice
  • Комментариев: 6
  • Просмотров: 2774 |