Відкрийте свої дані ботам з допомогою мікроданих

31

Від автора: микроданные – ще одна технологія, швидко набирає популярність і підтримку. Однак на відміну від WAI-ARIA, чисто технічно, микроданные є частиною HTML5. Незважаючи на ранню стадію розроблення, про специфікації мікроданих варто згадати, так як ця технологія дозволяє заглянути в можливе майбутнє семантики і читабельності документів.

У специфікації микроданные визначаються, як механізм, який «дозволяє вставляти дані, що зчитуються машинами, простий для письма формі за допомогою недвозначною моделі парсинга».

З допомогою мікроданих автори сторінок можуть додавати певні лейбли до HTML елементів, коментуючи їх для машин і роботів. Робиться це за допомогою інструментів настроюваного словника. Наприклад, необхідно, щоб скрипт або інший сторонній сервіс мав доступ до ваших сторінок і взаємодіяв з заданими елементами певним чином. Микроданные дозволяють розширити існуючі семантичні елементи (article і figure), що дозволить цих сервісів отримати спеціальний доступ до контенту коментарів.

Звучить складно, давайте розглянемо реальний приклад. Скажімо, у вас є сайт з рецензіями на фільми. Кожна рецензія розташована в тезі article, а також є набір зірок або проценти, що показують рейтинг рецензії. Але коли машина проходиться по сторінці, наприклад, пошуковий робот Google, вона не знає, де саме розташована сама рецензія. Робот бачить лише купу тексту.

Навіщо машині знати, що ви думаєте про фільм? Потрібно розповісти про те, що Google почали показувати спеціальні картки в пошуковій видачі з більш докладними відповідями. Зроблено це для того, щоб користувачі отримували більш розгорнуті відповіді на свої запити. Робот зчитує рецензію, закодовану на сторінках з допомогою мікроданих або інших схожих технологій. Приклад відгуку на фільм показаний нижче.

Рандомизация SVG форм

З допомогою мікроданих можна точно вказати, в якій частині сторінки знаходиться рецензія, люди, події і т. д. Все в загальному словнику, зрозумілою додатками, які можуть його використовувати.

Хіба, HTML5 не вистачає семантики?

У специфікації HTML5 на даний момент є ряд нових елементів, які роблять розмітку більш виразною. Однак контрпродуктивно додавати елементи в HTML5, які будуть використовуватися лише жменькою людей. Це засмічує мову і ускладнює роботу з його функціями у всіх напрямках, чи то автори специфікації, розробники браузерів або органи по стандартизації.

Микроданные ж дозволяють розробникам задіяти кастомні словники (існуючі або свої) під певні ситуації, з допомогою яких можна робити те, що неможливо з допомогою семантичних HTML5 елементів. Таким чином, існуючі HTML елементи і нові теги HTML5 зберігаються, як основа. Розробники в доповнення можуть створити певні анотації під свої потреби.

Синтаксис мікроданих

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

Простий приклад:

John Doe

John Doe</p>

Author’s website

У прикладі вище наведене звичайне опис автора в тезі aside. Перша дивина, яку можна помітити – Булев атрибут itemscope. Атрибут робить тег aside контейнером для нашого словника мікроданих. Наявність атрибута itemscope задає, як зазначено в специфікації, елемент. Кожен елемент характеризується групою пар ім’я-значення.

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

Поняття пар ім’я-значення

Ім’я – це властивість, яка задається через атрибут itemprop. У нашому прикладі першим ім’ям властивості name. В рамках цього словника є ще два імені властивостей: photo і url.

Значення властивостей визначаються по-різному, все залежить від того, на якому властивості оголошені микроданные. У більшості елементів значення береться з текстового контенту. Наприклад, властивість name з нашого прикладу бере своє значення з тексту між відкриваючим і закриваючим тегом h1. З іншими елементами принцип може відрізнятися.

Властивість photo отримує значення атрибуту src зображення. Тобто значення є ДО ом на фото автора. Властивість url хоча і вказали на елементі з текстовим контентом (а саме фраза «author’s website»), але бере значення атрибута href.

Серед інших елементів, які не використовують текстовий контент для визначення значення мікроданих можна виділити meta, iframe, object, audio link і time. Повний список таких елементів шукайте в розділі значень у специфікації мікроданих.

Простору імен в мікроданих

Досі ми говорили про мікроданих, які можна повторно використовувати, але це трохи непрактично. Реальна міць мікроданих розкривається, коли, як ми вже говорили, скрипти і сторонні автори можуть отримати доступ до нашим парам ім’я-значення і можуть мати з них користь.

Для цього кожен елемент повинен визначати тип за допомогою атрибута itemtype. Не забувайте, що в контексті мікроданих саме на елементі задається атрибут itemscope. Всі елементи і пари імʼя-значення всередині елемента є частиною елемента. Тому значення атрибута itemtype визначає простір імен словника елемента. Давайте додамо itemtype в наш приклад:

John Doe

John Doe

Author’s website

Ми використовуємо URL «http://schema.org/Person» у нашому елементі, який веде на сайт Schema.org, спільний проект, підтримуваний кількома великими пошуковими системами. На сайті можна знайти безліч словників за микроданным, в тому числі по організаціям, людям, оглядам, подій і т. д.

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