Лабораторна робота №6
Тема: Налагодження та валідація мета-тегів протоколу OpenGraph.
Мета: Навчитися впроваджувати протокол OpenGraph для керування відображенням вебсторінок у соціальних мережах та проводити їх технічну валідацію.
Завдання 1. Створення базової картки OpenGraph
Додайте в секцію <head> вашого HTML-документа (створеного в попередніх роботах) блок мета-тегів, що відповідають за формування картки прев'ю.
Зразок коду для впровадження:
<meta property="og:title" content="Вступ 2026: Приймальна комісія ЗНУ">
<meta property="og:description" content="Обирай майбутнє разом із ЗНУ. Вся інформація про спеціальності та терміни вступу тут.">
<meta property="og:image" content="https://znu.edu.ua/images/admission-2026.jpg">
<meta property="og:url" content="https://znu.edu.ua/admission">
<meta property="og:type" content="website">
<meta property="og:locale" content="uk_UA">Завдання 2. Оптимізація медіа-контенту
Дослідіть вимоги соціальних мереж до зображень прев'ю.
Підготуйте (або знайдіть посилання на) зображення з рекомендованими пропорціями (1200x630 пікселів).
Додайте специфічні теги для розмірів зображення, щоб пришвидшити його завантаження платформою:
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">Завдання 3. Валідація та виправлення помилок (Debug)
-
Скопіюйте посилання на вашу сторінку (або код).
-
Використовуйте один із професійних дебаггерів:
-
Facebook Sharing Debugger (виявляє помилки в структурі).
-
Telegram Webpage Bot (@WebpageBot) — дозволяє миттєво оновити вигляд посилання.
-
-
Зафіксуйте результат.
Завдання 4. Робота з Twitter Cards
Додайте альтернативну розмітку для мережі X (Twitter), щоб забезпечити максимальне охоплення.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Вступ до ЗНУ 2026">
<meta name="twitter:description" content="Твоя успішна кар'єра починається тут!">
<meta name="twitter:image" content="https://znu.edu.ua/images/twitter-card.jpg">