Внедряем микроразметку Schema.org в статьи различной тематики

Статья о том, как внедрить микроразметку Schema.org в код сайта со статьями с различной тематики: помощь тем админам, которые управляют бытовым сайтом широкого профиля: т.е множество рубрик различной направленности – кулинарные, вязальные, медиа видеосайты, строительные и т.д… Вроде бы всё здорово, интересный блог, много полезной информации… однако, когда дело доходит до микроразметки Schema.org, владелец опускает руки!!

Если зайти на страничку помощи Яндекс и справиться о синтаксических правилах разметки schema, то, многих сайтменов, те разъяснения, приводят к ещё большему замешательству.

Но с иной стороны: коли вся эта правка кода для нас тёмный лес, почему бы нИ обратиться к профи..? или нИ внедрить теги разметки Schema (схема) в свой блог самому: чем сегодня и займёмся!

 

 

 

 

 

 

микроразметка Schema.org в статьях разной тематики

 

 

 

 

 

 

Разметка кулинарного сайта, на мой взгляд, достаточно проста в сравнении с иными…

 

 

 

 

Итак:

 

…всего-то требуется добавить пару-тройку атрибутов и – готово дело! Сложнее, коли на вашем сайте имеются рубрики иной направленности, тогда вступают в силу условия php отработки кода той или иной странички (рубрики) по её ID – идентификатору.

Но об этом ниже:

 

 

А пока, вот

 

 

Для кулинарных сайтов – в статьях рецептов – как известно, по правилам микроразметки, желательно использовать мета тег itemprop="description" в решении этой задачи возникают трудности – что это за тег и как его правильно добавить, описано в этой статье.

 

 

 

 

обязательные атрибуты микроразметки:

 

 

 

 

 

 

 

 

рекомендуемые поля микроразметки Schema.org:

 

 

 

 

 

 

Вот основные атрибуты, которые нам потребуются.

 

Если нужен более расширенный вариант обозначений блюд, переходите на страничку помощи (ссыль ниже) и добавляйте атрибутику полей по аналогии…

 

 

 

 

 

как внедрить Schema.org в различные тематические рубрику сайта

 

 

Эта статья, продолжение разбора правил разметки Schema.org!

 

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

 

Также даю ссылку на раздел помощи Яндекс и фотку структуры размеченной атрибутикой schema.org странички.

 

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

 

 

Занавес открывается:

 

 

 

 

как микроразметить Schema.org кулинарную рубрику сайта

 

 

 

 

(подсказка Яндекс – картинка кликабельна)

 

 

 

 

 

Каркас размечаемой страницы в нашем варианте:

 

…приблизительно таким макаром микроразмечается текст кулинарной статьи!

 

 

<div itemscope itemtype="http://schema.org/Recipe"> <!-- тип разметки помеченный классом -->

<span class="meta_date" itemprop="datePublished"><?php the_time('Y-m-d') ?></span><!-- дата -->

<meta itemprop="dateModified" content="<?php the_modified_time('Y-m-d')?>"/><!-- дата редакции -->

<span class="meta_author" itemprop="author"><?php the_author() ?></span><!-- автор -->

<span class="meta_categories" itemprop="recipeCategory"><?php the_category(', '); ?></span>

 

<h1 itemprop="name">Заголовок</h1> <!-- имя рецепта -->

 

<!-- вступительный текст статьи -->

 

<h2>ингредиенты:</h2>

<ul>

<li>1 стакан муки;</li>

<li>2 яйца;</li>

<li>1 ст. кефира;</li>

</ul>

<!-- текст статьи и т.п. -->

</div>

 

 

 

Всё просто: открываете файл post-single.php или single.php и дописываете необходимую атрибутику (просто копируйте в коде выше и переносите к себе, с поправками).

 

 

Размечать, например так:

 

…в подобной строке прописывайте кулинарный атрибут микроразметки…

 

 

<span class="meta_author"><?php the_author() ?></span>

 

 

…получится так:

 

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

 

 

И… примером (по аналогии)

 

 

<h1 class="title"><?php the_title(); ?></h1>

 

 

вот так-с должно получиться…

 

 

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

 

 

…поля span произвольно, по желанию… см. у себя в файле!

 

 

Далее повторяете и с иными строками документа по аналогии…

 

 

 

 

 

 

как внедрить микроразметку Schema.org в маркированный список кулинарных ингредиентов

 

 

 

 

Чтобы разметить маркированный список <li> </li> ингредиентов исключительно в необходимой рубрике, напишем такую функцию:

(принцип используется в одном из плагинов) я кое-что вычленил и поправил под себя –

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

 

 

 

/** микроразметка для ингредиентов - приготовление **/
function replace_mihalica_recipe($recipe){
$replace = array(
'<li'=> '<li itemprop="ingredients"', // добавляем атрибутику ingredients
);
if(in_category(14) ) {//задаем категорию обработки
$recipe = str_replace(array_keys($replace), $replace, $recipe); //выполним замену на соответствующих рубриках
}
return $recipe; //возвращаем исходные значение функции
}
add_filter('the_content', 'replace_mihalica_recipe');
/** микроразметка для ингредиентов - приготовление **/

 

 

 

in_category(14) – (попросту) это указание системе, чтобы в рубрике с идентификатором 14 отрабатывалась соответствующая теме разметка.

 

Таким образом, к примеру, в рубрике 15, коли мы поместим текст в маркированный список <li> … никакие обозначения атрибутов кулинарной рубрики не будут добавлены. Что нам и требовалось!!

 

 

Если у вас несколько кулинарных подтем, следует добавить в код и их ID – идентификатор! – допишите нужные id-обозначения! …по аналогии… и в файле functions.php и в  post-single.php (или single.php, у кого как)

 

 

Одно дело выполнено!

 

 

Далее сложнее:

 

 

Вот каркас рабочего микроразмеченного кода: (с пояснениями)

 

 

<!-- стартовый код и далее .... -->
<?php if (in_category(14) ) { ?>
<div class="entry clearfix" itemscope itemtype="http://schema.org/Recipe"> <!-- кулинарный цикл -->


...код метаразметок: автора, рубрики и h1 и т.д. относящийся к кулинарии...


<div id="wi" itemprop="recipeInstructions"><!-- разметка контента кулинарной тематики -->
<?php
the_content('');
wp_link_pages( array( 'before' => '<p><strong>' . __( 'Pages:', 'themater' ) . '</strong>', 'after' => '</p>' ) );
?>
</div>

<? } else { ?><!-- инвертор -->

<div class="entry clearfix" itemscope itemtype="http://schema.org/Article"><!-- начало иного цикла ID рубрики, например Article-->


...код метаразметки иной тематики...


<div id="wi" itemprop="articleBody"><!-- разметка контента иной тематики -->
<?php
the_content('');
wp_link_pages( array( 'before' => '<p><strong>' . __( 'Pages:', 'themater' ) . '</strong>', 'after' => '</p>' ) );
?>
</div>

<? } ?> <!-- инвертор -->

<!-- тут иной код статейных прибабахов: другие записи... кнопки соц... и т.д. -->
</div>
</div>

 

 

Немного теории:

 

Когда посетитель просматривает рубрику “пирогов” – отрабатывается рубрика с ID 14 in_category(14) и, соответственно, микроразметка Schema.org необходимой кулинарной темы: в данном примере itemscope itemtype="http://schema.org/Recipe"!

т.е. всё что прописано до задачи (логического оперативного условия):

 

<? } else { ?>

 

 

…ну а когда юзер переходит в рубрику ID 15 – иной тематики, к примеру, на статью с правилами игры в бирюльки… /и всех остальных, не указанных в условии in_category(14)/ подключается оперативная задача:

 

<? } ?>

 

Таким образом, <? } ?> запрещает отработку кода размеченной кулинарии, и наоборот-с !!

 

 

 

 

 

 

Я стараюсь толковать суть максимально просто)

 

 

 

 

микроразметка обязательного поля description

 

 

 

 

Этот код (для файла функций) автоматически добавит поле дескрипшн (description) – как вы догадались по вензелям, это код блогера В.Кириллова.

 

 

/** добавим дескрипшн разметок **/
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');
/** фин дескрипшн разметок **/

 

 

 

 

 

микроразметка обязательного поля image

 

 

 

…для файла функций же…

 

 

 

/** РАЗМЕТКА КАРТИНОК ПОВАРСКОГО сайта **/
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');
/** ФИН РАЗМЕТКА КАРТИНОК ПОВАРСКОГО сайта **/

 

 

 

Можете воспользоваться этим кодом, который добавит необходимую атрибутику к вообще всем картинкам на сайте itemprop="image" НО !! есть небольшой нюанс, – о нём изложено в прошлой публикации, а тема сегодняшней статьи несколько иная.

 

Да и миниатюры post_thumbnail следует микроразметить!

 

 

 

Вот такое чудо (фото ниже) у нас получится, после проделанной работы:

 

Ошибок быть не должно – предупреждения не в счёт!

 

Я, например, не добавляю поле resultPhoto (призванная специфика стилистики Яши) и по их словам:

 

 

 

Поля, отсутствующие в стандарте schema.org, но рекомендуемые Яндексом

 

 

 

Для меня это странное отступление от стандартов; тем паче пихающее палки в колёса веб мастеру, да и к тому же валидатор Гугле выкажет ошибку.

 

Решать вам!

 

 

Если затрудняетесь с разметкой картинок, пройдите по ссылке данной в старте статьи.

 

 

Вот приблизительно так должно быть на страничке проверки валидности микроразметки Schema… у Яши.

 

 

 

 

И в валидаторе Google:

 

 

 

 

Как видите, ошибок нет. Есть 4 предупреждения… и к рекомендованным (упреждениям) относятся более тонкие штрихи микроразметки как, например – время приготовления; к какой национальной кухне относить блюдо и т.п… моим клиентам, как правило, этих изысков не требуется.

 

Но если вам эти экзерсисы нужны, то – всё просто: прописывайте вензеля – дополняйте документ необходимыми полями и микроразметочной атрибутикой.

 

Всё принципиально аналогично-с))

 

 

 

Такие вот у нас сегодня получились замечательные пироги…

 

 

 

 

 

 

 

 

 

Online консультация по настройкам и созданию сайтов на WordPress