Укр
Рус
Українська мова
Русский язык
SEO

Мікророзмітки для сайту, і що про неї треба знати

Що таке мікророзмітка, навіщо вона потрібна, які види бувають.
25 січня 2021
0
16 хв
logo

Бажаєш заробляти більше? Пройди курс Комплексний інтернет-маркетинг від команди tripmydream та опануй професію за 3 місяці!

    Зміст

Що таке мікророзмітка?

Мікророзмітки — це спеціальна семантична розмітка для структурування деяких типів даних контенту, яка потрібна для того, щоб допомогти ботам пошукових систем точніше розібратися, які з даних представлені на сторінці сайту. На підставі цих даних можуть формуватися (а можуть і не формуватися, але про це далі) розширені сніппети в пошуковій видачі.

Мікророзмітку розуміють всі пошукові системи.

У 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. Але незміцнілий розум новачка може там просто загубитися і втратити будь-який інтерес до впровадження розмітки на сайт.

Тому в першу чергу рекомендуємо подивитися:

  1. Центр Google Пошуку - тут досить багато довідкової інформації з інструкціями, прикладами оформлення коду в різному синтаксисі та скріншоти, як різні типи даних виглядають в пошуковій видачі.
  2. Яндекс.Вебмайстер - аналогічна довідкова бібліотека, тільки від Яндекс.

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">

Більше можна подивитися на офіційному сайті ogp.me, є версія російською мовою ruogp.me.

Для перевірки працездатності мікророзмітки можна використовувати Facebook Object Debugger.

Мікроформати

А ось особливість мікроформатів полягає в тому, що тут об'єднаний і словник і синтаксис. При використанні мікроформатів до вже існуючої 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://tripmydream.academy/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://tripmydream.academy/blog"
           href="https://tripmydream.academy/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, там дуже багато всього цікавого.

Впровадження мікророзмітки

В мікророзмітки добре те, що немає необхідності заучувати словники і синтаксис як якусь окрему мову програмування. Головне запам'ятати які основні види даних взагалі можна розмічати, моніторити, а чи не стали підтримуватися пошуковими системами якісь нові види. А вже при практичній роботі з сайтом думати, які з них можуть принести вам користь.

А вже що і як писати, можна підглянути в численних прикладах в кабінетах вебмайстрів Гугл і Яндекс, на просторах інтернету і навіть в онлайн-генераторах мікророзмітки, як Schema Markup Generator (JSON-LD) або візуальному генераторі Мастер розмітки структурованих даних. Ви можете зробити це самі або доручити програмісту через елементарне ТЗ з усіма корисними для нього посиланнями на інструкції, прикладами того, що ви хочете і інструментом для перевірки підсумкової мікророзмітки. Так ви заощадите час і собі і йому.

Маркер від Google Search Console

У старій версії веб-майстра Google є чудовий інструмент - Маркер, який допоможе налаштувати мікророзмітку для пошукової видачі Гугл без звернення до програміста і навіть без впровадження розмітки в код вашого сайту. Один істотний мінус - тут є всього 9 типів мікророзмітки:

  1. Заходи
  2. Місцеві організації
  3. Огляди книг
  4. Програми
  5. Продукти (Товари)
  6. Ресторани
  7. Статті
  8. Телесеріали
  9. Фільми

Тут в візуальному режимі з дуже зрозумілим інтерфейсом можна розмітити дані на сторінках вашого сайту. Причому можна обробити за один підхід не тільки одну сторінку сайту, але і всі схожі сторінки розділу, наприклад. Інструмент, звичайно, не такий же надійний як впроваджена в код мікророзмітка, але цілком може задовольнити потреби невеликого сайту або як тимчасовий захід, поки ви ще не звернулися до програміста.

Поради

  • Що саме ви хочете бачити в результатах пошуку?
    В першу чергу визначитеся, які саме розширені результати ви хочете бачити в сніппеті вашого сайту і впроваджуйте саме їх. Якщо розмічати всі можливі варіанти, то пошуковик, найімовірніше, вибере сам, що саме буде показано, і є велика ймовірність, що це буде не той, результат, який ви би хотіли отримати.
  • А що якщо користувач навіть не зайде на сайт?
    Зважте ймовірність того, що розширений результат може вже відразу в пошуковій видачі дати готову відповідь користувачеві, вирішити його проблему ще до того як він зайде на ваш сайт. Чи допоможе це вашому бізнесу?
  • Але ж можна і під фільтр потрапити!
    За спам в мікророзмітці можна потрапити під фільтр і позбутися відразу всіх розширених результатів. Це може статися, якщо ви невірно, і, швидше за все, зловмисно, виберете тип мікророзмітки, що не відповідає вашому контенту, наприклад, букети квітів будете розмічати як рецепти приготування страв, тому що вони у видачі красивіше виглядають.

Перевірка мікророзмітки

Після впровадження мікророзмітки обов'язково перевірте її працездатність. Для цього є такі інструменти, як:

Нагадуємо, що як і багато інших операцій, додавання мікророзмітки на сайт ще не гарантія того, що в пошуковій видачі в вашому сніппеті з'являться розширені результати, але це значно підвищує ймовірність!

Пошукова система ще повинна буде переіндексувати сторінки сайту, перш ніж ви побачите якісь зміни у видачі, на це потрібен час.

Відстеження результатів

Мікророзмітка безпосередньо не впливає на позицію сайту в пошуковій системі, але впливає на залучення уваги користувача саме до вашого сніппету і може підвищити кількість кліків по ньому - CTR. Так що при колишній позиції і колишній кількості переглядів ви отримаєте більше трафіку на сайт. А значне підвищення CTR може і підняти сайт і на більш високі позиції.

Так ось, після переіндексації сайту пошуковими системами ви:

  1. Просто візуально можете відстежувати, чи з'явилися розширені результати у видачі.
  2. Можете заміряти і порівнювати показники CTR з попереднім періодом, до впровадження мікророзмітки (ці дані можна подивитися в кабінетах вебмайстрів пошукових систем).
  3. У Google Search Console можна подивитися статистику ефективності розширених результатів в звіті Ефективність / Вид в пошуку.
  4. Також в кабінетах збираються дані про працездатність таких поліпшень. Якщо в якихось типах даних щось зламається, ви про це дізнаєтеся.
Сподобалась стаття?
😍
3
😂
😄
3
😐
🤔
😩
1
Розповісти друзям: