Микроразметка статей и новостей Schema org: требования и как создать

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

Чтобы разметить все статьи и новости на сайте с помощью микроразметки http://schema.org/NewsArticle, мы будем редактировать файл single-blog.php, так как он отвечает за вывод всего контента на каждой странице нашего блога.
На примере статьи – //fireseo.ru/blog/mikrorazmetka-yandeks-i-google-kak-nastroit-schema-org/
Используя инструмент исследования кода страницы, мы можем видеть, что вся необходимая нам информация для разметки (заголовок, текст, картинки, автор) находится внутри блока.

<div id="post-10592" class="post-10592 blog type-blog status-publish post has_thumb"></div>

Рис 1 блок в который нужно встроить разметку

Начнем размечать статью и добавим код – itemscope itemtype="http://schema.org/NewsArticle" в блок div с id= post-10592

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

<div itemscope itemtype="http://schema.org/NewsArticle" id="post-10592" class="post-10592 blog type-blog status-publish post has_thumb">

Этим кодом мы пометим, что от самого начала блока div с id= post-10592 до его конца все элементы, которые будут размечаться, будут наследовать тип данных NewsArticle.

Рис 2 обозначенная микроразметка статьи newsarticle

Далее необходимо разметить каноническую страницу статьи – mainEntityOfPage

Для внедрения этого свойства нужно добавить следующую строку кода внутрь блока div

<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="URL канонической страницы"/>

Канонической называется такая страница, которая является основной. Например, если статья длинная и состоит из нескольких страниц, то вторая, третья и последующие страницы – являются неканоническими, а дополнительными.

В нашем случае нам нужен URL-адрес статьи, которую мы размечаем, она и будет канонической. Чтобы вывести такого рода URL, будем использовать стандартную функцию для WP – get_permalink(), которая возвращает необходимый нам адрес страницы блога. Подробнее почитать, как работает функция, можно в официальной справке на портале разработчиков wordpress.

Окончательный исходный код для WP будет выглядеть так:

<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="<?php echo get_permalink(); ?>"/>;

Рис 3 микроразметка канонической страницы webpage

Далее разметим свойство Headline (название статьи)

Рис 4 разметка заголовка статьи

В исходном коде файла single-blog.php это выглядит следующим образом:

Подпишитесь на авторский телеграм-канал про предпринимательство в России.

<div id="content_breadcrumbs" class="article_breadcrumbs">
<h1 itemprop="headline"><a href="/blog">Блог</a> / <?php the_title(); ?></h1>

Просто добавляем itemprop=”headline” внутри тега заголовка страницы H1. Все, что выводит функция the_title(); , автоматически попадает внутрь разметки headline.

Важно! Помните о том, что headline имеет ограничения в 110 символов, которые накладывает Google.

Рис 5 ограничения на количество символов разметки заголовка статьи

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

Второй способ – добавляем новую функцию в файл function.php:

function max_title_length( $title ) {
$max = 110;
if( strlen( $title ) >; $max ) {
return substr( $title, 0, $max ). " &hellip;";
} else {
return $title; }
}

Эта функция вводит ограничение на максимальную длину title и устанавливает его значение, равное 110.

В Single-blog.php добавляем фильтр:

<?php add_filter( 'the_title', 'max_title_length'); ?>

Эту строку обязательно добавляем прямо перед разметкой headline там где идет использование the_title();

<h1 itemprop="headline">;<a href="/blog">Блог</a> / <?php the_title(); ?></h1>

Чтобы удалить такой фильтр надо использовать строку кода:

<?php remove_filter ( 'the_title', 'max_title_length'); ?>

Далее переходим к микроразметке автора статьи. В нашем случае такого поля нет, так как автор статьи не указывается.

Добавлять новые строки кода надо после основных блоков контента и перед закрывающимся тегом </article>

Рис 6 добавляем разметку автора статьи

Исходный код будет таким:

<span itemprop="author" itemscope itemtype="https://schema.org/Person">
<meta itemprop="name" content="<?php the_author(); ?> "></span>

Так как у нас нет специального поля, отвечающего за вывод имени автора, мы будем использовать готовую функцию the_author();, выводящую автора администратора или модератора админ панели WordPress, который опубликовал ее, а значит и является автором.

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

Рис 7 условия для правильной разметки даты публикации статьи

Время и дата постинга статьи так же, как и автор, не указывается в нашем блоге. Поэтому мы обратимся к библиотеке функций вордресс и возьмем оттуда две следующие – the_date(); и the_modified_date();

Но, если вывести их в таком виде:

<meta itemprop="datePublished" content="<?php the_date(); ?>"/>
<meta itemprop="dateModified" content="<?php the_modified_date(); ?>"/>

Официальные инструмент проверки структурированных данных выдаст нам две ошибки.

Рис 8 ошибки в разметке даты постинга, неправильный формат

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

<meta itemprop="datePublished" content="<?php the_date('Y-m-d'); ?>"/>
<meta itemprop="dateModified" content="<?php the_modified_date('Y-m-d'); ?>"/>

Переходим к разметке жанра нашей статьи и краткому описанию.

Жанр добавляем с помощью кода:

<meta itemprop="genre" content="Совет специалиста"/>;

Чтобы вывести краткое описание нашей статьи, необходимо добавить:

<meta itemprop="description" content="<?php echo get_excerpt(); ?>">

Но, учитывая, что яндекс воспринимает только 50-150 символов в кратком описании, функцию нужно будет дописывать своими руками.

Рис 9 свойства и условия яндекса по разметке описания

Чтобы учесть такие предпочтения и вывести нужное количество символов, добавим в functions.php новую функцию:

function get_excerpt(){
$excerpt = get_the_content();
$excerpt = preg_replace(" ([.*?])",'',$excerpt);
$excerpt = strip_shortcodes($excerpt);
$excerpt = strip_tags($excerpt);
$excerpt = substr($excerpt, 0, 250);
$excerpt = substr($excerpt, 0, strripos($excerpt, " "));
$excerpt = trim(preg_replace( '/s+/', ' ', $excerpt));
return $excerpt;
}

Эти строчки урезают количество символов до 130 и позволяют полностью соответствовать требования Яндекса.

В итоге получаем такую картину:

f10

Рис 10 разметка краткого описания – обрезанная до 130 символов

Теперь нам нужно вывести изображение, сильно необходимое Google для формирования сниппета.

Для этого будем использовать следующий код:

<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>

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

f11

Рис 11 миниатюра для статьи

<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject" rel="nofollow">
<span itemprop="url" content="<?php echo $image[0]; ?>">
<span itemprop="image" content="<?php echo $image[0]; ?>">
<meta itemprop="width" content="<?php echo (int)$image[1]; ?>">
<meta itemprop="height" content="<?php echo (int)$image[2]; ?>"> </span></span>
</div>
<?php endif; ?>

Вторая часть кода использует полученную в первой части картинку и размечает ее с помощью схемы https://schema.org/ImageObject, а также свойств: itemprop=”url”, width и height

Эти свойства являются обязательными согласно справке Google.

f12

Рис 12 обязательные поля для разметки картинки

Более внимательно следует отнестись к размеру картинки, а именно к ширине, так как для нее прописаны гуглом специальные доп условия.

f13

Рис 13 нужная ширина для микроразметки картинки

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

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

<span itemprop="image" content="<?php echo $image[0]; ?>">;

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

f14

Рис 14 условия попадания картинки в Яндекс.Картинки

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

Если нужно разметить более, чем одну картинку миниатюры, в этом случае следует использовать исходный код:

<?php
$attachments_query=array('post_type'=>'attachment','posts_per_page'=>-1,'post_status'=>null,'post_parent'=>$post->ID);
$attachments_post = get_posts( $attachments_query );
if ( !empty($attachments_post) ): ?>
<div class="mod-thumbnails-full">;
<?php foreach ( $attachments_post as $attachment ): ?>
<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject" rel="nofollow">;
<?php $img_attr_medium = wp_get_attachment_image_src( $attachment->ID, 'large' ); ?>
<span itemprop="url" content="<?php echo esc_url( $img_attr_medium[0] ); ?>">
<span itemprop="image" content="<?php echo esc_url( $img_attr_medium[0] ); ?>">;
<meta itemprop="width" content="<?php echo (int)$img_attr_medium[1]; ?>">
<meta itemprop="height" content="<?php echo (int)$img_attr_medium[2]; ?>"> </span> </span>
</div> <?php endforeach; ?>
</div>
<?php endif; ?>
<?php wp_link_pages('before=<div class="pagination">&after=</div>'); ?> </div>

Этот код разметит абсолютно все картинки, которые присутствуют у вас в статье. С помощью такого кода удобно размечать фото галереи, слайдеры, портфолио фотографов и тому подобное.

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

f15