Мікророзмітка та SEO: яку мікророзмітку та в яких випадках використовувати? Гайди з налаштування

#SEO 15 August 2021 Оцінити статтю

Мікророзмітка служить для розмітки даних на сторінках сайту на зрозумілій пошуковій мові, що дає можливість пошуковим системам використовувати розмічені дані для виведення інформації в СНІПЕТ, а це покращує відповіді на запитання користувачів – по суті головне завдання ПС.

Словники або способи мікророзмітки

З моменту появи розмітки впроваджувалися різні словники та синтакси. Словник визначає класи та властивості, за допомогою яких передається контент зі сторінки у пошукову видачу. Синтаксис містить теги та атрибути для опису сутностей.

Schema.org

Це найпопулярніший спосіб мікророзмітки контенту. Підтримується з 2011 пошуковими гігантами: Google, Яндекс, Yahoo, Bing. З його допомогою можна виводити різні корисні характеристики у сніпет. Наприклад рейтинг, відгуки, ціни та ін.

У Schema.org є три основні атрибути, обов’язкові для використання в кожній мікророзмітці:

За допомогою розмітки Schema.org можна розмічати не лише товари, а й статті, фільми, рецепти тощо. Наприклад, повний список підтримуваних структурованих даних Schema.org в Google можна подивитися тут – https://developers.google .com/search/reference/overview?hl=ua:

Види мікророзміток Google

А для їх перевірки на сайті варто використовувати сервіс https://search.google.com/test/rich-results ?hl=ua

Розмічена ділянка коду виглядає так:

Приклад розміченого коду сайту

І ось цей же код через сервіс перевірки:
Приклад коду сайту перевіреного через сервіс перевірки мікророзміток

Open Graph

Ще один популярний словник розмітки, який використовується для коректного відображення постів у Facebook, соціальних мережах, месенджерах і взагалі в будь-якому місці, де можна поділитися посиланням. З Open Graph пост буде містити заголовок, картинку та опис.

Наприклад, ось сніпет сторінки сайту при скиданні в Телеграмі, де розмічено назву сайту, УРЛ, заголовок та опис:

Сніпет сайту у телеграмі без мікророзмітки

А ось сніпет схожої сторінки, де додатково розмічено зображення:
Сніпет сайту у телеграмі з мікророзміткою зображення

Для створення коду розмітки використовують теги синтаксису:

Приклад коду із розміткою Open Graph:
Приклад коду з розміткою Open Graph

Мікроформати

Словник мікророзмітки Microformats.org створено у 2007 році. Він включає різні типи об’єктів та описи їх властивостей. Цим словником описують товари, заходи, компанії, рецепти та інші сутності із набором унікальних характеристик. З усього списку мікроформатів найчастіше використовується hCard, який описує контактні дані людей та організацій.

Частина коду з використанням мікроформатів виглядатиме так:

Частина коду з використанням мікроформатів

Синтаксис мікророзмітки

Окрім основних атрибутів itemtype, itemscope, itemprope із Schema.org можна використовувати дод. Елементи:

  1. RDFa та RDFa Lite для опису різних типів об’єктів через атрибути xmlns:v=”http://rdf.data-vocabulary.org/#, property=”v:title”, typeof=”v:Breadcrumb” та інші .
  2. JSON-LD використовується для опису об’єктів пов’язаних даних. З метою адаптації розмітки до пошукових систем, вони містяться в тегах <script>. У RDFa та JSON-LD дані представлені у форматі «ключ-значення». Приклад:

Синтаксис мікророзмітки
Де:

Мікророзмітка для Яндекс та Google

Наявність мікророзмітки на сайті – один із офіційно підтверджених факторів ранжування (про що повідомив представник Google Gary Illyes). У своїх рекомендаціях пошуковий гігант Google рекомендує використовувати мікророзмітку JSON-LD (про що йдеться в офіційному «Посібнику» Google).

Умовно (дуже грубо) можна розділити мікророзмітки на кілька типів: для інтернет-магазинів, статейного сайту, загальні.

Основні мікророзмітки

BreadcrumbList (рядки навігації)

Мікророзмітка хлібних крихт на сторінках сайту. Правильна мікророзмітка ХК виглядає так:
Приклад мікророзмітки хлібних крихтOrganization

Загальна мікророзмітка контактних даних для сайту, підійде для всіх контактів та будь-якого типу сайту. Приклад:
Приклад мікророзмітки контактів Organization

LocalBusiness

Мікророзмітка для окремого бізнесу або філії організації, що мають точне фізичне місцезнаходження. Приклади LocalBusiness – це ресторан, ресторан мережі ресторанів, філія банку, клуб, боулінг і т.д. Приклад:
Приклад мікророзмітки контактів LocalBusiness, локальної компанії

ImageObject

Атрибут itemprop=”image” дозволяє роботам швидко розпізнавати інформацію про зображення. Достатньо буде вказати посилання на зображення, опис, назву картинки, підпис, розмір зображення. Приклад:
Приклад мікророзмітки зображень

Review

Якщо на сторінках товарів є відгуки, їх можна розмітити за допомогою властивості Review. У результаті видачі Google у сніпеті з’явиться рейтинг та відгуки: У коді сайту необхідно вказати такі атрибути.
Приклад мікророзмітки відгуків

Article

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

Product

Приклад мікророзмітки товарів

Використання мікророзміток на сайтах

Що розмічаємо:

  1. Хлібні крихти
  2. Контакти
  3. Товари
  4. Категорії
  5. Відгуки (входить до товарів)
  6. Рейтинг (входить до товарів)
  7. Запитання-відповідь
  8. Статті

Товари

Якщо за розміткою ХК та контактів все зрозуміло, то з товарними позиціями вже цікавіше. Розмічати у товара потрібно все, є звичайно основний набір даних, які повинні бути розмічені для обробки пошуковими системами, але бажано розмітити все, чим більше даних – тим краще сніпет може бути.

Приклад відмінної мікророзмітки товару – https://eplio.com.ua/bu -apple-iphone-8-plus-256gb-space-gray.html:
Сніпет сторінки товару з повною мікророзміткою Product
Код сторінки товару з повною мікророзміткою Product
Код сторінки товару з повною мікророзміткою Product
При розмітці товарів варто врахувати, якщо на товарі немає відгуків, то буде попередження в сервісі перевірки – це не помилка, це нормально. Також найчастіше є ще поля, які відсутні, і їх можна давати статично:
Можливі помилки у мікророзмітці товару
Можливі помилки у мікророзмітці товару
Рекомендую:

Якщо товар має характеристики, то їх теж можна розмітити, приклад:
Мікророзмітка характеристик товару

Під мікророзміткою категорій я маю на увазі розмітку кількості товарів і мінімальної/максимальної ціни в категорії, які можуть бути додані в сніпет сторінки. Ця розмітка будується на основі вищезгаданої мікророзмітки товарів Product. Приклад – https://touch.com.ua/Telefony-iPhone/:
Мікророзмітка категорій товарів
Як виглядає сніпет:
Сніпет сторінки категорії з мікророзміткою
У чому полягає розмітка? Якщо у товарів основний елемент розмітки це тег offer, то для категорій це offers, в якому, власне, і вказується кількість товарів і діапазон цін + можна вивести середній рейтинг і кількість відгуків за товарами категорії:
Мікророзмітка категорій товарів у сервісі перевірки від Google

Відгуки (входить до товарів)

У розмітці відгуків нічого особливого немає, тим більше, що вона входить до мікророзмітки товарів за замовчуванням, але для загального розуміння у разі якихось помилок, я покажу по тегах мікророзмітки. Приклад самої розмітки:
Мікророзмітка відгуків у сервісі перевірки від Google

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

Часті питання (FAQPage)

Одне з останніх нововведень щодо мікророзмітки для Google. Дозволяє суттєво розширити сніпет за рахунок виведення від 2 до 4 часто задаваних питань по темі пошукового запиту. До 19.07.2020 працювало майже у всіх випадках, можна було особливо не морочитися і додавати наскрізний блок, але потім Google мабуть зрозумів, що за допомогою цієї розмітки почали сильно маніпулювати пошуковою видачею (сніпет на 70% дисплея у мобільних пристроїв) і сильно обмежив вивід шаблонних блоків, а наскрізні взагалі пофіксили (винятки є звичайно, але вони зустрічаються рідко, на те й винятки).
Цікавенько! Наприклад, ви налаштували собі мікророзмітку FAQPage (всі перевірки пройдені) для сторінок і вирішили її перевірити, як зазвичай це роблять через site:domain.ru і поїхали дивитися, чи правильно так робити? Так, але не зовсім. Пояснюю:

  1. Дані під час перевірки через site:domain.ru та реальність – різні речі!
  2. Завжди перевіряйте дані та мікророзмітку через Google Search Console
  3. Правильність мікророзмітки не гарантує виведення даних у сніпет

Приклад «Очікування»:
Сніпет сторінки з мікророзміткою Питання-відповідь при ручній перевірці
Реальність (так, реальність сеошника жорстока):
Реальний сніпет сторінки з мікророзміткою Питання-відповідь у результатах пошуку
Так чому ж Google не виводить питання-відповідь у СНІПЕТ, якщо все правильно зроблено? Тут вся річ у нових алгоритмах, які апдейтнули 19 липня 2020 року. Якщо питання та відповіді не пов’язані релевантністю або інтентом до пошукового запиту – виводитися вони не будуть. Відповідно для різних пошукових запитів сніпет однієї і тієї ж сторінки може бути і з питаннями, і без них. Або по одному запиту буде виведено 2 запитання та відповіді, а по іншому – 4.
І останньою важливою зміною стало скасування виведення emodji для запитань та відповідей приблизно у 99% випадків. Як же барвисто виглядав сніпет:
Сніпет сторінки з мікророзміткою FAQPage з емодзі
І як стало:
Сніпет сторінки з мікророзміткою FAQPage без емодзі
То як налаштувати питання-відповіді, щоб мати шанси на розширений сніпет? Мій спосіб полягає в наступному:
Контентні сайти – писати запитання-відповіді із СНЧ запитів, як правило більшість таких запитів і є питаннями на тему, яку ви описуєте. Ідеально взагалі писати текст на сторінки та разом з ним кілька запитань та відповідей, щоб повністю розкрити тему.

Інтернет-магазини – тут однозначно варто використовувати автогенеру відповідей. Що найчастіше цікавить користувачів, які шукають щось на покупку:

  1. Ціни – дешеві та дорогі товари
  2. Популярні товари – завжди цікаво, що беруть інші
  3. Відгуки – важливо, також шукають товари з великою кількістю відгуків
  4. Асортимент – загалом важливий асортимент магазину

Всі ці дані є на сторінках магазинів, а значить програмісти зможуть їх використовувати в автогенерілці. Приклад того, як це реалізувати (підкреслені динамічні дані):
Приклад реалізації автогенерованих частих питань на сторінці категорії
З інших запитань взагалі йде виведення товарів:
Приклад реалізації автогенерованих частих питань на сторінці категорії
Або категорій:
Приклад реалізації автогенерованих частих питань на сторінці категорії
У видачі так:
Сніпет сторінки категорії з мікророзміткою частих питань

Статті

“Розмітка Article дозволяє Google краще інтерпретувати контент сторінок і показувати найбільш підходящі заголовки, зображення та дати публікації статей у розширених результатах типу Article.”
Так каже сам Google!

Що ж насправді? А насправді так і є, якихось помітних покращень чи переваг ви не отримаєте, але сторінки з даною мікророзміткою будуть явно зрозумілішими для пошукача.

Існує 3 варіанти такої мікророзмітки:

  1. https://schema.org/Article — Загальна схема, яка відповідає всім текстовим матеріалам.
  2. https://schema.org/NewsArticle — Схема для розмітки статей новин.
  3. https://schema.org/BlogPosting — Схема для розмітки статей у блозі.

Приклад універсальної мікророзмітки (замініть загальний об’єкт Article на NewsArticle або BlogPosting і валідність збережеться):

<div itemscope itemtype=”https://schema.org/Article”><link itemprop=”mainEntityOfPage” href=”https://example.ru/” /><link itemprop=”image” href=”image”>

<meta itemprop=”headline name” content=”Назва Статті”>

<meta itemprop=”description”

content=”Обов’язковий короткий опис статті для Яндекса довжиною від 50 до 150 символів.”>

<meta itemprop=”author” content=”автор статті”>

<meta itemprop=”datePublished” datetime=”2010-07-03″ content=”2010-07-03″>

<meta itemprop=”dateModified” datetime=”2018-09-15″ content=”2018-09-15″>

<div itemprop=”publisher” itemscope itemtype=”https://schema.org/Organization”>

<div itemprop=”logo” itemscope itemtype=”https://schema.org/ImageObject”>
<img itemprop=”url image” src=”images/logo.png” alt=”Опис зображення” title=”Опис зображення” style=”display:none;”/>

</div>

<meta itemprop=”name” content=”назва сайту”>

<meta itemprop=”telephone” content=””>

<meta itemprop=”address” content=”Росія”>

</div>

<p>Інтро</p>

<span itemprop=”articleBody”>Контент</span>

</div>

Давайте розберемо її:

Запитання-відповіді (QAPage)

Сторінка запитання з відповідями – це веб-сторінка, де після одного конкретного питання йдуть відповіді. Для таких сторінок можна використовувати такі типи розмітки schema.org: QAPage, Question та Answer.

Якщо розмітка реалізована правильно, у результатах пошуку можуть з’являтися розширені результати, які допомагають залучити на сайт відповідну аудиторію через Google Пошук. Нижче наведено приклад результату за запитом “Як витягнути застряглий кабель з USB-порту?” за наявності потрібної розмітки на сторінці:
Швидкі плитки у сніпеті з мікророзміткою QAPage
Вимоги до контенту:

  1. Розмітку потрібно застосовувати для вибільної сторінки з питаннями та відповідями, на якій є можливість поставити запитання або залишити відповідь. Якщо на запитання дана відповідь і немає можливості додати інші відповіді, потрібно використовувати розмітку FAQPage.
  2. Не застосовуйте розмітку QAPage на всіх сторінках сайту або форуму, якщо не весь контент відповідає вказаним вимогам. Наприклад, на форумі може бути одночасно безліч тем-питань, для яких розмітка підходить, та не пов’язаних з питаннями сторінок, для яких вона не підходить.
  3. Не розмічайте за допомогою QAPage сторінки з відповідями на запитання, що часто ставляться, або з кількома питаннями. Розмітка QAPage призначена для сторінок, присвячених якомусь одному питанню та відповідям на нього.
  4. Тип Answer призначений лише для відповідей на запитання. Коментарі щодо питань або відповідей розмічати за допомогою типу Answer не слід.
  5. Для показу у вигляді розширених результатів не підходять питання та відповіді, в яких містяться непристойні, грубі, образливі, дискримінаційні висловлювання, матеріали сексуального характеру, сцени насильства, а також заклики до небезпечних чи протиправних дій.

Інші менш популярні мікророзмітки та посилання на інформацію по них

По всіх цих мікророзмітках рекомендую брати інформацію у перевіреного джерела – Гугла:

https://developers.google.com/search/reference/overview?hl=ru
Список підтримуваних мікророзміток від Гугл

Олександр Романенко SEO Team Lead/Senior SEO
схожі статті
підписатися:
Що таке просування по трафіку?
Що таке просування по трафіку?
# SEO
Швидка перевірка індексації сторінок в Яндексі
Швидка перевірка індексації сторінок в Яндексі
# SEO
Алгоритм MUM
Алгоритм MUM
# SEO
Коментарі