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

Що таке мікророзмітка

У цій статті ми покажемо, як за рахунок впровадження мікророзмітки на сайті інтернет-магазину біжутерії збільшилася клікабельність оголошення в органічній видачі Google майже в 1,5 рази і, як наслідок, підвищилися продажі. Кожен seo-фахівець або вебмастер рано чи пізно стикається з такою ситуацією в сніпеті видачі Google:

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

Назріває питання – як зробити так само на своєму сайті? Спочатку розберемося, що таке мікророзмітка.

Мікророзмітка сайту

Мікророзмітка – це розмітка даних на сторінці та на сайті, яка використовується для того, щоб пошуковий бот краще розпізнавав контент на вашому сайті. Мікророзмітка даних – універсальна. Її розуміють усі пошукові системи – Google, Yandex, Yahoo та інші. Перед тим, як впровадити мікророзмітку на сайт, необхідно визначити тип даних. Наприклад, на картці товару для інтернет-магазину необхідно розмітити ціну товару, його найменування, опис, зображення, відгуки, рейтинг. Так пошуковий бот без жодних проблем зможе зрозуміти, що саме розміщено на сторінці та зробить її більш релевантною. Кожна пошукова система надає веб-майстрам свій валідатор мікророзмітки для перевірки правильності оформлення даних. Найактуальніші послуги: Сервіс від ПС Google – Перевірка структурованих даних Сервіс від ПС Яндекс – Валідатор мікророзмітки А тепер розберемося, що потрібно знати для впровадження структурованих даних.

Словники мікророзмітки

Мікророзмітка поділена на словники. Словник – це набір різних атрибутів для даних. Розглянемо найактуальніші на даний момент.

Schema.Org

Цей словник створювався декількома пошуковими системами. Використовується для того, щоб користувач міг дізнатися про початкову інформацію про товар або людину, не заходячи на сторінку сайту.

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

Користувач може, не заходячи на сторінку, дізнатися вартість Iphone 6, рейтинг товару та кількість відгуків.
вказуємо тип даних, якою розмічатимемо (в даному випадку - це продукт, товар);
Iphone 6
- тут вказуємо найменування товару; - вказуємо пошуковому боту, що це зображення товару;
- вказуємо тип даних;
8000
- у " price " ми вказали вартість товару;
грн
- у "priceCurrency" ми вказали валюту;
Новий Iphone 6 в Україні
- тут ми вказали опис товару;
У словнику Schema.org існують три атрибути, які необхідно використовувати в кожній мікророзмітці:
  1. itemscope – вказує, який об’єкт ми використовуємо;
  2. itemtype – завжди йде після itemscope і вказує, який тип об’єкта буде розмічений. У нашому прикладі це Product (Продукт) – Iphone 6;
  3. itemprop – вказує властивості вибраного об’єкта, у нашому прикладі це ціна, опис і т.д.
За допомогою словника Schema.org можна розмічати не лише товари, а й статті (автор статті, кількість ретвітів), фільми (актори, жанр) та багато іншого.

OpenGraph

Це словник, створений соціальною мережею Facebook для вирішення проблем відображення сторінки в соціальних мережах. Завдяки цьому словнику вебмайстер забезпечує коректний показ посилання в соціальній мережі: словник OpenGraph - показ посилань в месенджерах і соціальних мережах Словник підтримують не тільки соціальні мережі, але й програми-месенджери – Skype, Telegram та багато інших. Тепер розглянемо основні атрибути словника Open Graph:
  1. “og:locale” — вказує на мову контенту та локацію сайту
  2. “og:type” — вказує тип контенту на сторінці (стаття, новина, огляд тощо)
  3. “og:title” – вказує метатег title
  4. “og:description” – вказує метатег description
  5. “og:url” – URL сторінки
  6. “og:image” — вказуємо зображення статті, огляду тощо.
  7. “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>
За допомогою Microdata ми вказали пошуковому роботі, що це інформаційна стаття. Розглянемо трохи докладніше:
  1. <h1 itemprop=”name”>Мікророзмітка</h1> – вказали найменування статті
  2. <meta itemprop=”inLanguage” content=”ua” /> – вказали мову, в даному випадку – українську.
  3. <section itemprop=”articleBody”>Давайте поговоримо про мікророзмітку</section> – вказали тіло статті
  4. <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>

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, @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>
Не у всіх 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>
Після впровадження мікророзмітки необхідно перевірити її в сервісі Google – “Инструмент проверки структурированных данных” микроразметка товаров Жодних помилок не було допущено, тому потрібно почекати переіндексацію карток товарів для отримання розширеного сніппета. Тепер розглянемо детальніше, як саме правильна мікророзмітка допомагає вашому сайту. Ми впровадили мікророзмітку для категорій товарів 25 вересня, і з цього дня Google поступово почав переіндексувати сторінки. Одна з перших категорій була “Діадеми” і тому аналізуватимемо саме її. микроразметка магазина - повышение CTR З цього графіка, отриманого за допомогою Search Console, ми бачимо збільшення середнього CTR на цій категорії. До впровадження структурованих даних, як бачимо на скріншоті, середній CTR категорії “Діадеми” становив 2,5%, після переіндексації даної сторінки, CTR збільшився на 1 пункт і дорівнює 3,47%. Завдяки мікророзмітці, ми змогли збільшити CTR за короткий період.

Висновки

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