Самостійна робота №7
Тема: Налаштування та оптимізація прев’ю сторінок (Social Preview) для багатоплатформного поширення.
Мета: Навчитися адаптувати метадані під технічні вимоги різних соціальних мереж та месенджерів (Facebook, Telegram, X, Viber), забезпечуючи високу клікабельність контенту.
I. ТЕОРЕТИЧНИЙ БЛОК: КРОСПЛАТФОРМЕННІСТЬ
Різні платформи використовують різні алгоритми для зчитування прев'ю. Основна проблема полягає в тому, що Facebook потребує горизонтальних зображень (1.91:1), а месенджери можуть обрізати їх до квадратів. Ваше завдання — створити універсальний код, який задовольнить усіх роботів.
II. ПРАКТИЧНЕ ЗАВДАННЯ
Створіть файл social.html та додайте розширений блок метаданих у секцію <head>. Використовуйте наведені нижче зразки як еталон.
1.Базова розмітка Open Graph (для більшості платформ)
<meta property="og:type" content="website">
<meta property="og:url" content="https://znu.edu.ua/admission">
<meta property="og:title" content="Вступ до ЗНУ 2026 — Твій шлях до успіху">
<meta property="og:description" content="Дізнайся про спеціальності, терміни подачі документів та переваги навчання в ЗНУ.">
<meta property="og:image" content="https://znu.edu.ua/img/preview-main.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="uk_UA">2. Розширення для X (Twitter Cards)
Платформа X потребує специфічних тегів для коректного відображення великих карток.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ZNU_Official">
<meta name="twitter:title" content="Магістратура в ЗНУ: Обирай майбутнє">
<meta name="twitter:image" content="https://znu.edu.ua/img/preview-twitter.jpg">3. Перевірка та оновлення кешу
-
Скопіюйте посилання на свою сторінку.
-
Відкрийте Telegram Webpage Bot (
@WebpageBot). -
Надішліть йому посилання та натисніть кнопку "Check again". Це змусить месенджер оновити прев'ю, якщо ви змінили теги.
III. ПОРІВНЯЛЬНЕ ДОСЛІДЖЕННЯ
Знайдіть у мережі два освітні ресурси та порівняйте їхнє прев'ю в Telegram.
-
Чи підтягується картинка?
-
Чи відповідає заголовок змісту сторінки?
-
Чому прев'ю може бути відсутнім (наприклад, закритий доступ для роботів у
robots.txt)?