Микроразметка schema.org: коротко о главном

Опубликовано ,

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

Внимание, статья обновления под новые требования Гугла!

Содержание

  1. Немного о микроразметке;
  2. Шапка сайта;
  3. Навигационное меню
  4. Главная статическая страница;
  5. Лента блога
  6. Одиночная запись;
  7. Комментарии;

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

Немного о микроразметке schema.org

Для начала, приведу несколько понятий:

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

Schema.org – это стандарт семантической разметки данных в сети, объявленный поисковыми системами Google, Bing и Yahoo! летом 2011 года.
Цель семантической разметки – сделать интернет более понятным, структурированным и облегчить поисковым системам и специальным программам извлечение и обработку информации для удобного её представления в результатах поиска.

ruschema.org , неофициальный перевод стандарта на русский язык

А вот, что Яндекс говорит нам о самой микроразметке:

Таким образом, микроразметка служит нескольким целям

1. Во-первых, со стороны поисковиков повышается доверие к блогу.

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

primer-microdannie-image

2. Улучшается внешний вид сайта в поиске

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

Пример микроразметки рецептов в Гугле — сайт с и без разметки

3. Улучшаются поведенческие факторы

Сравните эти два сайта и ответьте, какой вы откроете первым? То-то же! =)

В общем, плюсы микроразметки довольно очевидны. Что насчет минусов? – Добавление ее довольно муторно, да и подумать иногда приходится =)

Несколько полезных ресурсов на тему микроразметки

— Собственно, официальные сайты: schema.org и его поддерживаемая энтузиастом русская версия ruschema.org.

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

— Валидатор микроразметки от Яндекса и Гугла

При помощи них можно легко и быстро проверить правильность микроразметки. Воспринимают немного по-разному. Иногда, что для Яндекса ошибка, то для Гугла — нормально.

Кстати, еще недавно Яндекс требовал 250 символов в описании. Теперь вроде эту ошибку не выдает

Чуть позже я поделюсь некоторыми идеями по безболезненному и не очень внедрению микроразметки на блог и  на странички с рецептами в частности.
Примечание 1. Учтите, все нижеследующее — при снятой галочке микроразметки в плагине All in One Seo:

seo

Примечание 2. Принцип добавления микроразметки не сложен — подлежащее выделению раздел описания оборачивается в блок, затем задается его тип (например, статья, видео и т.д.). Отдельные элементы, которые мы хотим выделить, получают специальные атрибуты разметки (заголовок, автор, дата и т.д.). И если выводимые данные не заключены в теги, добавляем <span> (<div>, <i> или любой другой тег) и вводим атрибуты микроразметки в него.

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

Работа над файлами ведется через ФТП (рекомендуется) или напрямую в админке (Внешний вид/Редактор). В любом случае, перед внесением изменений сделайте резервную копию.

 Внедряем микроразметку в шапку блога

Двигаться будем сверху вниз. Начнем с шапки блога — за нее отвечает файл header.php — понадобится выделить название и описание блога.

Нужные нам строчки кода ищем после тега <body>. В большинстве тем они выглядят как-то так:

<!--В блоке div-->
<div class="wrapper">
<!--или-->
<div class="header">
<!--В блоке header-->
<header id="header">

Присваиваем всему, что находится внутри этого тега тип WPHeader.

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

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

<?php if (is_home() || is_front_page() ) { ?>
<h1><?php bloginfo('name'); ?></h1> <!--заголовок-->
<? } else { ?>
<div><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo('name'); ?></a></div>
<?php } ?>
<div><?php bloginfo('description');?></div> <!--описание-->

Обратите внимание, название сайта заключено в теги <h1>…</h1> только на главной странице, на страницах со статьями оно не содержит тега заголовка. Подробнее о правильном выводе заголовка в коде сайта прочитайте здесь.

Добавляем соответствующие атрибуты прямо в теги:

<?php if (is_home() || is_front_page() ) { ?>
<h1 itemprop="headline"><?php bloginfo('name'); ?></h1>
<? } else { ?>
<div itemprop="headline"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo('name'); ?></a></div>
<?php } ?>
<div itemprop="description"><?php bloginfo('description');?></div>

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

Микроразметка шапки в валидаторе Яндекса

Микроразметка шапки в валидаторе Гугла

Вот и хорошо, с шапкой закончили.

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

В WordPress меню может быть выведено 2мя способами — при помощи стандартной функции wp_nav_menu(), либо ссылки прописаны вручную в коде.

<nav class="primary-menu">
    <?php if (has_nav_menu('primary')) :
			wp_nav_menu(array(
			    'theme_location' => 'primary',
                'container'      => ' '
			));
	endif; ?>
</nav>

Обертке <nav> меню задаем тип разметки SiteNavigationElement

Отдельные пункты меню размечаются функцией замены, которую вносим в файл functions.php (в самый конец, перед закрывающим тегом ?>, если он прописан)

<?php 
/**
 * Микроразметка навигационных меню, фильтруется через хук wp_nav_menu
**/
 function nav_menu_schema($content) {
	$pattern = "<a";
	$replacement = '<a itemprop="url"';
	$content = str_replace($pattern, $replacement, $content);
	return $content;
}
add_filter('wp_nav_menu', 'nav_menu_schema');

Результат в валидаторе Яндекса:

Учтите, обертку  SiteNavigationElement надо задать для каждого меню на блоге во избежание ошибок.

Разметка главной статической страницы

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

Для начала, рассмотрим подробнее главную страницу wp-fairytale.ru. Как видите, выводится слайдер, немного текста с описанием сайта, отзывы и ссылки на последние статьи.

Конечно, статьи можно разметить через сущности article или blogposting, но тогда придется выводить и описание статей (или делать скрыто поле) — обязательное условие для структурированных сниппетов творческих работ: поле description или articleBody.

Пойдем другим путем и разметим главную страницу как веб-страницу WebPage.

За вывод главной страницы отвечают следующие шаблоны: front-page.php, home.php или main.php. Заключим всю страницу в блок с указанием типа WebPage и обозначим область контента (обязательное поле) mainContentOfPage:

<?php 
/*
	Template name: Главная
*/
get_header(); 
?>

<div itemscope itemtype="http://schema.org/WebPage"><br><main class="homepage content-area" itemprop="mainContentOfPage">

<!--здесь код вывода главной страницы-->

</main>
</div>		

<?php get_footer(); ?>

Рассмотрим основные блоки на главной. Раздел «о сайте» разметим как about

/**
 * Блок "о сайте"
**/
<p itemprop="about">Любите ли вы ковыряться в бесконечных полотнах кода или напротив блуждаете в них как Ежик в тумане? А может вам просто нужна симпатичная и хорошо оптимизированная тема для блога? Тогда вы попали по адресу! </p>

А похожие записи — как важные ссылки itemprop=»significantLink». Записи выводятся циклом, поэтому надо просто найти в нем тег ссылки <a href=»»>

Готовая микроразметка главной статической страницы

Микроразметка для ленты блога

Теперь переходим к файлу index.php или content.php, которые отвечает за ленту постов блога.

Здесь начинается самое интересное — попытка учесть последние изменения рекомендуемых и обязательных полей микроразметки для Гугла и при этом не «обидеть» Яндекс

Общий вид структуры ленты блога:

 

<main itemscope itemtype="http://schema.org/Blog">
    <article class="content-area" itemscope itemtype="http://schema.org/BlogPosting" itemprop="blogPost">            
...
  </article>
        ...
        ...
 </main>

Размечаем по порядку видимые элементы статьи article:

1) Заголовок статьи: добавляем атрибут «headline». Заголовок в ленте постов правильнее всего выводить в теге H2 + обычно он является  и ссылкой на статью

<h2 itemprop="headline"><a href="ссылка на статью"><?php the_title(); ?></a></h2>

3) Дата

Она может выглядеть по-разному, но основа:

<?php the_time('формат вывода даты') ?>

Теперь насчет разметки времени. Вам следует знать, что поисковики распознают время и дату лишь в определенном формате — ISO_8601. Например, 24 сентября 2014 18:27 будет выглядеть как 2014-09-24T18:27:20+00:00. Нам же не нужен такой вывод, не так ли?

Поэтому будем использовать тег <time> с атрибутом datetime. Вот, как это будет выглядеть (у меня используется функция с русскими месяцами):

<time itemprop="datePublished" datetime="<?php the_time('c'); ?>"><?php the_time('j.m.Y, G:i'); ?></time>

В HTML: и нам хорошо, и поисковикам угодили

<time itemprop="datePublished" datetime="2014-09-24T18:27:20+00:00">24 сентября 2014, 18:27</time>

4) Автор статьи: опять же, у меня атрибут добавлен в тег <i>

<span class="author">Автор: <i itemprop="author"><?php the_author(); ?></i></span>

5) Если у кого на главной странице выводится категория, добавляем к ней следующее:

<span itemprop="articleSection"><?php the_category(', ') ?></span>

6) Если выводим описание, добавляем атрибут к content, если оно выводится цитатой — к the_expert

<div itemprop="description">
<?php the_content(''); ?>  //если как описание - текст перед тегом <!--more-->
</div>

Разметка по новым стандартам

Проверим в валидаторе, какие поля осталось разметить. Многое из требуемого Гуглом по новым стандартом не выводится в большинстве тем, поэтому будем создавать скрытые поля при помощи мета-тегов

По валидатору Яндекса:

Одна ошибка есть, поэтому заходим в файл index.php, где ранее разметили тип Blog и мета-тегом добавляем описание блога

<main class="content-area" itemscope itemtype="http://schema.org/Blog">	
<meta itemprop="description" content="Полезная информация о создании и оптимизации блога на ВордПресс">

Валидатор Гугла:

Гугл по спецификации AMP (расширенные мобильные страницы) требует дату последнего обновления статьи, издателя статьи, главную картинку-миниатюру и канонический УРЛ.

Прописываем дату обновления статьи и каноническую ссылку

<!--Весь код добавляется внутри тегов статьи <article itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">, либо в самом начале, либо перед закрытием тега-->
 <article itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
    <meta itemscope itemprop="mainEntityOfPage"  itemType="https://schema.org/WebPage" itemid="<?php the_permalink(); ?>" content="" />
    <meta itemprop="dateModified" content="<?php the_modified_date('c'); ?>">
    .....
</article>

Микроразметка изображения

Я приведу пример разметки миниатюры, выводимой стандартным кодом ВордПресс the_post_thumbnail. Стандартно:

<?php // post image
	 if ( has_post_thumbnail()) { ?>
		 <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
			<?php the_post_thumbnail('thumbnail'); ?>
		 </a>
<?php } ?>

С разметкой под Гугл и Яндекс:

<?php // post image
	if ( has_post_thumbnail()) { ?>
		<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
			<?php the_post_thumbnail('thumbnail', array('itemprop' => 'contentUrl')); 
			 $image_attributes = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID, '' ), 'thumbnail' ); ?>
			    <link itemprop="url" href="<?php echo $image_attributes[0] ?>" />
			    <meta itemprop="width" content="<?php echo $image_attributes[1] ?>">
			    <meta itemprop="height" content="<?php echo $image_attributes[2] ?>"> 
		 </a>
<?php } ?>

Расшифрую немного код:

the_post_thumbnail — выводим миниатюру с размером thumbnail (задается в админке Настройки/Медиафайлы) и присваиваю ей атрибут itemprop=’contentUrl’ (необходим для Яндекса)

wp_get_attachment_image_src — получаем в переменную информацию о картинке в массиве: [0] — ссылка, [1] — ширина, [2] — высота

Затем передаем эту информацию в мета-теги и выводим ссылку на изображение.

Издатель статьи (publisher)

Издатель статьи по Гуглу обязательно должен включать в себя размеченный логотип. В сумме со всеми требованиями этот элемент представляет собой микроразметку Organization. Уж не знаю, зачем поисковику понадобилось делать ее обязательной для всех.

Для Яндекса в микроразметке организации обязательным является указание адреса и номера телефона.

На выходе получаем такую многоэтажную структуру:

<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
	<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
		<img itemprop="url" itemprop="image" style="display:none" src="ССЫЛКА НА ЛОГОТИП" alt="Логотип сайта">
		<meta itemprop="width" content="50">			
		<meta itemprop="height" content="50">
	</div>
	<meta itemprop="name" content="<?php bloginfo('name'); ?>">
	<meta itemprop="telephone" content="+7 000 00 00">
	<meta itemprop="address" content="Россия">
</div>

Этот код можно сразу вставлять внутрь тегов <article>…</article>, только не забудьте прописать ссылку на свой логотип

В валидаторе Гугла
Вид микроразметки в Яндекс валидаторе (можно развернуть по клику)

Что ж, теперь бежим в валидаторы  — ошибок нет!

Микроразметка статьи

Самую большую работу нам придется проделать в файле single.php или content-single.php. Его правильная разметка играет важную роль — именно данный сниппет описывает нашу статью, он должен привлекать посетителей на сайт, выгодно представляя его в поиске.

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

Пара отличий:

1) Заголовок статьи находится в теге H1 и не содержит ссылку

<h1 itemprop="headline"><?php the_title(); ?></h1>

2) Выводим уже не описание статьи, а весь текст — articleBody (добавляем атрибут к content, если оно выводится цитатой — к the_expert)

<div itemprop="articleBody">
<?php the_content(); ?>
</div>

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

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

Тут просто приведу код

<?php
if (!function_exists('fairytale_comments_template')) {
	function fairytale_comments_template($comment, $args, $depth) {
		$GLOBALS['comment'] = $comment;
		switch ($comment->comment_type) :
		case 'pingback' : 
		case 'trackback' : ?>

		<li <?php comment_class(); ?> id="comment-<?php comment_ID(); ?>">
			<p><?php _e('Pingback:', 'fairytale'); ?> <?php comment_author_link(); ?> <?php edit_comment_link(__('(Edit)', 'fairytale'), '<span class="edit-link">', '</span>'); ?></p>

		<?php 
		break;
		default :
		global $post; ?>

		<li <?php comment_class(); ?> id="comment-<?php comment_ID(); ?>">
			<article itemprop="comment" itemscope="itemscope" itemtype="http://schema.org/Comment">
				<header class="comment-header">
					<p class="comment-author" itemprop="creator" itemscope="itemscope" itemtype="http://schema.org/Person">
			<?php echo get_avatar( $comment, $size = $args['avatar_size'] ); ?>
			<?php printf ('<span class="fn">%s</span>', '<span itemprop="name" class="comment-link" style="cursor: pointer;" title="'.$comment->comment_author_url.'" onclick="GoTo(\''.str_replace('http://', '_', $comment->comment_author_url).'\')">'.$comment->comment_author.'</span>');  ?>
		</p><!-- end .comment-author -->
					
					<p class="comment-meta">
			<?php //** Comment date removed ** ?>
			<time class="comment-time" datetime="<?php comment_time('c'); ?>" itemprop="datePublished"><?php printf( __( '%1$s в %2$s', 'fairytale' ), get_comment_date(), get_comment_time() ); ?></time>
			<?php edit_comment_link( __( '(Edit)', 'fairytale' ), '' ); ?>
		</p><!-- end .comment-meta -->
	</header>
				
				<div class="comment-content" itemprop="text">
		<?php if ( $comment->comment_approved == '0' ) : ?>
			<p class="comment-awaiting-moderation"><?php _e('Your comment is awaiting moderation.', 'wptao'); ?></p>
		<?php endif; ?>
				
					<?php comment_text(); ?>
	</div><!-- end .comment-content -->
					
<div class="comment-reply">
		<?php printf('<span class="comment-reply-link" onclick="return addComment.moveForm(\'comment-%s\', \'%s\', \'respond\', \'%s\')">Ответить</span>',$comment->comment_ID,$comment->comment_ID,$comment->comment_post_ID); ?>
	</div>
		</article>

		<?php
		break;
		endswitch;
	}
}

И вывод в валидаторе Яндекса:

можно открыть по клику

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

Ну как-то так. Планировала короткий обзор, а текста все равно много вышло.

17 комментариев

  1. Надежда Давыдова

    Настя, привет!
    Не удается разметить шапку. Добавляю все согласно примера, но валидаторы не видят микроразметку! (((

    ‘primary’,’fallback_cb’=> » ) ); ?>

    <a href="» id=»title» itemprop=»headline»>

    Что не так?!!

    Ответить
  2. Надежда Давыдова

    Наверное, причина была в плагине Autoptimize пока его не отключила, ничего не получалось. Очень странно…

    Ответить
    1. Анастасия

      У Autoptimize свой кеш, надо его чистить тоже при изменениях

      Ответить
  3. Надежда Давыдова

    Вот еще вопрос: разметка шапки блога должна быть на всех страницах или только на главной?

    И валидатор Гугла ругается, что нет headline, это заголовок статьи. Что помечать этим атрибутом?!!! Ведь h1 уже обозначено как name….

    Ответить
    1. Анастасия

      Привет =)
      Так файл header.php у тебя один, на всех страницах. Name неправильный атрибут уже, стандарты постоянно меняют, так что заменяй его на headline
      Я уже новый дизайн нарисовала, обновлю тут сайт и тогда до этой статьи доберусь)

      Ответить
  4. Надежда Давыдова

    А я так и сделала )))

    А по разметке шапки: на всех страницах размечать или только главную? Файл один но для главной свое правило, для остальных — свое (это я про название блога в теге h1 и без него, а также описание).

    Ответить
    1. Анастасия

      Везде везде =)

      Ответить
  5. Надежда Давыдова

    Спасибо, Настя! Статья мне очень помогла исправить ошибки в моей разметке плюс разметила статическую страницу. Исправляй и у себя, валидатор Гугла ругается… Одно не получилось — разметить миниатюры на главной. Ну одна ошибка, думаю, не страшно )

    Ответить
    1. Анастасия

      Здесь вроде вообще микроразметки не было, я не смотрела, просто временный шаблон
      Я про миниатюры дополню потом, некогда сейчас

      Ответить
  6. Viktoria

    Настя, отличная статья. Ура! У меня Гугл весь в зелененьких галочках :-).

    Ответить
  7. Валерий

    Огромное спасибо, Анастасия! Ваша статья мне очень помогла. Успехов Вам!

    Ответить
    1. Анастасия

      Валерий, здравствуйте!
      Не за что, рада, что статья помогла вам)

      Ответить
  8. SershO

    <a href=»ссылка на статью»><h2 itemprop=»headline»><?php the_title(); ?></h2></a>
    HTML валидатор выдаст ошибку на такой код. Блочный элемент не может быть внутри строчного. Поменяйте местами теги.

    Ответить
  9. Rokis

    Как поставить pubplisher для статьи? Придётся его описывать так же, как организацию? Смысла нет описывать организацию если сайт принадлежит физическому лицу.

    Ответить
    1. Анастасия

      Смысла нет, но Гугл, видимо, решил по-другому и занес его в обязательные и рекомендованные поля

      Ответить
  10. Алексей

    Искал решение как описать миниатюру микроразметкой schema.org, ваша статья нереально помогла!!! Успехов вам и вашему блогу!!!

    Ответить
  11. Виталий

    Подскажите, в чем может быть проблема? На сайте есть разметка schema.org/Product.
    Валидатор гугла говорит что ошибок нет, но в вебмастере на каждой странице товара ошибка «Отсутствует минимальная или максимальная оценка». Разметку рейтинга не использую

    Ответить

А что вы думаете по этому поводу?

Ваш e-mail не будет опубликован.

Добавить в комментарий код: CSSHTMLPHP