Как сделать микроразметку сайта Shema.org и в чем ее преимущества?

Привет, дорогие читатели блога!

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

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

Что такое микроразметка сайта?

Несколько лет назад, самые крупные компании Яндекс, Google, Yahoo и Bing заявили о внедрении новых технологий в свои поисковые системы. С тех пор семантическая разметка Shema.org помогает роботам наиболее точно обработать, распределить и понять информацию на интернет-ресурсах, чтобы потом выдать эти данные пользователям в поисковой выдаче.

Микроразметка необходима сайту, чтобы упростить поисковикам распознавание информации, размещенной на нем. А в награду за это, поисковые системы покажут в результатах выдачи структурированное, доступное пользователю описание ресурса (сниппеты).

Вот один из примеров, который приводит Яндекс:

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

Для чего нужна микроразметка сайта?

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

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

Для того чтобы проверить микроразметку в Яндексе вам потребуется зайти в панель Яндекс Вебмастер и перейти по ссылке «Проверить микроразметку», либо «Валидатор микроразметки».

Вот быстрая ссылка — webmaster.yandex.ua/microtest.xml

Для того чтоб провести валидацию микроразметки (проверку), нужно ввести в отведенное для этого поле url страницы сайта. Чтобы проверка была доступной, нужно зарегестрироваться в Яндекс Вебмастере.

Google микроразметка проверяется по адресу: google.com/webmasters/tools/richsnippets.

Проверка здесь проходит по тому же принципу, что и в Яндекс.

Для начала вам нужно просто проверить, не была ли установлена на вашем блоге микроразметка автоматически. Обычно такое бывает при использовании бесплатных шаблонов WordPress. Такие разметки нужно будет удалять перед внедрением разметки Shema.org.

Микроразметка WordPress с плагином и без

Созданная несколько лет назад микроразметка schema org, является стандартом для использования микроданных, чтобы описывать сущность объектов на страницах ресурсов. Т.е., если без разметки поисковый робот считывает информацию про объекты из своей базы знаний о них, то микроразметка полностью описывает для него тип, название, путь к объекту и т.д.

Обычно микроразметка WordPress осуществляется путём внедрения специальных атрибутов в начальный HTML-код.

На примере ниже можно увидеть отличие кодов с разметкой и без:

На сайте ruschema.org/docs/gs приведен пока неполный список стандартов Shema на русском языке. В этой статье я приведу примеры только начальных атрибутов для разметки контактов, картинок, комментариев, статьи.

Как сделать микроразметку сайта? Атрибуты для header

Начнем с файла header.php, который отвечает за обзор информации в шапке сайта.

Чтобы начать разметку, следует вписать в тег шапки сайта соответствующий атрибут schema.org.

Выглядит он так: itemscope itemtype="https://schema.org/WPHeader"

Очень важно его правильно вставить в код файла, иначе шаблон может перестать работать.

Находим тег, отвечающий за вывод шапки сайта. У меня это <div id="header">

После вставки атрибута, он должен выглядеть так:

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

Затем в файле шапки сайта нужно найти строки, которые выдают описание и название сайта.

Они могут выглядеть так:

1
2

<div id='title'><a href="<?php bloginfo('url'); ?>">
<?php bloginfo('name'); ?></a> <?php bloginfo('description'); ?> </div>

В эти div'ы, содержащие название и описание сайта, нужно вставить атрибуты:

itemprop="headline"

itemprop="description"

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

1
2
3

<div id='title' itemprop="headline"><a href="<?php bloginfo('url'); ?>">
<?php bloginfo('name'); ?></a>
<span itemprop="description"><?php bloginfo('description'); ?></span></div>

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

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

После того, как проведена разметка шапки сайта, можно приступать к микроразметке постов. Для этого следует найти файл, который отвечает за обзор статей. Например, это может быть: single.php.

Для начала находим тег, отвечающий за вывод контента, и вставляем нужный атрибут:

<div id="content" itemscope itemtype="https://schema.org/Article">

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

А вот атрибуты Shema.org, которые отвечают этим объектам:

itemprop="articleBody" – вывод поста

itemprop="name" — заголовок

itemprop="articleSection" — рубрика

itemprop="datePublished" — дата

itemprop="author" – автор

Вот, что должно у вас получиться:

Вывод поста: <div class="entry" itemprop="articleBody">

Вывод заголовка, даты публикации и автора:

1
2
3
4

<h1 class="title" itemprop="name"><?php the_title(); ?></h2>
<div class="postdate">
<span itemprop="datePublished"><?php the_time('Y-m-d') ?></span> 
<span itemprop="author"><?php the_author() ?></span> </div> </code>

Вывод рубрики:

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

Атрибут itemprop="image" позволяет роботам быстро распознавать информацию о картинках.

Вставлять его нужно следующим образом в код изображения:

1
2
3

<img itemprop="image" class="size-full wp-image-3279 alignleft"
 style="margin: -15px 0;" src="https://pro-wordpress.ru/wp-content/uploads/2014/12/konvers2.png" 
 alt="конверсия" height="256" width="300">

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

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

itemprop="comment" itemscope="itemscope" itemtype="https://schema.org/UserComments"

itemprop="interactionCount" – количество комментариев

itemprop="creator" – автор комментария

itemprop="commentTime" – время создания

itemprop="commentText" – текст коммента

Вы можете внедрять атрибуты, как в код определенной страницы, так и в файл function.php для того или иного вида объектов.

Для каждого типа файлов есть свой набор атрибутов, который вы можете изучить на сайте со стандартами (url приведен выше), либо используя генератор атрибутов. К примеру, вот этот schema-creator.org/.

Но есть ещё один способ, как сделать микроразметку сайта с применением стандарта schema.org, это воспользоваться плагинами. Популярный плагин для микроразметки wordpress — Schema Creator by Raven. Скачав и установив данный плагин, вы сможете настроить и создать новую разметку. С его помощью, вам представится возможность выбрать тип разметки для определенного вида объектов, заполнить необходимые поля с описанием и получить готовый код.

Также подробную информацию о том, как сделать микроразметку Яндекс, можно узнать здесь: https://help.yandex.ru/webmaster/schema-org/what-is-schema-org.xml.

Кроме того, вы можете задавать вопросы в комментариях к статье.

Удачи!