Course search
Вхід

Семантична розмітка HTML документів

Лабораторна робота №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.
Вставте код та перевірте, чи немає критичних помилок.
Зробіть скріншот результату успішної перевірки.