9.1 Що таке мікророзмітка?
Мікророзмітка (structured data) — це спосіб додавання метаданих до HTML-документів з метою покращення інтерпретації вмісту веб-сторінки пошуковими системами та іншими сервісами. Мікророзмітка використовується для опису різних сутностей і їх взаємозв'язків на веб-сторінці, що допомагає покращити видимість сторінки в результатах пошуку і надає додаткові функції, такі як багаті сніпети.
Мікророзмітка — це структуровані дані, які додаються в HTML-код сторінки. Вона надає пошуковим системам додаткову інформацію про зміст сторінки, такі як тип контенту, автор, дата публікації, рейтинг та інші дані.
Мікророзмітка складається з двох частин: словника — якими термінами описувати сутності, і синтаксису — як фізично записати ці терміни в HTML. Це різні рівні, і плутати їх не варто.
Словник — це Schema.org: загальний набір типів (Article, Product, Event, Organization та інші) і їхніх властивостей. Schema.org заснували Google, Microsoft, Yahoo і Yandex, він розвивається відкритою спільнотою, і його розуміють усі основні пошукові системи.
Синтаксис — це спосіб запису. Один і той самий словник Schema.org можна записати трьома різними способами:
- JSON-LD: дані лежать окремим блоком усередині
<script type="application/ld+json">і не змішуються з версткою. Стандарт W3C; Google рекомендує саме його. - Microdata: атрибути
itemscope,itemtype,itempropдодаються прямо до HTML-елементів. Описаний у HTML Living Standard. - RDFa (RDFa Lite 1.1): атрибути
vocab,typeof,property— теж прямо на HTML-елементах. Рекомендація W3C.
Крім Schema.org існують й інші словники під окремі задачі — наприклад Open Graph (превʼю посилань у соціальних мережах) і microformats2. У цій лекції ми працюємо зі Schema.org.
9.2 Schema.org
Schema.org — це словник типів даних і їх властивостей, розроблений для структурування даних на веб-сторінках. Він підтримує безліч типів даних, таких як статті, події, організації, продукти тощо.
Приклади використання Schema.org
Стаття (Article):
<article>
<h1>Заголовок статті</h1>
<p>Автор: Ім'я автора</p>
<p>Дата публікації: 1 січня 2024 р.</p>
<img src="https://example.com/image.jpg" alt="Приклад зображення">
<p>Текст статті...</p>
</article>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Заголовок статті",
"author": {
"@type": "Person",
"name": "Ім'я автора"
},
"datePublished": "2024-01-01",
"image": "https://example.com/image.jpg",
"publisher": {
"@type": "Organization",
"name": "Видавництво",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/logo.png"
}
}
}
</script>
Продукт (Product):
<body>
<h1>Назва продукту</h1>
<img src="https://example.com/product.jpg" alt="Зображення продукту">
<p>Опис продукту</p>
<p>Ціна: $29.99</p>
</body>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Назва продукту",
"image": "https://example.com/product.jpg",
"description": "Опис продукту",
"sku": "0446310786",
"offers": {
"@type": "Offer",
"priceCurrency": "USD",
"price": "29.99",
"itemCondition": "https://schema.org/NewCondition",
"availability": "https://schema.org/InStock",
"url": "https://example.com/product"
}
}
</script>
Переваги використання Schema.org:
- Покращення видимості: пошукові системи можуть відображати додаткові дані в результатах пошуку (багаті сніпети).
- Покращення інтерпретації: пошукові системи краще розуміють контент, що може покращити ранжування сторінки.
- Підтримка стандартів: Schema.org підтримується всіма основними пошуковими системами.
9.3 JSON-LD
JSON-LD (JavaScript Object Notation for Linked Data) — це метод кодування мікророзмітки у форматі JSON, який вставляється в тег <script> на сторінці. Google рекомендує використовувати JSON-LD для структурованих даних.
Приклад використання JSON-LD
Організація (Organization):
<body>
<h1>Назва компанії</h1>
<p>Опис компанії</p>
<div>Контакти</div>
</body>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Назва компанії",
"url": "https://example.com",
"logo": "https://example.com/logo.png",
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+1-800-555-1212",
"contactType": "Customer Service"
}
}
</script>
9.4 Microdata
Microdata — це синтаксис мікророзмітки, вбудований прямо в HTML. Спеціальні атрибути itemscope, itemtype і itemprop (а також itemid та itemref) додаються до звичайних HTML-елементів і поєднують їх із типами та властивостями зі словника Schema.org.
Приклад використання Microdata
Подія (Event):
<body itemscope itemtype="https://schema.org/Event">
<h1 itemprop="name">Назва події</h1>
<time itemprop="startDate" datetime="2024-05-01T19:00">1 травня 2024 року, 19:00</time>
<div itemprop="location" itemscope itemtype="https://schema.org/Place">
<span itemprop="name">Місце проведення</span>
<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<span itemprop="streetAddress">Вулиця, будинок</span>
<span itemprop="addressLocality">Місто</span>
<span itemprop="postalCode">Поштовий індекс</span>
<span itemprop="addressCountry">Країна</span>
</div>
</div>
</body>
Переваги використання мікророзмітки:
- Багаті сніпети: пошукові системи можуть відображати розширені сніпети в результатах пошуку, що підвищує клікабельність.
- Покращене розуміння контенту: пошукові системи краще розуміють контент, що може покращити ранжування сторінки.
- Підтримка голосового пошуку: структуровані дані можуть покращити результати голосового пошуку.
- Інтеграція з іншими сервісами: мікророзмітка дозволяє інтегрувати контент з різними сервісами, такими як Google Knowledge Graph та іншими.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ