Что такое микроразметка: примеры реализации для интернет-магазина

Содержание [скрыть]

Что такое микроразметка

В данной статье мы покажем, как за счет внедрения микроразметки на сайте интернет-магазина бижутерии увеличилась кликабельность объявления в органической выдаче Google почти в 1,5 раза и, как следствие, повысились продажи.

Каждый seo-специалист или вебмастер рано или поздно сталкивается с такой ситуацией в сниппете выдачи Google:

микроразметка - вид в снипете

Назревает вопрос – как сделать точно также на своем сайте? Вначале разберемся, что такое микроразметка.

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

Микроразметка – это разметка данных на странице и на сайте, которая используется для того, чтобы поисковый бот лучше распознавал контент на вашем сайте. Микроразметка данных – универсальная. Ее понимают все поисковые системы – Google, Yandex, Yahoo и другие.

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

Каждая поисковая система предоставляет веб-мастерам свой валидатор микроразметки для проверки правильности оформления данных. Самые актуальные сервисы:

Сервис от ПС Google – Проверка структурированных данных

Сервис от ПС Яндекс – Валидатор микроразметки

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

Словари микроразметки

Микроразметка поделена на словари. Словарь – это набор различных атрибутов для данных. Рассмотрим самые актуальные на данный момент.

Schema.Org

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

Микроразметка schema.org - вид в снипете

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

<div itemscope itemtype="http://schema.org/Product"> - указываем тип данных, которой будем размечать (в данном случае - это продукт, товар);
<div itemprop="name">
Iphone 6</div> - здесь указываем наименование товара;
<img src="products/iphone-6.jpg" title="Iphone 6"> - указываем поисковому боту, что это изображение товара;
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> - указываем тип данных;
<div itemprop="price">8000</div> - в свойстве "price" мы указали стоимость товара;
<div itemprop="priceCurrency" content="UAH">грн</div>- в свойстве "priceCurrency" мы указали валюту;
<div itemprop="description">Новый Iphone 6 в Украине</div> - здесь мы указали описание товара;
</div> 
</div>

<div itemscope itemtype="http://schema.org/Product"> - указываем тип данных, которой будем размечать (в данном случае - это продукт, товар);

Iphone 6</div> - здесь указываем наименование товара;

<img src="products/iphone-6.jpg" title="Iphone 6"> - указываем поисковому боту, что это изображение товара;

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> - указываем тип данных;

<div itemprop="price">8000</div> - в свойстве "price" мы указали стоимость товара;

<div itemprop="priceCurrency" content="UAH">грн</div>- в свойстве "priceCurrency" мы указали валюту;

<div itemprop="description">Новый Iphone 6 в Украине</div> - здесь мы указали описание товара;

</div>

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

itemscope – указывает, какой объект мы используем;
itemtype – всегда идет после itemscope и указывает, какой тип объекта будет размечен. В нашем примере, это Product (Продукт) – Iphone 6;
itemprop – указывает свойства выбранного объекта, в нашем примере, это цена, описание и т.д.

При помощи словаря Schema.org можно размечать не только товары, но и статьи (автор статьи, количество ретвитов), фильмы (актеры, жанр) и многое другое.

OpenGraph

Это словарь, созданный социальной сетью Facebook для решения проблем с отображением страницы в социальных сетях. Благодаря этому словарю веб-мастер обеспечивает корректный показ ссылки в социальной сети: словарь OpenGraph - показ ссылок в мессенджерах и соц сетях

Словарь поддерживают не только социальные сети, но и программы-мессенджеры – Skype, Telegram и многие другие. Теперь рассмотрим основные атрибуты словаря Open Graph:

“og:locale” — указывает на язык контента и локацию сайта
“og:type” — указывает тип контента на странице (статья, новость, обзор и т.д.)
“og:title” — указывает метатег title
“og:description” — указывает метатег description
“og:url” — URL страницы
“og:image” — указываем изображение статьи, обзора и т.д.
“og:site_name” — имя сайта.

Синтаксисы

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

Microdata
RDFa
JSON-LD

Microdata

Данный синтаксис впервые появился в HTML-5. Благодаря ему поисковые системы начали лучше понимать контент на сайте и использовать его в результатах поиска. Размечаются данные непосредственно в HTML-коде. Например, разметка статьи при помощи синтаксиса Microdata:

<article itemscope itemtype="http://schema.org/Article">
<h1 itemprop="name">Микроразметка</h1>
<meta itemprop="inLanguage" content="ru" />
<section itemprop="articleBody">Давайте поговорим о микроразметке</section>
<section itemprop="author" itemscope itmetype="http://schema.org/Person">
<span itemprop="additionalName">Представители SEO</span>
</section>
</article>

<h1 itemprop="name">Микроразметка</h1>

<section itemprop="articleBody">Давайте поговорим о микроразметке</section>

<span itemprop="additionalName">Представители SEO</span>

</section>

</article>

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

<h1 itemprop=”name”>Микроразметка</h1> – указали наименование статьи
<meta itemprop=”inLanguage” content=”ru” /> – указали язык, в данном случае – это русский.
<section itemprop=”articleBody”>Давайте поговорим о микроразметке</section> – указали тело статьи
<span itemprop=”additionalName”>Представители SEO</span> – указали автора статьи

RDFa

В 2004 году данный синтаксис разработали специалисты из W3C (World Wide Web Consortium) для структурирования данных на сайтах. Все данные размечаются в HTML-коде.

В наше время синтаксис RDFa почти не используется из-за сложности реализации. Поэтому представители Google вскоре начали отдавать предпочтение синтаксису Microdata для словаря Schema.org.

На данный момент RDFa чаще всего используется в словаре Open Graph.

Пример разметки статьи синтаксисом RDFa:

<div vocab="http://schema.org/" typeof="Article">
<span property="name">RDFa</span>
by <span property="author">SEO-специлист</span>
Эту статью твитнули 20 раз и откомментировало 10 человек
<div property="interactionStatistic" typeof="InteractionCounter">
<div property="interactionService" itemscope itemid="http://www.twitter.com" itemtype="http://schema.org/Website">
<meta property="name" content="Twitter" />
</div>
<meta property="interactionType" content="http://schema.org/ShareAction"/>
<meta property="userInteractionCount" content="20" />
</div>
<div property="interactionStatistic" typeof="InteractionCounter">
<meta property="interactionType" content="http://schema.org/CommentAction"/>
</div>
</div>

by <span property="author">SEO-специлист</span>

Эту статью твитнули 20 раз и откомментировало 10 человек

</div>

</div>

</div>

JSON-LD

Самый молодой и актуальный формат. Первый черновик этого синтаксиса появился в 2010 году.

Основное отличие от остальных – JSON-LD внедряется не в код страницы, а в тег <script>.

JSON-LD представляет из себя набор пар “ключ-значение”, который очень легко понимает не только поисковый бот, но и сам человек.

Например, нам необходимо разметить статью при помощи JSON-LD

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Article",
"author": "SEO-специалист",
"interactionStatistic": [
{
"@type": "InteractionCounter",
"interactionService": {
"@type": "Website",
        "name": "Twitter",
        "url": "http://www.twitter.com"
      },
      "interactionType": "http://schema.org/ShareAction",
      "userInteractionCount": "20"
    },
    {
      "@type": "InteractionCounter",
      "interactionType": "http://schema.org/CommentAction",
      "userInteractionCount": "10"
    }
  ],
  "name": "JSON-LD"
}
</script>

{

"@context": "http://schema.org",

"@type": "Article",

"author": "SEO-специалист",

"interactionStatistic": [

{

"@type": "InteractionCounter",

"interactionService": {

"@type": "Website",

"name": "Twitter",

"url": "http://www.twitter.com"

"interactionType": "http://schema.org/ShareAction",

"userInteractionCount": "20"

{

"@type": "InteractionCounter",

"interactionType": "http://schema.org/CommentAction",

"userInteractionCount": "10"

}

"name": "JSON-LD"

}

</script>

Рассмотрим чуть подробней:

@context, @type, author, interactionStatistic, interactionService, name, url, interactionType, userInteractionCount – ключи;
SEO-специалист, Twitter, http://www.twitter.com, 20, 10 – значения.

С 2013 года JSON-LD рекомендует Schema.org и с 2014 года Google также рекомендует переходить на данный синтаксис.

Для упрощения работы можно использовать онлайн генератор микроразметки – Schema Markup Generator (JSON-LD)

Реализация

Теперь перейдем к вопросу: “Как все это реализовать?”.

Для наглядного примера рассмотрим реализацию микроразметки для интернет-магазина бижутерии.

Размечать данные мы будем при помощи синтаксиса JSON-LD и словаря Schema.org

Разметка страницы категории

Для страниц категорий интернет-магазина можно разметить:

Наименование категории;
Минимальная цена товара в категории;
Максимальная цена товара в категории;
Валюта;
Средняя оценка;
Количество оценок;
Максимальная оценка.
Рейтинг категории.

После правильно выполненной разметки данных мы получим расширенный сниппет в выдаче поисковой системы Google.

микроразметка для интернет-магазина

Как реализовывать такой сниппет? Будем рассматривать микроразметку только для Google, так как Яндекс не выводит многие данные в сниппет выдачи.

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

<script type='application/ld+json'> {
"@context": "http://www.schema.org";,
"@type": "product",
"name": "*Название категории*",
"offers":{
"@type": "AggregateOffer",
"lowPrice" : "*min цена товара*",
"highPrice" : "*max цена товара*",
"priceCurrency" : "UAH"
},
"aggregateRating": {
"@type": "aggregateRating",
"ratingValue": "*средняя оценка*",
"reviewCount": "*кол-во оценок*",
"bestRating":"*максимальный рейтинг*"
}
}
</script>

"@context": "http://www.schema.org";,

"@type": "product",

"name": "*Название категории*",

"offers":{

"@type": "AggregateOffer",

"lowPrice" : "*min цена товара*",

"highPrice" : "*max цена товара*",

"priceCurrency" : "UAH"

"aggregateRating": {

"@type": "aggregateRating",

"ratingValue": "*средняя оценка*",

"reviewCount": "*кол-во оценок*",

"bestRating":"*максимальный рейтинг*"

}

</script>

Не во всех CMS для интернет-магазинов есть возможность оставлять оценку на категории товара, для реализации такой возможности необходимо прибегнуть к помощи программистов или сторонних плагинов, в зависимости от вашей CMS.

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

Для проверки микроразметки мы использовали сервис Google “Инструмент проверки структурированных данных”

Как видим, никаких ошибок допущено не было и после переиндексации сайта мы можем получить расширенный сниппет, который был представлен выше на скриншоте.

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

Всю информацию в карточке товара также можно разметить, а именно:

Наименование товара;
Изображение;
Описание товара;
Цена;
Валюта;
Количество отзывов;
Авторов отзывов;
Дату отзывов;
Тело отзыва.

Данная микроразметка будет отлично работать с Google и при правильном внедрении будет выводиться в сниппете.

Код разметки необходимо добавить на все страницы товаров.

<script type="application/ld+json">
{
"@context": "http://schema.org";,
"@type": "Product",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "*Средняя оценка товара*",
"reviewCount": "*Количество отзывов*"
},
"description": "*Описание товара*",
"name": "*Наименование товара*",
"image": "*Изображение товара*",
"offers": {
"@type": "Offer",
"availability": "http://schema.org/InStock";,
"price": "*Стоимость товара*",
"priceCurrency": "UAH"
},
"review": [
{
"@type": "Review",
"author": "*Имя автора отзыва*",
"datePublished": "*Дата публикации отзыва",
"description": "*Сам отзыв*",
"reviewRating": {
"@type": "Rating",
"bestRating": "*мах оценка*",
"ratingValue": "*оставленный рейтинг*",
"worstRating": "*min оценка*"}}]}
</script>

{

"@context": "http://schema.org";,

"@type": "Product",

"aggregateRating": {

"@type": "AggregateRating",

"ratingValue": "*Средняя оценка товара*",

"reviewCount": "*Количество отзывов*"

"description": "*Описание товара*",

"name": "*Наименование товара*",

"image": "*Изображение товара*",

"offers": {

"@type": "Offer",

"availability": "http://schema.org/InStock";,

"price": "*Стоимость товара*",

"priceCurrency": "UAH"

"review": [

{

"@type": "Review",

"author": "*Имя автора отзыва*",

"datePublished": "*Дата публикации отзыва",

"description": "*Сам отзыв*",

"reviewRating": {

"@type": "Rating",

"bestRating": "*мах оценка*",

"ratingValue": "*оставленный рейтинг*",

"worstRating": "*min оценка*"}}]}

</script>

После внедрения микроразметки, необходимо проверить ее в сервисе Google – “Инструмент проверки структурированных данных”

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

Теперь рассмотрим более детально, как именно правильная микроразметка помогает вашему сайту.

Мы внедрили микроразметку для категорий товаров 25 сентября и с этого дня Google постепенно начал переиндексировать страницы. Одна из первых категорий была “Диадемы” и поэтому будем анализировать именно ее.

Из данного графика, полученного при помощи Search Console, мы видим увеличение среднего CTR на данной категории.

До внедрения структурированных данных, как мы видим на скриншоте, средний CTR категории “Диадемы” составлял 2,5%, после переиндексации данной страницы, CTR увеличился на 1 пункт и равен 3,47%.

Благодаря микроразметке мы смогли увеличить CTR за короткий период.

Выводы

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

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

Artur Svetozarov 15.11.2017
Анастасия, спасибо большое. Я уже справился благодаря вашим наставлениям))
к статье Учимся работать в GTM
Anton Kolomiets 15.11.2017
А еще если категорий не много, можно через GTM вывести разметку категорий в JSON формате. Сделал так на небольшом проекте - звездочки и pricerange появились в выдаче)
к статье Что такое микроразметка
Андрей 14.11.2017
Просмотр страницы - https://prnt.sc/h4samu (это при тесте)
к статье Применение селекторов CSS в Google Tag Manager

Что такое микроразметка

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

Словари микроразметки

Schema.Org

OpenGraph

Синтаксисы

Microdata

RDFa

JSON-LD

Реализация

Разметка страницы категории

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

Выводы

Оставить комментарий:

Комментарии:

Один комментарий