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

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

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

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

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

Schema.org

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

  • itemscope — вказує, який об’єкт ми використовуємо;
  • itemtype завжди йде після itemscope і вказує, який тип об’єкта буде помічений. У нашому прикладі це Product (Продукт) — Iphone 6;
  • itemprop — вказує властивості вибраного об’єкта, у нашому прикладі це ціна, опис і т.д.

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

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

А для їх перевірки на сайті варто використовувати сервіс https://search.google.com/test/rich-results. Розмічена ділянка коду виглядає так:

Мікророзмітка і SEO | WEDEX

І ось цей же код через сервіс перевірки:

Мікророзмітка і SEO | WEDEX

Open Graph

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

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

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

Сніпет сайту у телеграмі з мікророзміткою зображення | WEDEX

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

  • og:title — заголовок об’єкта репоста;
  • og:description — опис об’єкта;
  • og:image — зображення;
  • og:url — посилання на розташування об’єкта;
  • og:type — тип об’єкта.

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

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

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

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

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

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

Окрім основних атрибутів 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 дані представлені у форматі «ключ-значення». Приклад:

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

Де:

  • “@type”: “Product” – вказівка ​​типу мікророзмітки
  • “sku”: “1548189” – артикул товару
  • “name”: “Apple iPhone 7 32Gb” – назва товару
  • “image”: посилання на зображення товару

Мікророзмітка для Google

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

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

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

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

Приклад мікророзмітки хлібних крихт | WEDEX

Часто трапляються випадки здавалося б коректної розмітки ХК, але насправді ні – це коли розмічають кожну хлібну крихту окремо.

Organization

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

Приклад мікророзмітки контактів Organization | WEDEX

LocalBusiness

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

Приклад мікророзмітки контактів LocalBusiness, локальної компанії | WEDEX

ImageObject

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

Приклад мікророзмітки зображень | WEDEX

Review

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

Приклад мікророзмітки відгуків | WEDEX

Article

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

Приклад загальної мікророзмітки статті | WEDEX

Product

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

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

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

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

Товари

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

Сніпет сторінки товару з повною мікророзміткою Product | WEDEX

Код сторінки товару з повною мікророзміткою Product | WEDEX

2 Код сторінки товару з повною мікророзміткою Product | WEDEX

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

Можливі помилки у мікророзмітці товару | WEDEX Можливі помилки у мікророзмітці товару | WEDEX

Рекомендую:

  • “brand” – використовувати назву сайту
  • “sku” – використовувати артикул
  • “description” – використовувати дескрипшен
  • Глобальний ідентифікатор товару, наприклад код GTIN, MPN або ISBN – використовувати артикул
  • “priceValidUntil” – вказати дату, до якої ціна є актуальною. Можна робити автогенерацією на місяць уперед. Або використовувати зазначену дату на сайті, якщо вона є
  • “url” – вказати УРЛ сторінки товару
  • “availability” – наявність товару. Варіанти:
    • in_stock – у наявності
    • out_of_stock – немає_в_наявності]
    • preorder – попереднє замовлення
  • Неприпустимий формат значення ціни для елемента даних “price” – у ціні не повинно бути пробілів, точок, ком і т.д. Тільки цифри.

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

Мікророзмітка характеристик товару | WEDEX

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

Мікророзмітка категорій товарів | WEDEX

Як виглядає сніпет:

Сніпет сторінки категорії з мікророзміткою | WEDEX

У чому полягає розмітка? Якщо у товарів основний елемент розмітки це тег offer, то для категорій це offers, в якому, власне, і вказується кількість товарів і діапазон цін + можна вивести середній рейтинг і кількість відгуків за товарами категорії:

Мікророзмітка категорій товарів у сервісі перевірки від Google | WEDEX

  • @type – Product
  • name – вказуємо назву категорії або Н1
  • aggregateRating
  • @type – AggregateRating
  • ratingValue – середній рейтинг по всіх товарах категорії
  • reviewCount – кількість відгуків
  • bestRating – найкраща можлива оцінка
  • offers
  • @type – AggregateOffer
  • lowPrice – ціна найдешевшого товару у категорії
  • highPrice – ціна найдорожчого товару у категорії
  • priceCurrency – вказуємо валюту

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

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

Мікророзмітка відгуків у сервісі перевірки від Google | WEDEX

  • @type – Review
  • reviewBody – текст відкликання
  • datePublished – дата публікації
  • author
  • @type – Person
  • Name – Хто залишив відгук
  • reviewRating
  • @type – Rating
  • ratingValue – Оцінка

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

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

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

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

Приклад «Очікування»:

Сніпет сторінки з мікророзміткою Питання-відповідь при ручній перевірці | WEDEX

Реальність (так, реальність сеошника жорстока):

Реальний сніпет сторінки з мікророзміткою Питання-відповідь у результатах пошуку | WEDEX

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

Сніпет сторінки з мікророзміткою FAQPage з емодзі | WEDEX

І як стало:

Сніпет сторінки з мікророзміткою FAQPage без емодзі | WEDEX

То як налаштувати питання-відповіді, щоб мати шанси на розширений сніпет? Мій спосіб полягає в наступному: Контентні сайти – писати запитання-відповіді із СНЧ запитів, як правило більшість таких запитів і є питаннями на тему, яку ви описуєте. Ідеально взагалі писати текст на сторінки та разом з ним кілька запитань та відповідей, щоб повністю розкрити тему. Інтернет-магазини – тут однозначно варто використовувати автогенеру відповідей. Що найчастіше цікавить користувачів, які шукають щось на покупку:

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

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

Приклад реалізації автогенерованих частих питань на сторінці категорії | WEDEX

З інших запитань взагалі йде виведення товарів:

Приклад реалізації автогенерованих частих питань на сторінці категорії | WEDEX

Або категорій:

Приклад реалізації автогенерованих частих питань на сторінці категорії | WEDEX

У видачі так:

Сніпет сторінки категорії з мікророзміткою частих питань | WEDEX

Статті

“Розмітка 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>

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

  • itemprop=”mainEntityOfPage” — Основна сторінка об’єкта, можна вказати канонічне посилання. Ця властивість є необов’язковою, але Google рекомендує її заповнювати.
  • itemprop=”image” — Посилання на картинку матеріалу, передаємо її через атрибут link, тому користувачі її не побачать у контенті, а ось пошукові роботи опрацюють.
  • itemprop=”headline name” — Заголовок матеріалу.
  • itemprop=”description” — Короткий опис матеріалу, бажано не більше 150 символів.
  • itemprop=”author” — Автор матеріалу.
  • itemprop=”datePublished” — Дата публікації матеріалу, вказуйте у форматі ГГГГ-ММ-ДД.
  • itemprop=”dateModified” — Дата оновлення матеріалу, вказуйте у форматі РРРР-ММ-ДД.
  • itemprop=”publisher” — Для цієї властивості необхідно використовувати об’єкт schema.org/Organization.
  • itemprop=”logo” – URL картинки, наприклад, логотип сайту. Для цієї властивості використовуємо об’єкт schema.org/ImageObject.
  • itemprop=”url image” — URL логотипу.
  • itemprop=”name” — Назва сайту/організації.
  • itemprop=”telephone” — Телефон можна залишити порожнім, або якщо він у вас є, заповнити.
  • itemprop=”address” — Тут я просто вказую країну.
  • itemprop=”articleBody” — Тіло матеріалу.

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

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

Швидкі плитки у сніпеті з мікророзміткою QAPage | WEDEX

Вимоги до контенту:

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

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

  • Book
  • Карусель
  • Course
  • Відгук критика
  • Event
  • Інструкції
  • Професійне навчання
  • Movie
  • Recipe
  • Вікно пошуку на сайті
  • Додаток
  • Підписка та платний контент
  • Video

По всіх цих мікророзмітках рекомендую брати інформацію у перевіреного джерела – Гугла: https://developers.google.com/search/docs?hl=ru

Список підтримуваних мікророзміток від Гугл | WEDEX

Олександр Романенко
Team Lead/Senior SEO-спеціаліст
Інші статті автора
14/11/2023
Мікророзмітка служить для розмітки даних на сторінках сайту на зрозумілій пошуковій мові, що дає можливість пошуковим системам використовувати розмічені дані для виведення інформації в СНІПЕТ, а це покращує відповіді на запитання користувачів - по суті головне завдання ПС.

23/05/2023
Редирект (перенаправлення) – це процес автоматичної переадресації користувача з однієї URL-адреси на іншу, що буває корисним при зміні URL-адреси сторінки, перенесення сайту на інший домен, виправлення помилок URL, забезпечення безпеки сайту тощо.

12/05/2023
Фільтри – це не просто інструмент, потрібний покупцю для пошуку товару в, іноді, дуже великих каталогах, їх налаштування – один з ключових чинників, що впливають на продуктивність  і ефективність інтернет-магазину. Три чверті користувачів, які не знайшли потрібний товар протягом 20 секунд залишають веб-ресурс і шукають більш зручний.

Останні статті по #SEO
27/03/2024
При досягненні бажаних результатів у пошуковій видачі не потрібно зупиняти роботи з просування платформи. Алгоритми пошукових систем періодично змінюються, конкуренти проводять роботи з покращення своїх ресурсів, а значить просуванням вашого сайту теж необхідно займатися постійно.

15/03/2024
Підбір ключових слів – важливий етап під час пошукового SEO-просування сайтів. Їх використання покращить ранжування сторінок вашого ресурсу.

11/03/2024
Ahrefs – корисний і потужний інструмент в арсеналі будь-якого SEO-фахівця. З його допомогою можна відстежувати позиції та дії конкурентів і поліпшити ранжування власного сайту, адже він вкаже на помилки, які були допущені ще під час створення ресурсу, але впливають на його позиції зараз.