Содержание [скрыть]
Что такое микроразметка
В данной статье мы покажем, как за счет внедрения микроразметки на сайте интернет-магазина бижутерии увеличилась кликабельность объявления в органической выдаче Google почти в 1,5 раза и, как следствие, повысились продажи. Каждый seo-специалист или вебмастер рано или поздно сталкивается с такой ситуацией в сниппете выдачи Google:
Микроразметка сайта
Микроразметка — это разметка данных на странице и на сайте, которая используется для того, чтобы поисковый бот лучше распознавал контент на вашем сайте. Микроразметка данных — универсальная. Ее понимают все поисковые системы — Google, Yandex, Yahoo и другие. Перед тем, как внедрить микроразметку на сайт, необходимо определить тип ваших данных. Например, на карточке товара для интернет-магазина необходимо разметить цену товара, его наименование, описание, изображение, отзывы, рейтинг. Так поисковый бот без каких-либо проблем сможет понять, что именно размещено на странице и сделает ее более релевантной. Каждая поисковая система предоставляет веб-мастерам свой валидатор микроразметки для проверки правильности оформления данных. Самые актуальные сервисы: Сервис от ПС Google — Проверка структурированных данных Сервис от ПС Яндекс — Валидатор микроразметки А теперь разберемся, что необходимо знать для внедрения структурированных данных.Словари микроразметки
Микроразметка поделена на словари. Словарь — это набор различных атрибутов для данных. Рассмотрим самые актуальные на данный момент.Schema.Org
Этот словарь, который создавался несколькими поисковыми системами. Используется для того, чтобы пользователь мог узнать начальную информацию о товаре или человеке, не заходя на страницу сайта.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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> |
- itemscope — указывает, какой объект мы используем;
- itemtype — всегда идет после itemscope и указывает, какой тип объекта будет размечен. В нашем примере, это Product (Продукт) — Iphone 6;
- itemprop — указывает свойства выбранного объекта, в нашем примере, это цена, описание и т.д.
OpenGraph
Это словарь, созданный социальной сетью Facebook для решения проблем с отображением страницы в социальных сетях. Благодаря этому словарю веб-мастер обеспечивает корректный показ ссылки в социальной сети:
Словарь поддерживают не только социальные сети, но и программы-мессенджеры — 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:|
1 2 3 4 5 6 7 8 |
<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> — указали наименование статьи
- <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:|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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> |
JSON-LD
Самый молодой и актуальный формат. Первый черновик этого синтаксиса появился в 2010 году. Основное отличие от остальных — JSON-LD внедряется не в код страницы, а в тег <script>. JSON-LD представляет из себя набор пар “ключ-значение”, который очень легко понимает не только поисковый бот, но и сам человек. Например, нам необходимо разметить статью при помощи JSON-LD|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<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, @type, author, interactionStatistic, interactionService, name, url, interactionType, userInteractionCount — ключи;
- SEO-специалист, Twitter, http://www.twitter.com, 20, 10 — значения.
Реализация
Теперь перейдем к вопросу: “Как все это реализовать?”. Для наглядного примера рассмотрим реализацию микроразметки для интернет-магазина бижутерии. Размечать данные мы будем при помощи синтаксиса JSON-LD и словаря Schema.orgРазметка страницы категории
Для страниц категорий интернет-магазина можно разметить:- Наименование категории;
- Минимальная цена товара в категории;
- Максимальная цена товара в категории;
- Валюта;
- Средняя оценка;
- Количество оценок;
- Максимальная оценка.
- Рейтинг категории.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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> |
Микроразметка товаров
Всю информацию в карточке товара также можно разметить, а именно:- Наименование товара;
- Изображение;
- Описание товара;
- Цена;
- Валюта;
- Количество отзывов;
- Авторов отзывов;
- Дату отзывов;
- Тело отзыва.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<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> |
Никаких ошибок допущено не было, поэтому требуется подождать переиндексацию карточек товаров для получения расширенного сниппета.
Теперь рассмотрим более детально, как именно правильная микроразметка помогает вашему сайту.
Мы внедрили микроразметку для категорий товаров 25 сентября и с этого дня Google постепенно начал переиндексировать страницы. Одна из первых категорий была “Диадемы” и поэтому будем анализировать именно ее.
Из данного графика, полученного при помощи Search Console, мы видим увеличение среднего CTR на данной категории.
До внедрения структурированных данных, как мы видим на скриншоте, средний CTR категории “Диадемы” составлял 2,5%, после переиндексации данной страницы, CTR увеличился на 1 пункт и равен 3,47%.
Благодаря микроразметке мы смогли увеличить CTR за короткий период.
Спасибо огромное
А еще если категорий не много, можно через GTM вывести разметку категорий в JSON формате. Сделал так на небольшом проекте — звездочки и pricerange появились в выдаче)