Мікророзмітка сайту (семантична розмітка) — це розмітка вебсайту спеціальними тегами та атрибутами в HTML-коді для структурування інформації.
Атрибути — це слова, які визначають характеристики елемента й розміщуються всередині відкривального тега цього елемента.
Вона потрібна з двох причин:
По-перше, щоб пояснити браузеру, який контент є на сайті: де ціна, контакти, відгуки, інформація про організацію тощо. Це використання зрозумілих браузеру «слів», які пояснюють йому зміст сайту. Так пошуковий робот зможе простіше та швидше зчитати інформацію. А це означає, що користувачі отримають релевантну інформацію, а власники сайту — лояльних і цільових відвідувачів.
По-друге, мікророзмітка зручна для користувача. У пошуковій видачі, крім посилання, ми бачимо фрагмент контенту — сніпет. За його допомогою можна стисло та влучно передати основний зміст сайту. І якщо сніпет привабливий для користувача, це підвищує клікабельність посилання.
І справді, безпосередньо на ранжування сайту мікророзмітка не впливає. Але пошукові системи реагують на поведінкові фактори, а клікабельність — дуже важливий показник зацікавленості юзерів. Тому структурні дані вебсторінки — хороший бонус до SEO-просування.
Наприклад, сніпет сайту з фільмами, де використали мікророзмітку, містить рейтинг, кількість голосів, акторський склад, режисера, рік, жанр. Таке оформлення подобається користувачеві більше, ніж звичайний текст під посиланням, бо містить чітку й потрібну йому інформацію. Ви можете самі обрати, яку інформацію розміщувати у сніпеті.
Щоб повністю зрозуміти, що таке мікророзмітка сайту, треба зрозуміти, що вона в себе включає. Мікророзмітка — це доповнення до HTML-коду. Вона складається з конкретних тегів і атрибутів, які прописані у словнику. Як упровадити ці елементи в код, визначає синтаксис. Ту саму розмітку можна написати різними синтаксисами.
Словники мікророзмітки
Для «спілкування» з браузером створено безліч словників. Але є 2 найпопулярніші. Розбираймося.
1. Schema.org
Це найпопулярніший і найпоширеніший словник мікророзмітки.
На це є причини:
- постійно розширюється, оновлюється та вдосконалюється
- його розуміють усі відомі пошукові системи: Google, Yahoo, Microsoft.
Над поліпшенням словника постійно працює керівна команда — вебмайстри, представники найпопулярніших браузерів. Вони проводять публічні обговорення всіх змін, розширень і доповнень.
Словник складається з 823 типів (їх ще називають сутностями) і 1529 властивостей цих типів.
Ось деякі приклади (ліворуч — сутність, праворуч — властивості):
- Product (товари) — назва товару, рейтинг, ціна, опис.
- Event (подія) — тема, розташування, тривалість, хто виступає.
- Recipe (рецепти) — калорійність, інгредієнти, інструкція, час приготування.
- Movie (фільми) — актори, режисер, жанр, країна, рейтинг.
- Organization (організація) — адреса, засновник, телефон, логотип.
2. Open Graph
Спершу словник придумали для Facebook, але потім його підхопили Twitter, LinkedIn та інші. Це метатеги, які потрібно впровадити в код вебсайту, щоб під час постингу в соціальних мережах прев’ю ресурсу виглядало естетично й чітко передавало суть контенту. Використання мікророзмітки Open Graph робить посилання зрозумілими та розширеними. Вони міститимуть картинку, заголовок і чіткий опис.
Ось основні теги:
og:url — посилання на джерело;
og:type — тип контенту: кіно «movie», стаття «article»…
og:title — заголовок репосту;
og:description — опис;
og:image — зображення;
Синтаксис мікророзмітки
Синтаксис — це спосіб використовувати словник. Він визначає, за допомогою яких тегів і як саме вказують типи та їхні властивості. Простіше кажучи, синтаксис показує, як поєднувати між собою різні теги та атрибути, щоб браузер їх розумів. В одному синтаксисі можна комбінувати різні словники.
Зараз є три основні синтаксиси:
1. Microdata (або мікродані)
Цей синтаксис часто використовують разом зі словником Schema.org. Для Microdata беруть HTML-код, у який упроваджують додаткові атрибути.
3 основні атрибути мікроданих:
1. itemscope — спочатку вказуємо об’єкт, який будемо використовувати. У відкривальному тегу розміщуємо слово «itemscope», так пошуковик розумітиме, що елемент, який міститься в тегу, має додаткову інформацію про свій статус;
2. itemtype — вказуємо тип об’єкта (або сутність), який будемо розмічати. Наприклад, «Товар».
3. itemprop — властивості цього об’єкта. Наприклад, назва, опис, ціна та валюта.
Як це виглядає в коді:
<div itemscope itemtype="https://schema.org/Product"> — вказали тип
<div itemprop="name">назва товару</div> — властивість «Назва»
<div itemprop="description">текст опису</div> — властивість «Опис»
<div itemprop="price">500</div> — властивість «Ціна»
<div itemprop="priceCurrency" content="UAH">грн</div> — властивість «Валюта»
</div>2. RDFa
Дані теж розміщуються в HTML-коді. Цей синтаксис складний у реалізації, тому його використовують дуже рідко. Найчастіше — зі словником Open Graph.
3. JSON-LD
Наймолодший із трьох, але дуже актуальний синтаксис, який рекомендує Google. Він простіший, зрозуміліший і компактніший за попередні.
2 способи додати мікророзмітку на сайт
Як ми говорили вище, розмітити сторінку можна вручну в HTML-коді. Для цього треба чітко розуміти особливості різних синтаксисів: де, з чим і коли їх застосовувати. Найменша помилка може негативно вплинути на всю мікророзмітку сайту. Краще звернутися по допомогу до вебстудії, де досвідчені програмісти зроблять усе правильно. Технічно це та сама робота, що й решта коду сторінки, тому мікророзмітку зазвичай закладають одразу — це частина того, що охоплює верстка сайту, а не окрема доробка після запуску.
Є спосіб простіший — за допомогою онлайн-генераторів. Там треба вставити потрібну інформацію у конкретні поля. З генераторами працювати дуже просто: завдяки численним підказкам легко орієнтуватися в інтерфейсі.
Онлайн-генератори для синтаксису Microdata:
- The Ultimate Microdata Generator,
- Schema Markup Generator,
- Local Business Schema Generator.
Генератори для JSON-LD:
- JSON-LD Schema Generator For SEO – Joe Hall,
- Schema Markup Generator (JSON-LD).
Як перевірити мікророзмітку на сайті
За допомогою валідатора Google (інструмент «Перевірка розширених результатів»). У відведене поле вставляєте URL-адресу або частину коду, який хочете перевірити. У звіті ви побачите перелік помилок, які треба виправити. Google дуже ретельно перевіряє мікророзмітку, тому помічає навіть найменші помилки.
Валідатор Schema.org (validator.schema.org) працює подібним чином і перевіряє розмітку ширше — не лише ті типи, які Google використовує для розширених результатів. Після тесту помилки підсвічуються в коді червоним кольором і з’являється додатковий текст, що вказує на неточності.
Отже, SEO-мікророзмітка — хороший спосіб підвищити клікабельність посилання та прибуток сайту. Завдяки мікророзмітці у видачі ваш сайт виглядає гарно й користувачі звертають на нього увагу, а пошукові машини краще розуміють ваш контент. Це означає, що семантична розмітка сприяє просуванню сайту, хоча її й немає у списку факторів ранжування.