9.1 Що таке мікророзмітка?
Мікророзмітка (structured data) — це спосіб додавання метаданих до HTML-документів з метою покращення інтерпретації вмісту веб-сторінки пошуковими системами та іншими сервісами. Мікророзмітка використовується для опису різних сутностей і їх взаємозв'язків на веб-сторінці, що допомагає покращити видимість сторінки в результатах пошуку і надає додаткові функції, такі як багаті сніпети.
Мікророзмітка — це структуровані дані, які додаються в HTML-код сторінки. Вона надає пошуковим системам додаткову інформацію про зміст сторінки, такі як тип контенту, автор, дата публікації, рейтинг та інші дані.
Основні типи мікророзмітки:
- Schema.org: найбільш широко використовуваний стандарт мікророзмітки, підтримуваний основними пошуковими системами (Google, Bing, Yahoo, Yandex)
- JSON-LD: формат кодування мікророзмітки у вигляді JSON, рекомендований Google
- Microdata: формат мікророзмітки, вбудований безпосередньо в HTML-код
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 формат мікророзмітки. Атрибути microdata додаються безпосередньо до HTML-елементів, щоб зв'язати їх з типами і властивостями зі словника Schema.org.
Приклад використання Microdata
Подія (Event):
<body itemscope itemtype="https://schema.org/Event">
<h1 itemprop="name">Назва події</h1>
<p itemprop="startDate" content="2024-05-01T19:00">1 травня 2024 року, 19:00</p>
<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 та іншими.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ