Koval Web
Production

Що таке мікророзмітка сайту, основні визначення та способи використання

Час читання 8 хв
Читaти статтю

Мікророзмітка сайту (або семантична розмітка) – це розмітка вебсайту спеціальними тегами та атрибутами в 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-мікророзмітка це хороший спосіб підвищити клікабельність посилання і як наслідок, прибуток з сайту. Завдяки мікророзмітці, у видачі, ваш сайт виглядає красиво і користувачі звертають на нього увагу, а пошукові машини краще розуміють його контент. Це означає, що семантична розмітка сприяє просуванню сайту, хоча її немає в списку факторів ранжирування.