Мікророзмітки — це спеціальна семантична розмітка для структурування деяких типів даних контенту, яка потрібна для того, щоб допомогти ботам пошукових систем точніше розібратися, які з даних представлені на сторінці сайту. На підставі цих даних можуть формуватися (а можуть і не формуватися, але про це далі) розширені сніппети в пошуковій видачі.
Мікророзмітку розуміють всі пошукові системи.
У 2005 році почав набирати популярності спосіб семантичної розмітки Мікроформати (microformats).
А 2011 році найбільші пошукові системи: Google, Yahoo! і Microsoft ініціювали розробку єдиної схеми для семантичної розмітки в HTML5 - Schema.org. Трохи до них пізніше приєднався і Яндекс.
Зараз пошукові системи вже самі можуть визначити деякі типи даних на сторінці, навіть якщо на ній і не була впроваджена мікророзмітка. До того ж, як і більшість подібних «фіч», наявність мікророзмітки на сайті ще не гарантія того, що пошукові системи її будуть використовувати для формування вашого сніппета. Ви лише допомагаєте пошукачам розібратися швидше і краще, а вони вже самі вирішують, що і в якому вигляді показувати у видачі.
Мікророзмітка складається зі словника і синтаксису. У словнику описані класи і властивості даних. А в синтаксисі - набір правил, які за допомогою тегів і атрибутів допомагають реалізувати цей словник.
З часів зародження ідеї семантичної розмітки даних використовувалися різні словники і синтаксиси. У статті ми розглянемо тільки найпопулярніші з них.
На практиці вам найчастіше прийдетеся стикатися зі словником Schema.org, який впливає на пошукову видачу і Open Graph, який впливає на вигляд репоста в соціальній мережі Facebook.
Дану мікророзмітки розуміють всі пошукові системи. Ще 2011 році Google, Yahoo! і Microsoft, а трохи пізніше і Яндекс, ініціювали розробку Schema.org - єдиної схеми для семантичної розмітки в HTML5.
Ще один плюс, словник постійно доповнюється. Так наприклад в 2019 році з'явилися нові типи мікророзмітки: FAQ (найчастіше запитувані питання), Q&A (питання-відповідь, як на форумах, наприклад), HowTo (для інструкцій).
Повна документація викладена на сайті schema.org. Але незміцнілий розум новачка може там просто загубитися і втратити будь-який інтерес до впровадження розмітки на сайт.
Тому в першу чергу рекомендуємо подивитися:
А цей словник став актуальним в епоху шеринга сторінок сайтів в Facebook, але зараз також підтримується і в Telegram, Viber, Slack, ВКонтакте, LinkedIn, Skype і багатьох інших. Вирішує проблеми з відображенням посилання, картинки, назви і опису сторінки сайту для того щоб, пост виглядав більш привабливо.
Стандартний набір тегів:
Приклад:
<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">
Більше можна подивитися на офіційному сайті ogp.me, є версія російською мовою ruogp.me.
Для перевірки працездатності мікророзмітки можна використовувати Facebook Object Debugger.
А ось особливість мікроформатів полягає в тому, що тут об'єднаний і словник і синтаксис. При використанні мікроформатів до вже існуючої html розмітки додаються параметри тегів.
Але її ж мінус в тому, що цей синтаксис не універсальний. Яндекс розуміє тільки кілька мікроформатів, а гугл трохи більше. Так на нашу індивідуальну думку, простіше використовувати Schema.org.
Офіційний сайт: microformats.org.
Одні з найвідоміших мікроформатів:
Для того, щоб впровадити мікророзмітку на сайт знадобитися вибрати синтаксис, за допомогою якого і потрібно буде реалізовувати словник.
Найсвіжіший формат, з'явився в 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".
Синтаксис почав використовуватися в HTML-5. Завдяки йому пошуковики почали краще розуміти контент і стали з'являтися ті самі приємні для ока розширені дані в пошуковій видачі. Відповідно до цього синтаксису розмітка прописується в HTML-коді сторінки. Причому впроваджується вона в видиму частину сторінки.
Використовується кілька основоположних атрибутів: itemscope, itemtype і itemprop, через які вказуються і описуються сутності в HTML-коді.
Наприклад, мікророзмітки «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>
Розмітка також відбувається в HTML-коді. Реалізація складніша, ніж в попередніх варіантах. Синтаксис RDFa найчастіше використовують зі словником Open Graph для формування красивого сніппета в соціальних мережах. Приклад такого коду ми вже давали в описі до Open Graph.
Саме в цьому розділі статті буде та, інформація, яку краще запам'ятати!
Найголовніші типи мікророзмітки для розширених результатів пошуку:
Детальний опис з скрінами і прикладами коду в різному синтаксисі можна подивитися в Центрі Google Пошуку і Яндекс.Вебмайстрі.
Є набагато більше даних, які можна розмітити, але далеко не всі з них можуть бути використані в розширених результатах пошукової видачі. Щоб дізнатися більше, вивчіть schema.org, там дуже багато всього цікавого.
В мікророзмітки добре те, що немає необхідності заучувати словники і синтаксис як якусь окрему мову програмування. Головне запам'ятати які основні види даних взагалі можна розмічати, моніторити, а чи не стали підтримуватися пошуковими системами якісь нові види. А вже при практичній роботі з сайтом думати, які з них можуть принести вам користь.
А вже що і як писати, можна підглянути в численних прикладах в кабінетах вебмайстрів Гугл і Яндекс, на просторах інтернету і навіть в онлайн-генераторах мікророзмітки, як Schema Markup Generator (JSON-LD) або візуальному генераторі Мастер розмітки структурованих даних. Ви можете зробити це самі або доручити програмісту через елементарне ТЗ з усіма корисними для нього посиланнями на інструкції, прикладами того, що ви хочете і інструментом для перевірки підсумкової мікророзмітки. Так ви заощадите час і собі і йому.
У старій версії веб-майстра Google є чудовий інструмент - Маркер, який допоможе налаштувати мікророзмітку для пошукової видачі Гугл без звернення до програміста і навіть без впровадження розмітки в код вашого сайту. Один істотний мінус - тут є всього 9 типів мікророзмітки:
Тут в візуальному режимі з дуже зрозумілим інтерфейсом можна розмітити дані на сторінках вашого сайту. Причому можна обробити за один підхід не тільки одну сторінку сайту, але і всі схожі сторінки розділу, наприклад. Інструмент, звичайно, не такий же надійний як впроваджена в код мікророзмітка, але цілком може задовольнити потреби невеликого сайту або як тимчасовий захід, поки ви ще не звернулися до програміста.
Після впровадження мікророзмітки обов'язково перевірте її працездатність. Для цього є такі інструменти, як:
Нагадуємо, що як і багато інших операцій, додавання мікророзмітки на сайт ще не гарантія того, що в пошуковій видачі в вашому сніппеті з'являться розширені результати, але це значно підвищує ймовірність!
Пошукова система ще повинна буде переіндексувати сторінки сайту, перш ніж ви побачите якісь зміни у видачі, на це потрібен час.
Мікророзмітка безпосередньо не впливає на позицію сайту в пошуковій системі, але впливає на залучення уваги користувача саме до вашого сніппету і може підвищити кількість кліків по ньому - CTR. Так що при колишній позиції і колишній кількості переглядів ви отримаєте більше трафіку на сайт. А значне підвищення CTR може і підняти сайт і на більш високі позиції.
Так ось, після переіндексації сайту пошуковими системами ви: