Що таке мікророзмітка сайту і як вона працює?

4329
11 хв.

Сьогодні розглянемо, напевно, найактуальніший інструмент сеошника – мікророзмітка. Що таке мікророзмітка сайту і навіщо вона? Чи потрібно впроваджувати і як впливає на ранжування сайту?

Для чого потрібна мікророзмітка на сайті?

Мікророзмітка (англ. Rich Snippet) – це структурування сторінки сайту додатковими атрибутами і тегами в коді, які допомагають пошуковим роботам Google та ін. розпізнавати тип вмісту контенту.

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

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

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

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

Schema.org

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

Open Graph

Словник, що визначає, як буде виглядати відправлене посилання у соціальних мережах. Посилання з Open Graph містить зображення і коротку інформацію про контент на сторінці. Виглядає привабливо і підвищує клікабельність. Open Graph робить сайти помітнішими у соцмережі. Протокол можна впровадити на сайт, прописавши його в коді або використовуючи плагіни для CMS. Обов'язково потрібно проводити перевірку валідності складеного графа перед заливкою на сайт за допомогою Meta Sharing Debugger. Мінімальний набір тегів для графа:

og:title

og:description

og:url

og:image

og:type

<meta property="og:title" content="Брендер">

<meta property="og:image" content="https://brander.ua/path/to/image.png">

<meta property="og:type" content="article">

<meta property="og:url" content="https://brander.ua/">

<meta property="og:description" content="Digital-агентство Brander">


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

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

Мікроформати – це один із найперших способів впровадження мікророзмітки, при якому структуровані дані додаються прямо в HTML через class-атрибути.

Основна ідея мікроформатів – використовувати вже існуючі HTML-елементи і доповнювати їх спеціальними класами (наприклад, hCard, hReview), щоб позначити тип даних: контактну інформацію, відгуки, події.

Сьогодні мікроформати застосовуються рідше, оскільки поступаються Schema.org за гнучкістю і підтримкою з боку пошукових систем. Однак вони все ще можуть зустрічатися у старих проектах або використовуватися для простих сценаріїв.

Види синтаксису: JSON-LD, Microdata та RDFa

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

  1. JSON-LD – окремий блок скрипта в <head> або <body>, не втручається в HTML-розмітку сторінки. Це рекомендований формат Google завдяки простоті впровадження і мінімальному ризику помилок.
  2. Microdata – вбудовується прямо в HTML через атрибути (itemprop, itemscope). Дозволяє пов'язати дані з конкретними елементами, але ускладнює код і підтримку.
  3. RDFa – розширений синтаксис на основі HTML-атрибутів (property, typeof), використовується для більш складних структур даних, але застосовується рідше через надмірність.

На практиці в більшості проектів використовується JSON-LD як основний і найбільш безпечний варіант впровадження.

Основні типи розмітки Schema.org

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

Кожен тип розмітки вирішує конкретне завдання: передати інформацію про компанію, товар, контент або дії користувача.

Organization – контакти компанії

Розмітка Organization використовується для передачі пошуковим системам ключової інформації про компанію: назва, логотип, сайт, контакти і посилання на соцмережі.

Вона допомагає коректно ідентифікувати бренд і пов'язати сайт з офіційною організацією.

На практиці застосовується для формування брендових сніпетів і Knowledge Panel у Google.

Особливо важлива для корпоративних сайтів і сервісів, де критична впізнаваність і довіра до бренду.

Product і Offer – товари і ціни

Для сторінок, що містять товари з цінами, для розширення сніпета використовують schema.org/Product у зв'язці з Offer. Можливі атрибути товарів включають: назву, опис, ціну, валюту, наявність, рейтинг та інші параметри.

Правила розмітки товарів описані в довідці Google. Код розмітки товару впроваджується на сторінці і використовується для формування розширеного сніпета у пошуковій видачі.

Для покращеного сніпета товару також можна створити фід і додати його в Google Merchant Center. Це дозволить виводити товари в Google Shopping, розширювати мобільний сніпет, а також відображати товари в пошуку по зображеннях із ціною.

Додатково фід використовується в рекламних кампаніях Performance Max, що дозволяє масштабувати покази товарів одразу в кількох каналах Google. Коректна структура даних починається з самої сторінки товару – детальніше про те, як її оформити, у гайді як скласти картку товару.

Products list – список товарів

Дозволяє розмітити сторінку з переліком товарів. Увага, якщо у переліку товару є детальний опис, то його розмічати забороняє довідка від Google.

Особливо актуально для каталогів і B2B-платформ – детальніше про специфіку таких рішень у статті що таке B2B маркетплейс.

Review – відгуки

Дана семантична розмітка дозволяє позначити відгук на фільм, книгу, рецепт, застосунок і організацію. Основні атрибути схеми Review: рейтинг, автор, дата публікації і текст відгуку.

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

Важливо, щоб відгуки були реальними і розміщувалися на сторінці, а не передавалися тільки в коді.

FAQ – питання і відповіді

За допомогою мікророзмітки питання-відповідь додаємо перелінковку по сайту, збираємо інформаційні запити, привертаємо увагу з видачі. Алгоритм впровадження ефективної мікророзмітки FAQ:

  1. Зібрати список цікавих користувачу питань.
  2. Кластеризувати питання по необхідних сторінках.
  3. Скласти відповіді на питання з урахуванням перелінковки по сайту. Варіанти відповідей мають бути доступні на сайті.
    Формат: 1 питання користувача – 1 відповідь представника сайту.
  4. Прописати код розмітки і перевірити у валідаторі коду. Можна скористатися генератором цієї розмітки. Безкоштовний і зручний інструмент: FAQ Page Rich Snippet Generator.
  5. Впровадити код мікророзмітки на сайт.

При цьому важливо, щоб питання і відповіді були реально розміщені і видимі користувачу на сторінці.

Recipe – рецепти

Семантична розмітка для рецептів. Існує два обов'язкових атрибути: Name і Ingredients. Повний список можливих полів для рецептів представлений на сайті розмітки.

Код розмітки рецепта:

Як виглядає розширений сніпет у видачі:

Впровадження розмітки для рецептів на практиці показало значне підвищення CTR.

Event – заходи

Служить для позначення подій. За допомогою словника Schema.org виводимо у сніпет детальну інформацію про який-небудь захід. Приклади мікророзмітки в коді:

Як виводить Google івенти у сніпет:

Blog / Article – статті

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

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

Також пошукові системи використовують дату як додатковий сигнал при формуванні видачі за інформаційними запитами.

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

ImageObject – зображення

Розмітка картинок. Дозволяє передати ботам пошуковика більше інформації про зображення і дозволяє виводити зображення у сніпет. Список усіх можливих атрибутів: https://schema.org/ImageObject. Рекомендується використовувати цей тип розмітки для зображень у контенті для блогу і статей.

Код для розмітки зображення:

Як додати мікророзмітку на сайт?

Впровадження мікророзмітки залежить від типу сайту, рівня доступу до коду і технічної команди. На практиці як додати мікророзмітку на сайт використовуються три основні підходи – від ручного впровадження до автоматизації через CMS.

Через код вручну (JSON-LD)

Найбільш точний і рекомендований спосіб – додавання мікророзмітки у форматі JSON-LD безпосередньо в код сторінки. Розмітка розміщується окремим скриптом і не впливає на HTML-структуру, що знижує ризик помилок.

Підходить для кастомних проектів і випадків, де потрібен повний контроль над даними.

Через плагіни CMS

Для сайтів на CMS (WordPress, Shopify та ін.) мікророзмітка часто впроваджується через готові плагіни. Вони автоматично генерують базову розмітку для сторінок, товарів і статей без необхідності писати код.

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

Передача ТЗ розробнику

Якщо проект складний або потребує нестандартної розмітки, оптимальний варіант – підготувати технічне завдання для розробника. У ТЗ вказують мікророзмітку для інтернет-магазину або іншого виду сайту, сторінки впровадження і обов'язкові атрибути.

Такий підхід дозволяє уникнути помилок і впровадити мікророзмітку з урахуванням SEO-задач і структури сайту. При розробці сайту з нуля мікророзмітка закладається на етапі архітектури – для цього використовується послуга розробки сайтів.

Як перевірити мікророзмітку?

Після впровадження важливо переконатися, що розмітка коректно зчитується пошуковими системами. Для того, щоб перевірити мікророзмітку сайту, використовуються валідатори Google (Rich Results Test) і звіти в Google Search Console або schema.org валідатор.

Як мікророзмітка впливає на ранжування?

Отримані структуровані дані використовуються для більш точного формування сніпетів і доповнення інформації про сторінку у видачі – користувач швидше знаходить результат.

Прямого впливу на ранжування мікророзмітка не має. Однак після її впровадження, як правило, зростає CTR, зменшується показник відмов і збільшуються конверсії. За даними Semrush, використання розширених сніпетів може збільшувати кількість кліків до +677% залежно від типу розмітки і ніші.

Висновок

Після впровадження мікророзмітки, як правило, зростає CTR, зменшується показник відмов і збільшуються конверсії. Ми підготували чек-лист як зробити мікророзмітку сайту:

  1. Визначити типи розмітки під задачі сайту (товари, статті, FAQ та ін.).
  2. Впровадити розмітку (пріоритет — JSON-LD).
  3. Переконатися, що дані відповідають контенту сторінки.
  4. Перевірити розмітку через валідатори Google.
  5. Додати фід у Google Merchant Center (для e-commerce).
  6. Відстежувати відображення розширених сніпетів і CTR.

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

16 серпня 2021
4.7 / 5 (18 голосів)