Що таке мікророзмітка сайту та навіщо вона потрібна? Готові рішення від SEO-спеціаліста, які можна використовувати для покращення сніпету
Для залучення більшої кількості користувачів ваш вебсайт повинен бути не тільки в топі пошукової видачі, а й мати привабливий вигляд у SERP. Можливо, ви помічали, що деякі вебресурси вже виділяються на сторінці видачі результатів: мають фото, графік роботи або список подій, як на прикладі нижче.
Змінити відображення сайту у видачі можна за допомогою мікророзмітки. У статті поговоримо про основні поняття, розкажемо як впровадити та перевірити теги, а також надамо приклади готових до використання кодів від SEO-спеціаліста Webpromo.
Що таке мікророзмітка та сніпет сайту: огляд основних понять
Невеликий інформаційний блок (частина коду), який стисло описує користувачу, що його чекає на вебсайті, називають сніпетом. Часто сніпет містить невеликий уривок вебсторінки — контекст, де зустрілося ключове слово, за яким проводився пошук.
Мікророзмітка — це структурування даних спеціальними тегами та атрибутами. Мікророзмітка допомагає пошуковим роботам проаналізувати вміст вебсторінки та правильно передати вигляд цієї сторінки у видачі результатів Google, іншого пошуковика або у соціальних мережах.
Мікророзмітка сайту складається з синтаксису та словника, тобто з набору тегів та правил їх впровадження.
Для чого потрібна мікророзмітка сайту?
Мікророзмітка виконує декілька важливих функцій, а саме:
- Розширює сніпет — дає можливість показати більше інформації. Це спонукає користувача перейти на ваш сайт.
- Коректно зображує сторінку у соцмережах — дозволяє додати потрібні зображення та опис.
- Опосередковано впливає на ранжування внаслідок структурування даних і можливого збільшення переходів на сайт.
Способи мікророзмітки
Розмічати дані на вебсторінці можна за допомогою словників. Словник — це набір визначених слів, які передають сутність інформації, зв’язки між нею та спосіб її відображення. Найчастіше використовують Schema.org та Open Graph.
Мікророзмітка Schema.org
Створення словника Schema.org ініціювали у 2011 році Google, Yahoo та Bing. Сайт, розмічений термінами Schema.org, сприймається однаково добре різними пошуковиками.
Словник пропонує розробникам та SEO-cпеціалістам понад 100 різноманітних схем, перелік яких постійно доповнюється. Схема в цьому випадку складається з ієрархічно прописаних тегів та атрибутів HTML.
Мікророзмітка Schema.org допомагає оформити відгуки, рецепти, зробити анонс подій чи показати окремі елементи вебсторінки.
Мікророзмітка Open Graph
На відміну від Schema.org, мікророзмітка Open Graph використовується для оформлення вигляду посилання на сайт у соціальних мережах. Словник розроблений творцями Facebook для покращення користувацького досвіду саме у соціальних мережах.
Технологію використовують у Facebook, Pinterest, Telegram, Viber тощо.
Ще є Мікроформати, FOAF, Dublin Core, Data vocabulary. Ми не будемо на них зупинятися, оскільки ці словники вважаються застарілими та можуть не підтримуватися деякими пошуковими системами.
Синтаксис мікророзмітки
Щоб впровадити обраний словник на сайт, потрібно обрати один із синтаксисів RDFa, Microdata, JSON-LD. Синтаксис — це кодування, набір правил, за якими прописуються теги та атрибути словника.
Microdata
Цей синтаксис ще називають Мікродані. Теги прописують в код HTML. Для опису використовують 3 основні атрибути:
- itemscope — описує сутність;
- itemtype — описує тип сутності, не використовується окремо від попереднього;
- itemprop — визначає властивості сутності.
Microdata використовують для розмічення на видимій частині вебсторінки. Ще декілька років тому Мікродані були найпопулярнішим синтаксисом для мікророзмітки HTML. Проте сьогодні все більшого розповсюдження набуває JSON-LD.
JSON-LD
Ця технологія розмітки з’явилася лише у 2010 році. Особливість синтаксису — оформлення інформації за допомогою текстового формату JSON, яка прописується в тег script.
Інформація передається за допомогою пар «ключ-значення», які розуміють, як пошукові роботи, так і люди.
Важливо! Google рекомендує використовувати JSON-LD для впровадження мікророзмітки.
Синтаксис має велику кількість атрибутів для розв’язання різних задач, наприклад:
- @context — описує контент;
- @id — надає унікальний ідентифікатор;
- @value — застосовує визначені параметри;
- @lanuage — визначає мову.
За допомогою перерахованих та інших атрибутів можна впровадити словник Schema.org для різних сайтів.
RDFa
Синтаксис веде історію з 2004 року. Сьогодні він використовується переважно у парі зі словником Open Graph. Така мікророзмітка дозволяє правильно підтягнути у соцмережі url-адресу, назву, опис та фото.
Дані прописуються в коді HTML.
Як реалізувати мікророзмітку на сайті?
Реалізація мікророзмітки складається з декількох етапів.
1. Генерування коду
Для автоматичного створення коду існують спеціальні програми:
- генератор мікророзмітки Merkle;
- розширення для Chrome Schema Builder;
- Майстер розмітки структурованих даних від Google;
- Плагіни у WordPress Yoast Local SEO та Yoast SEO.
Всі перераховані програми використовують синтаксис JSON-LD.
Варто зазначити, що користування інструментами не є обов’язковим — прописати код можливо і вручну, але такий процес вважається занадто ресурсозатратним.
2. Перевірка мікророзмітки сайту
Якщо ви писали код самостійно або створювали у генераторі, спеціалісти рекомендують протестувати мікророзмітку перед додаванням на сайт.
Виняток становлять тільки плагіни, з якими ви взаємодієте через користувацький інтерфейс. Наприклад, плагін Yoast Local SEO автоматично створює розмітку вебсторінок, коли ви додаєте інформацію на свій сайт — години роботи, контакти, адреса тощо.
Валідатор мікророзмітки ґуґл пропонує використовувати два інструменти, які розв’язують різні задачі:
- Rich Results Tests демонструє роботу вбудованих мікроелементів, наприклад, допомагає подивитися, як буде виглядати у видачі розмічений сніпет.
- Schema Markup Validator — перевірка Schema.org, яка тестує, як вебсторінку за url-адресою, так і частинки коду, прописані у текстовому форматі.
3. Розміщення на сайті
Спосіб впровадження мікророзмітки залежить від особливостей самого вебсайту та синтаксису. Якщо говорити про JSON-LD, використовують:
- Google Tag Manager. Він дозволяє самостійно вносити зміни в теги та атрибути без участі веброзробників. Додайте власний тег HTML та налаштуйте відповідні тригери — для всіх або для конкретних сторінок.
- Ручні зміни в коді вебсайту — скрипт прописують у тегах head або рідше — body.
- Універсальні плагіни SEO — мікророзмітка в цьому випадку генерується та встановлюється автоматично. Окрім перерахованих вище, можна скористатися SEO Framework або RankMath.
Важливо! Якщо ви використовуєте плагін для оптимізації вебсайту, рекомендуємо обрати лише один. Одночасне використання декількох плагінів може нашкодити сайту — стати джерелом технічної плутанини, що призведе до вповільнення або некоректної роботи деяких елементів.
Як перевірити мікророзмітку на сайті?
Для оцінки ефективності розмітки вебсторінок або виявлення поточної мікророзмітки (наприклад, ви щойно почали працювати з сайтом) використовують Schema Markup Validator, описану вище, або Google Search Console.
Інформація про мікророзмітку у Search Console знаходиться у вкладці Покращення (Improvements): виберіть тип розмітки та перегляньте детальний звіт.
Види мікророзмітки: приклади кодів, які можна впровадити на свій сайт
Раніше ми вже з’ясували, які існують словники та синтаксиси, як згенерувати, додати та контролювати мікророзмітку. Далі розглянемо конкретні приклади — види мікророзмітки для покращення відображення на сторінці видачі різних типів вебсторінок. Коди у прикладах написав SEO-спеціаліст Webpromo Іван Бондарук.
Щоб завантажити код, натисніть на вид потрібної мікророзмітки. На ваш комп’ютер (ноутбук, телефон або інший пристрій на якому ви переглядаєте статтю) завантажиться файл у форматі Word (DOCX) з кодом обраної мікророзмітки. Приклад скрипту показано на зображенні нижче.
Мікророзмітка відгуків
Семантична мікророзмітка AggregateRating (⇐ натисніть на назву для завантаження коду) демонструє користувачу рейтинг продукту — товару, фільму, навчального курсу або готелю.
Мікророзмітка Article
Вбудовані мікроелементи дозволяють поліпшити вигляд статті у пошуковій видачі, додати дату публікації або зображення.
Завантажити Article.
Мікророзмітка «хлібних крихт»
BreadcrumbList (⇐ натисніть для завантаження файлу) найчастіше використовують на комерційних сайтах. У сніпеті можна відобразити шлях користувача з головної сторінки до поточної.
Мікророзмітка FAQPage
Розмітка «Питання-відповіді» дозволить виводити у SERP декілька популярних запитань з відповідями на них. Такий блок використовують інформаційні та комерційні сайти.
Завантажити FAQPage.
Мікророзмітка зображень і відео
Користувачі часто шукають інформацію по відео або зображенням. Правильне відображення фото особливо актуальне для інтернет-магазинів.
Без спеціальної мікророзмітки Google «бере» фотографію на власний розсуд. За допомогою VideoObject та ImageObject (⇐ натисніть на назви видів мікророзмітки для отримання скриптів) можна запрограмувати потрібний об’єкт.
Мікророзмітка контактів
Код Organization (⇐ файл з кодом тут) виведе на сторінку результатів пошукової видачі додаткову інформацію про компанію, наприклад, контакти, адресу, логотип тощо. Його рекомендують використовувати для головної сторінки сайту, а для інших сторінок того самого вебсайту — LocalBusinnes (⇐отримати скрипт).
Мікророзмітка Product
Цей тип організації сніпету застосовують для розмітки картки товару — найменування, зображення, опис, вартість, відгуки, ціна або її діапазон.
Отримати Product.
Висновки: чи варто впроваджувати мікророзмітку?
Для SEO мікророзмітка має важливе значення. Покращення сніпету може позитивно вплинути не тільки на поведінкові фактори ранжування, а й збільшити відвідуваність сайту, привабити потенційних клієнтів.
Впровадження та контроль мікророзмітки потребує певних навичок — знання HTML, роботи зі специфічними програмами. Звісно, створити вбудовані мікроелементи можна самостійно за допомогою універсальних генераторів. Проте, якщо ви хочете не просто покращити сніпет, а планомірно оптимізувати сайт — радимо звернутися до фахівців.
