У 2005 році почав набирати популярності спосіб семантичної розмітки Мікроформати (microformats).
А 2011 році найбільші пошукові системи: Google, Yahoo! і Microsoft ініціювали розробку єдиної схеми для семантичної розмітки в HTML5 - Schema.org. Трохи до них пізніше приєднався і Яндекс.
Зараз пошукові системи вже самі можуть визначити деякі типи даних на сторінці, навіть якщо на ній і не була впроваджена мікророзмітка. До того ж, як і більшість подібних «фіч», наявність мікророзмітки на сайті ще не гарантія того, що пошукові системи її будуть використовувати для формування вашого сніппета. Ви лише допомагаєте пошукачам розібратися швидше і краще, а вони вже самі вирішують, що і в якому вигляді показувати у видачі.
Словники та синтаксиси мікророзмітки
Мікророзмітка складається зі словника і синтаксису. У словнику описані класи і властивості даних. А в синтаксисі - набір правил, які за допомогою тегів і атрибутів допомагають реалізувати цей словник.
З часів зародження ідеї семантичної розмітки даних використовувалися різні словники і синтаксиси. У статті ми розглянемо тільки найпопулярніші з них.
Словники
На практиці вам найчастіше прийдетеся стикатися зі словником Schema.org, який впливає на пошукову видачу і Open Graph, який впливає на вигляд репоста в соціальній мережі Facebook.
Schema.org
Дану мікророзмітки розуміють всі пошукові системи. Ще 2011 році Google, Yahoo! і Microsoft, а трохи пізніше і Яндекс, ініціювали розробку Schema.org - єдиної схеми для семантичної розмітки в HTML5.
Ще один плюс, словник постійно доповнюється. Так наприклад в 2019 році з'явилися нові типи мікророзмітки: FAQ (найчастіше запитувані питання), Q&A (питання-відповідь, як на форумах, наприклад), HowTo (для інструкцій).
Повна документація викладена на сайті schema.org. Але незміцнілий розум новачка може там просто загубитися і втратити будь-який інтерес до впровадження розмітки на сайт.
Тому в першу чергу рекомендуємо подивитися:
-
Центр Google Пошуку - тут досить багато довідкової інформації з інструкціями, прикладами оформлення коду в різному синтаксисі та скріншоти, як різні типи даних виглядають в пошуковій видачі.
-
Яндекс.Вебмайстер - аналогічна довідкова бібліотека, тільки від Яндекс.
Open Graph
А цей словник став актуальним в епоху шеринга сторінок сайтів в Facebook, але зараз також підтримується і в Telegram, Viber, Slack, ВКонтакте, LinkedIn, Skype і багатьох інших. Вирішує проблеми з відображенням посилання, картинки, назви і опису сторінки сайту для того щоб, пост виглядав більш привабливо.
Стандартний набір тегів:
- og: locale - вказує мовну версію сторінки.
- og: type - тип сторінки (наприклад, стаття, новина або відео).
- og: title - заголовок статті.
- og: description - короткий опис сторінки.
- og: url - посилання на сторінку сайту.
- og: image - посилання на картинку, яка буде відображатися в пості.
- og: site_name - назва сайту.
Приклад:
<meta property="og:title" content="Как составить контент-план для социальных сетей"/>
<span id="selection-marker-1" class="redactor-selection-marker"></span>
<meta property="og:description" content="Контент-план для социальных сетей: что это такое, как составлять,
примеры ведения и темы для постов Instagram, Facebook и Telegram.">
<meta property="og:type" content="article">
<meta itemprop="image" content="https://cdn.tripmydream.com/travelhub/blog/blog/46/18/block_4618.jpg">
<meta property="article:publisher" content="https://www.facebook.com/TRIPMYDREAMcom">
<meta property="og:site_name" content="tripmydream">
Мікроформати
А ось особливість мікроформатів полягає в тому, що тут об'єднаний і словник і синтаксис. При використанні мікроформатів до вже існуючої html розмітки додаються параметри тегів.
Але її ж мінус в тому, що цей синтаксис не універсальний. Яндекс розуміє тільки кілька мікроформатів, а гугл трохи більше. Так на нашу індивідуальну думку, простіше використовувати Schema.org.
Офіційний сайт: microformats.org.
Одні з найвідоміших мікроформатів:
- hCard - організації і люди;
- hCalendar - події;
- hAtom - стрічки новин (як аналог RSS і Atom) в звичайному HTML або XHTML;
- XFN - соціальні взаємини;
- xFolk - помічені посилання;
- adr - поштові адреси;
- geo - географічні координати;
- hReview - відгуки;
- hProduct - товари;
- hRecipe - кулінарні рецепти.
Синтаксис
Для того, щоб впровадити мікророзмітку на сайт знадобитися вибрати синтаксис, за допомогою якого і потрібно буде реалізовувати словник.
JSON-LD
Найсвіжіший формат, з'явився в 2010 році і вже з 2013-2014 року саме його і рекомендують використовувати Schema.org і Google. Так що швидше за все саме з ним вам і доведеться мати справу.
Основна відмінність JSON-LD від інших, це те, що він впроваджується не в HTML-код сторінки (це ми розглянемо трохи нижче), а в тег <script>. Даний синтаксис являє собою набір пар "ключ": "значення", які навіть людині можна легко зрозуміти, не те що пошуковий бот.
Наприклад розмітка FAQ Page:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": "Текст питання 1",
"acceptedAnswer": {
"@type": "Answer",
"text": "Текст відповіді 1"
}
},{
"@type": "Question",
"name": "Текст питання 2",
"acceptedAnswer": {<span id="selection-marker-1" class="redactor-selection-marker"></span>
"@type": "Answer",
"text": "Текст відповіді 2"
}
}]
}
</script>
В даному випадку видно, що, наприклад, "@context", "@type", "name", "text" - це ключі, а після двокрапки вже йдуть значення - "https://schema.org", "FAQPage", "Текст питання 1" і "Текст відповіді 1".
Microdata
Синтаксис почав використовуватися в HTML-5. Завдяки йому пошуковики почали краще розуміти контент і стали з'являтися ті самі приємні для ока розширені дані в пошуковій видачі. Відповідно до цього синтаксису розмітка прописується в HTML-коді сторінки. Причому впроваджується вона в видиму частину сторінки.
Використовується кілька основоположних атрибутів: itemscope, itemtype і itemprop, через які вказуються і описуються сутності в HTML-коді.
- Itemscope вказує, що в коді розташована сутність;
- Itemtype описує її тип. Itemscope і Itemtype завжди йдуть в парі;
- Itemprop ж описує властивості цієї сутності.
Наприклад, мікророзмітки «breadcrumbs»:
<html>
<head>
<title>Award Winners</title>
</head>
<body>
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemprop="item" href="https://para.school/blog">
<span itemprop="name">Главная</span></a>
<meta itemprop="position" content="1" />
</li>
›
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemscope itemtype="https://schema.org/WebPage"
itemprop="item" itemid="https://para.school/blog"
href="https://para.school/blog">
<span itemprop="name">Академия.Блог</span></a>
<meta itemprop="position" content="2" />
</li>
›
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<span itemprop="name">SEO</span>
<meta itemprop="position" content="3" />
</li>
</ol>
</body>
</html>
RDFa
Розмітка також відбувається в HTML-коді. Реалізація складніша, ніж в попередніх варіантах. Синтаксис RDFa найчастіше використовують зі словником Open Graph для формування красивого сніппета в соціальних мережах. Приклад такого коду ми вже давали в описі до Open Graph.
Основні види структурованих даних
Саме в цьому розділі статті буде та, інформація, яку краще запам'ятати!
Найголовніші типи мікророзмітки для розширених результатів пошуку:
- Товар;
- Рядок навігації, він же "хлібні крихти" або breadcrumbs;
- Стаття, вона ж пост в блозі або новина;
- Відгук;
- Рейтинг;
- Логотип;
- Місцева компанія;
- FAQ - Часті питання;
- Запитання і відповіді;
- Інструкції з покроковим виконанням;
- Рецепт;
- Фільм;
- Відео;
- Подкаст;
- Книга;
- Рядок пошуку по сайту;
- Додаток;
- Навчальні курси;
- Відгуки критиків;
- Подія;
- Перевірка фактів;
- Домашні заняття;
- Ліцензія на зображення;
- Вакансія роботодавця;
- Програма навчання;
- Орієнтовна зарплата;
- Speakable - новинний контент, який може бути озвучений Google Асистентом;
- Платний контент і підписка;
- Карусель - результати з одного сайту, які виводяться у вигляді списку або галереї, використовується в поєднанні з розміткою для Рецептів, Курсів, Ресторанів або Фільмів;
- Великі набори даних / Dataset (сюди дуже багато всього входить, почитайте краще тут).
Детальний опис з скрінами і прикладами коду в різному синтаксисі можна подивитися в Центрі Google Пошуку і Яндекс.Вебмайстрі.
Є набагато більше даних, які можна розмітити, але далеко не всі з них можуть бути використані в розширених результатах пошукової видачі. Щоб дізнатися більше, вивчіть schema.org, там дуже багато всього цікавого.