Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Для чого використовують мета-теги og:title, og:description, og:image?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Мета-теги **`og:title`**, **`og:description`** та **`og:image`** використовуються для того, щоб керувати зовнішнім виглядом посилання, коли ним діляться в соцмережах, месенджерах та інших платформах (Facebook, Telegram, LinkedIn, X/Twitter тощо). **Ключове:** Вони, частина протоколу Open Graph, який дозволяє задати заголовок, опис і зображення попереднього перегляду сторінки, щоб посилання виглядало гарно й привабливо.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняМета-теги `og:title`, `og:description` та `og:image` використовуються для того, щоб **керувати зовнішнім виглядом посилання**, коли ним діляться в соцмережах, месенджерах та інших платформах (Facebook, Telegram, LinkedIn, X/Twitter тощо). Вони, частина протоколу **Open Graph**, який дозволяє задати **заголовок, опис і зображення попереднього перегляду** сторінки, щоб посилання виглядало гарно й привабливо. --- ### 1. `<meta property="og:title">`, заголовок картки Задає **основний заголовок**, який соцмережа покаже над описом і картинкою під час публікації посилання. Приклад: ```html <meta property="og:title" content="7 помилок, через які стосунки руйнуються непомітно"> ``` Відображається як великий текст над описом. Важливо: це **перше, що бачить користувач**, тому заголовок має бути коротким (до ~60 символів) і клікабельним. **Навіщо:** - робить посилання зрозумілим та емоційним; - впливає на CTR (клікабельність) під час поширення. --- ### 2. `<meta property="og:description">`, опис сторінки Відповідає за **текст під заголовком** у попередньому перегляді. Це коротке, «людяне» пояснення, про що сторінка і чому вона цікава. Приклад: ```html <meta property="og:description" content="Психолог пояснює, чому близькість не зникає раптово, а йде маленькими, непомітними кроками."> ``` Рекомендована довжина: 100-160 символів. Опис має **доповнювати заголовок**, а не повторювати його. **Навіщо:** - допомагає соцмережі сформувати сніпет (preview-текст); - посилює залученість і бажання клікнути; - робить посилання «живим» і зрозумілим. --- ### 3. `<meta property="og:image">`, зображення попереднього перегляду Задає **картинку**, яка відображатиметься поряд із заголовком і описом. Приклад: ```html <meta property="og:image" content="https://site.com/images/relationships.jpg"> ``` Рекомендації: - формат: `.jpg` або `.png`; - розмір: не менше **1200×630 px** (для хорошої якості в Telegram, Facebook і LinkedIn); - посилання має бути **абсолютним** (з повним URL, що починається з `https://`). **Навіщо:** - візуально виділяє пост у стрічці; - підвищує залученість (до +200% CTR за даними Facebook); - формує емоційний контекст. --- ### 4. Як це виглядає на практиці Під час публікації посилання: ```javascript https://mysite.com/post ``` Telegram, Facebook або LinkedIn покажуть картку: (картинка з `og:image`) **7 помилок, через які стосунки руйнуються непомітно** Психолог пояснює, чому близькість не зникає раптово, а йде маленькими, непомітними кроками. --- ### Підсумок: | Тег | Призначення | Де відображається | |---|---|---| | `og:title` | Заголовок картки | Верхній рядок попереднього перегляду | | `og:description` | Текст-опис | Під заголовком | | `og:image` | Картинка попереднього перегляду | Зліва або зверху картки | --- **Простими словами:** Ці три теги, **візуальний паспорт сторінки для соцмереж**. Вони говорять: > «Ось мій заголовок, ось короткий опис, ось фото, покажи мене красиво.» Без них соцмережа «вгадує» прев'ю автоматично, часто з обрізаними заголовками та випадковими зображеннями.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.