В предыдущей статье мы подробно разобрали условия, которые ставят поисковые системы для разметки данных в статье и которые необходимо обязательно соблюсти, чтобы под статью образовались сниппеты.
Чтобы разметить все статьи и новости на сайте с помощью микроразметки 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 ). " …";
} 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 и позволяют полностью соответствовать требования Яндекса.
В итоге получаем такую картину:
Рис 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' ); ?>
Верхняя часть кода отвечает за то, чтобы получить картинку, которая выбрана для статьи, как миниатюра.
Рис 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.
Рис 12 обязательные поля для разметки картинки
Более внимательно следует отнестись к размеру картинки, а именно к ширине, так как для нее прописаны гуглом специальные доп условия.
Рис 13 нужная ширина для микроразметки картинки
Поэтому, миниатюра должна иметь минимум 696 пикселей в ширину, иначе google не будет выводить такую картинку в расширенных сниппетах. Позаботьтесь о качестве картинки заблаговременно и хотя бы миниатюру сделайте хорошего размера.
Также нужно использовать обязательно строку:
<span itemprop="image" content="<?php echo $image[0]; ?>">;
В противном случае вылезет предупреждение в яндекс валидаторе:
Рис 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>
Этот код разметит абсолютно все картинки, которые присутствуют у вас в статье. С помощью такого кода удобно размечать фото галереи, слайдеры, портфолио фотографов и тому подобное.
В итоге мы получаем полностью рабочую микроразметку статьи, с выполненным условиями обоих поисковых систем. Обязательно обращайте внимание на оба валидатора, так как очень часто они отображают картинку по-разному.
Рис 15 идеальная микроразметка статьи проверка гугл
Рис 16 идеальная микроразметка статьи проверка яндекс
Автор: Максим Глотов – MaxGlot
18 Апр 2024
403