Мікророзмітка сайту (або семантична розмітка) – це розмітка вебсайту спеціальними тегами та атрибутами в HTML-коді, для структурування інформації.
Атрибути – це слова, що визначають характеристики елемента і розміщуються всередині відкритого тега цього елемента.
Вона потрібна з двох причин:
По-перше, пояснити браузеру який контент на сайті: де ціна, контакти, відгуки, інформація про організацію та ін. Це використання зрозумілих вебоглядачеві «слів», які пояснюють йому зміст сайту. Так пошуковий робот зможе більш просто і швидко зрозуміти дані. А це значить, що користувачі отримають релевантну інформацію, а власник сайту – лояльних і цільових відвідувачів.
По-друге, використання мікророзмітки зручно користувачеві. У пошуковій видачі, крім посилання, ми бачимо фрагмент контенту — сніпет. З його допомогою можна коротко і точно передати основний вміст сайту. І якщо сніпет привабливий для користувача, це підвищує клікабельність посилання.
І так, безпосередньо мікророзмітка не впливає на ранжування сайту. Але пошукові системи реагують на поведінкові фактори, а клікабельність дуже важливий показник зацікавленості користувачів. Тому структурні дані вебсторінки, хороший бонус для SEO-просування.
Наприклад, сніпет сайту з фільмами, де використовували мікророзмітку, містить рейтинг, кількість голосів, акторський склад, режисера, рік, жанр. Таке оформлення більше подобається користувачам, ніж звичайний текст під посиланням тому, що містить чітку і потрібну йому інформацію. Ви можете самі вибрати яку інформацію розміщувати в сніпеті.
Щоб повністю зрозуміти, що таке мікророзмітка сайту, важливо знати з чого вона складається. Мікророзмітка — це доповнення HTML-коду. Вона складається з конкретних тегів і атрибутів, які містяться в словнику. Як впровадити ці елементи в код, визначає синтаксис. Одна і та ж розмітка може бити написана різними синтаксисами.
Словники мікророзмітки
Для «спілкування» з браузером створено безліч словників. Але є 2 найпопулярніших.
1. Schema.org
Цей найпопулярніший і найпоширеніший словник мікророзмітки.
На це є причини:
- постійно розширюється, оновлюється і вдосконалюється
- його розуміють всі знамениті пошукові системи: Google, Yahoo, Yandex, Microsoft.
Над поліпшенням словника постійно працює команда, що складається з вебмайстрів, які представляють найпопулярніші вебоглядачі. Вони проводять публічні обговорення всіх змін, розширень і доповнень.
Словник складається з 779 типів (їх ще називають сутностями) і 1390 властивостей цих типів.
Ось деякі їх приклади (зліва — сутність, праворуч — властивості)
- Product (товари) — назва товару, рейтинг, ціна, опис.
- Event (подія) — тема, місце розташування, тривалість, хто виступає.
- Recipe (рецепти) — калорійність, інгредієнти, інструкція, час приготування
- Movie (фільми) — актори, режисер, жанр, країна, рейтинг.
- Organization (організація) — адреса, засновник, телефон, логотип.
2. Open Graph
Спочатку словник був створений для Facebook, але потім був підхоплений Twitter, ВКонтакті та ін. Це метатеги, які потрібно впровадити в код вебсайту, щоб при постингу в соціальні мережі, превью на ресурс, виглядало естетично і чітко передавало суть контенту. Використання мікророзмітки 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 = “http://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. Він простіший, зрозуміліший і компактніший за попередні.
Яндекс поки не розуміє JSON-LD (тільки Яндекс.Пошта).
2 способи додати мікророзмітку на сайт
Як ми говорили вище, розмітити сторінку можна в ручну в HTML-коді. Для цього потрібно чітко розуміти особливості різних синтаксисів, де, з чим і коли їх застосовувати. Найменша помилка, може негативно вплинути на всю мікророзмітку сайту. Краще за допомогою звернутися у вебстудію, де досвідчені SEO-фахівці або програмісти, зроблять все правильно.
Є простіший спосіб, за допомогою онлайн-генераторів. Там потрібно в конкретні поля вставити потрібну інформацію. З генераторами працювати дуже просто, за допомогою безлічі підказок, можна легко орієнтуватися в інтерфейсі.
Онлайн-генератори для синтаксису 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 (Перевірка розширених результатів в Google Search Console). У відведене поле вставляєте URL-адресу або частину коду, який хочете перевірити. У звіті вам видасть перелік помилок, які потрібно виправити. Гугл дуже ретельно перевіряє мікророзмітку, тому помічає навіть найменші помилки.
Валідатор в Яндекс.Вебмайстер працює подібним чином. Після тесту, помилки будуть підсвічуватися в коді червоним кольором і з’явиться додатковий текст, який вказує на неточності.
І так, SEO-мікророзмітка це хороший спосіб підвищити клікабельність посилання і як наслідок, прибуток з сайту. Завдяки мікророзмітці, у видачі, ваш сайт виглядає красиво і користувачі звертають на нього увагу, а пошукові машини краще розуміють його контент. Це означає, що семантична розмітка сприяє просуванню сайту, хоча її немає в списку факторів ранжирування.
