Коротка інформація про розмітку структурованих даних

Термін «структуровані дані» позначає інформацію, яка відформатована загальноприйнятим способом. Великі пошукові системи, такі як Google і Bing, використовують структуровані дані (які реалізовані на сторінках сайту) для відбору результатів в пошуку та поліпшення показу цих результатів. Все це покликане полегшити користувачам пошук потрібної інформації.

 

 

Навіщо потрібні структуровані дані?

Сторінки сайту містять певну інформацію, яка зрозуміла користувачам, коли вони її читають. З іншого боку, пошукові системи мають дещо обмежене розуміння контенту веб-сторінки. Припустимо, наприклад, що у вас на сайті є сторінка про мустанг. Пошукова система могла просканувати сторінку, але не обов’язково зрозуміла точне значення слова «мустанг». Мустанг – це може бути і тварина (здичавілий домашній кінь), або ж це може бути марка автомобіля.

Таке нерозуміння ускладнює процес відображення релевантних результатів пошуку користувачу для пошукових систем. Люди можуть розуміти значення слова з контексту сторінки, але пошукові системи зазнають труднощів з цим (хоча з кожним роком вони стають все розумнішими і розумнішими).

З використанням структурованих даних ви можете допомогти пошуковим системам зрозуміти ваш контент і відобразити його корисним, відповідним чином.

 

 

Як використовуються структуровані дані?

Структуровані дані мають одну важливу перевагу: описовість. Інформація, яка зберігається в структурованих даних, може використовуватися пошуковими системами для генерації розширених фрагментів (rich snippets). Розширені фрагменти надають користувачеві більш детальну інформацію, яка співвідноситься з їх пошуковими запитами.

Ймовірно, ви стикалися з прикладами розширених фрагментів. Коли ви шукаєте щось в Інтернеті, пошукова система може показувати особливі картки з інформацією про фільми, події, новини, кулінарні рецепти і т.д. Ці картки були створені завдяки мікроданим. Мікророзмітка сторінки може використовуватися для надання пошуковим системам додаткової інформації про веб-сторінку.

Ці розширені фрагменти в результатах пошуку виглядають трохи інакше від других результатів, що часто призводить до підвищення CTR (іноді до 30%). Звучить непогано, так?

 

 

Типи структурованих даних

Існує чотири типи розмітки структурованих даних:

• JSON-LD
• Microdata
• Microformats
• RFDa

 

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

 

 

JSON-LD

Це найбільш сучасний варіант. Дані, які відносяться до цього формату, вбудовуються в тег <script> в заголовку (head) або тілі (body) сторінки. Розмітка розміщується окремо від тексту, який видимий для користувача. Пошукові системи можуть зчитувати дані в форматі JSON-LD, які додані на сторінку динамічно, наприклад через код JavaScript або віджети в CMS (системи управління контентом). Цей формат рекомендується пошуковиком Google.

Приклад коду мікророзмітки даних в форматі JSON-LD:

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "Organization",
 "url": "https://sebweo.com",
 "name": "SebWeo Corp.",
 "contactPoint": {
  "@type": "ContactPoint",
  "telephone": "012-345-6789",
  "contactType": "Customer support"
 }
}
</script>

 

 

Microdata (мікродані)

Мікродані – це, ймовірно, найпопулярніший тип структурованих даних, в основному завдяки сайту Schema.org, який був створений з ініціативи найбільших пошукових систем (Google, Bing і Yahoo).

Розмітка мікроданих складається з трьох елементів: itemscope, itemtype та itemprops. Атрибут itemscope містить інформацію про елемент. Додаючи itemscope в код HTML, ви вказуєте, що контент в обраному вами елементі співвідноситься з певною позицією.

<div itemscope>
  Концерт «Океан Ельзи»
</div>

 

Додайте елемент itemtype для визначення типу вмісту. Використовуйте цей атрибут відразу після itemscope.

<div itemscope itemtype="http://schema.org/Event">
  Концерт «Океан Ельзи»
</div>

 

У цьому прикладі itemscope повідомляє пошуковим системам, що елемент, що міститься в тезі div, фактично є подією (тип Event). Itemtype завжди додаються в якості URL-адреси. На сайті Schema.org ви знайдете повний список усіх типів вмісту.

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

Якщо ми хочемо визначити місце розташування концерту «Океан Ельзи», ми просто додаємо itemprop="location" до елементу, який містить назву місця розташування.

<div itemscope itemtype="http://schema.org/Event">
  <span itemprop="name">Концерт «Океан Ельзи»</span>.
  Концерт відбудеться на стадіоні <span itemprop="location">Олімпійський</span>.
</div>

 

Іноді може знадобитися додати додаткові елементи, щоб вказати деталі itemprop. Для цього ми використовуємо теги <span>, тому що вони найменше впливають на те, як інлайновий текст інтерпретується браузером.

 

 

Дата та час

Дата і час можуть важко визначатися. Наприклад, дата 10/11/18, чи означає вона 11 жовтня 2018 року? Або 10 листопада 2018 року? Незрозуміло, чи не так? У пошукових систем така ж проблема.

Щоб надати пошуковим роботам правильний час і дату, нам потрібно додати атрибут 'datetime'. Цей атрибут визначає дату з використанням формату YYYY-MM-DD (рік-місяць-дата).

<time datetime="2019-11-10">10/11/19</time>

Вищевказаний код означає 10 листопада 2019 року.

 

Атрибут datetime також може використовуватися для вказівки часу. Для часу використовується префікс з буквою T.

<time datetime="2019-05-25T21:30">25 травня, 21:30</time>

 

У наведеному вище коді відображається наступна дата і час: 25 травня 2019 року, 21.30. Якщо ми з’єднаємо все разом, ми отримаємо щось на зразок цього:

<div itemscope itemtype="http://schema.org/Event">
  <span itemprop="name">Концерт «Океан Ельзи»</span>.
  Концерт відбудеться на стадіоні <span itemprop="location">Олімпійський</span>
  <time datetime="2019-05-25T21:30">25 травня, в 21:30</time>.
</div>

 

За допомогою цих простих тегів ми можемо сказати пошуковим системам, що 25 травня 2019 року в 21:30 на стадіоні Олімпійський відбудеться концерт Океан Ельзи. Ми можемо використовувати й інші атрибути для розмітки веб-сторінок про книги, фільми, організації, кулінарні рецепти і т.д.

 

 

Неявна інформація

Інформація не завжди доступна користувачам і пошуковим системам. Деяка інформація може бути вбудована в медіа-об’єкт або не може бути явно вказана на сторінці. В цьому випадку ви можете використовувати метатеги meta для зазначення цієї інформації.

Припустимо, що у нас є відео на сторінці, і ми хочемо, щоб тривалість відео з’являлася у вигляді розширеного фрагмента. Оскільки тривалість відео не надається у вигляді тексту на сторінці, ми повинні використовувати метатег, щоб додати цю інформацію. Наприклад, так:

<meta itemprop="Duration" content="T5M25S" />

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

 

 

Microformats (мікроформати)

Мікроформати розширюють звичайні HTML-теги семантичною інформацією. Щоб додати структуровані дані на веб-сторінку за допомогою мікроформатів, для цього, в основному, використовується атрибут class. Це робить мікроформати, можливо, найпростішим і чистим способом додавання структурованих даних.

Найбільш популярними типами мікроформатів є hCard, hCalendar і hReview. hCard використовується для людей, компаній та організацій. hCalendar може використовуватися для додавання інформації про події. А з hReview ви можете додати відгук про ресторан, книгу, фільм і т.д.

Припустимо, у нас є сторінка про футбольний матч. Перш за все, нам потрібно повідомити пошуковим системам, що ця веб-сторінка присвячена події, посилаючись на hCalendar в <head>. УВАГА! У новій специфікації використовується значення h-event.

<head profile="http://microformats.org/profile/hcalendar">

 

Потім нам потрібно повідомити пошуковим системам, що частина нашої веб-сторінки присвячена події. Для цього ми використовуємо клас vevent.

<div class="vevent">

 

Все, що міститься в нашому тезі <div>, дає пошуковій системі більше інформації про подію (але при необхідності ви також можете використовувати інші теги, такі як <span> або <p>). Якщо ми хочемо додати заголовок для нашої події, ми використовуємо властивість summary. Вона є обов’язковою для події!

<div class="vevent">
  <span class="summary">Динамо – Шахтар</span>
</div>

 

Використовуючи властивість location, ми можемо вказати, де буде відбуватися футбольний матч.

<div class="vevent">
  <span class="summary">Динамо – Шахтар</span>
  на <span class="location">стадіон Олімпійський</span>
</div>

 

За допомогою цього коду ми повідомимо пошуковим системам, що матч між «Динамо» і «Шахтарем» відбудеться на стадіоні Олімпійський. Іншою необхідною властивістю для hCaldendar є dtstart. Ця властивість описує дату і час події.

<div class="vevent">
  <span class="summary">Динамо – Шахтар</span>
  на <span class="location">стадіон Олімпійський</span>
  <time class="dtstart" title="2019-05-25T21:30">25 травня 2019 року в 21:30</time>
</div>

 

Ці теги дають пошуковим системам більше інформації про футбольний матч між «Динамо» і «Шахтарем», — наприклад, про місце проведення турніру і дату/час.

Рекомендуємо вам ознайомитися з вікі-інформацією про мікроформати на сайті Microformats.org.

 

 

RFDa

RFDa використовує ряд властивостей для ідентифікації об’єктів (наприклад, людину або подію). Він використовує теги HTML, такі як <div> і <span>, для опису об’єктів. Більш складні функції RFDa можуть бути важкими для веб-майстрів, які не є експертами в структурованих даних.

RFDa має чотири основних атрибута: voctype, typeof, property та resource.

 

Перший атрибут voctype визначає словник, який ми збираємося використовувати для наших структурованих даних. Завдяки цьому атрибуту пошукові системи знають, де отримати інформацію про ці структуровані дані.

<p >

 
За допомогою цього коду ми вказали, що словник для наших тегів RFDa можна знайти на schema.org (наприклад). Існує кілька інших словників, таких як LOV і Dublin Core. Тепер нам потрібно вказати тип даних. Це інформація про людину, подію, ресторан...? Для цього ми використовуємо атрибут typeof.
 
<p >

 
Пошукові системи знають, що ми говоримо про людину, але вони мало що знають про неї. Додаючи властивості, ми можемо надати їм більше інформації про цю людину.
 
<p >

 
Вищенаведений код говорить нам, що на цій веб-сторінці знаходиться людина на ім'я Іван Іванович. Ми можемо додати унікальний ідентифікатор до цих структурованих даних, щоб ідентифікувати цю людину, додавши атрибут ресурсу (resource).
 
<p >

 
Цей унікальний ідентифікатор корисний, якщо ми хочемо поговорити про Івана Івановича на іншому сайті. Додавши ідентифікатор в кінець URL цієї веб-сторінки (наприклад, https://site.com/peoples#ivan), у нас буде посилання на всю інформацію про Івана Івановича.
 
Для отримання додаткової інформації про реалізацію RFDa ознайомтеся з документацією RDFa на w3.org.
 
 
 
 
 
Тестування розмітки структурованих даних
 
Ви витратили багато годин, щоб додати структуровані дані на свій сайт. Але звідки ви будете знати, що зробили це правильно? У цьому вам допоможе Google Structured Data Testing Tool. Цей онлайн-інструмент перевіряє сторінку за URL-адресою або фрагменту HTML коду на відповідність вимогам розмітки структурованих даних. Це дозволить дати вам уявлення про те, як сторінка буде відображатися в результатах пошуку.
 
 
 
 
 
 
 
Короткий підсумок
 
Постійно з'являються нові види розмітки структурованих даних. Це дозволяє пошуковим системам більш ефективно інтерпретувати контент і створювати розширені фрагменти.
 
Використовуючи структуровані дані на своєму сайті, ви підвищуєте свої шанси в результатах пошуку. Сторінки сайту, на яких реалізовані структуровані дані, мають більш високий CTR.
 
Обов'язково поділіться своїми думками про статтю в коментарях нижче.