Лабораторна робота №4
Тема: Розмітка контенту за допомогою Schema.org: структура та типи даних.
Мета: Навчитися проєктувати та впроваджувати структуровані дані у форматі JSON-LD для різних типів контенту.
Завдання 1. Розмітка інформації про статтю (Article)
Створіть HTML-файл, що імітує сторінку новини або блогу. Додайте в секцію <head> скрипт JSON-LD, який описує заголовок, дату, автора та обкладинку.
Зразок коду:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "NewsArticle",
"headline": "Інновації в цифровій освіті 2026",
"image": ["https://znu.edu.ua/images/news_cover.jpg"],
"datePublished": "2026-02-03T10:00:00+02:00",
"author": {
"@type": "Person",
"name": "Андрій Лісняк"
}
}
</script>Завдання 2. Розмітка картки товару або послуги (Product/Offer)
Уявіть, що ви створюєте сторінку для освітнього курсу. Опишіть його як товар, вказавши назву, опис, ціну та наявність.
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Курс: Професійна мікророзмітка",
"description": "Повний гайд по впровадженню Schema.org та JSON-LD.",
"offers": {
"@type": "Offer",
"url": "https://example.com/course",
"priceCurrency": "UAH",
"price": "1500",
"availability": "https://schema.org/InStock"
}
}Завдання 3. Створення "Навігаційного ланцюжка" (Breadcrumbs)
Розмітьте шлях до поточної сторінки (наприклад: Головна > Факультети > Кафедра IT), щоб пошуковик правильно відображав ієрархію сайту.
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Головна",
"item": "https://example.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Курси",
"item": "https://example.com/courses"
}]
}Завдання 4. Валідація результату
-
Скопіюйте весь створений вами код.
-
Перейдіть на сервіс Google Rich Results Test або Schema Markup Validator.
-
Вставте код та перевірте, чи немає критичних помилок.
-
Зробіть скріншот результату успішної перевірки.