Для чого використовують мета-теги og:title, og:description, og:image?
Мета-теги og:title, og:description та og:image використовуються для того, щоб керувати зовнішнім виглядом посилання, коли ним діляться в соцмережах, месенджерах та інших платформах (Facebook, Telegram, LinkedIn, X/Twitter тощо).
Вони, частина протоколу Open Graph, який дозволяє задати заголовок, опис і зображення попереднього перегляду сторінки, щоб посилання виглядало гарно й привабливо.
1. <meta property="og:title">, заголовок картки
Задає основний заголовок, який соцмережа покаже над описом і картинкою під час публікації посилання.
Приклад:
<meta property="og:title" content="7 помилок, через які стосунки руйнуються непомітно">Відображається як великий текст над описом. Важливо: це перше, що бачить користувач, тому заголовок має бути коротким (до ~60 символів) і клікабельним.
Навіщо:
- робить посилання зрозумілим та емоційним;
- впливає на CTR (клікабельність) під час поширення.
2. <meta property="og:description">, опис сторінки
Відповідає за текст під заголовком у попередньому перегляді. Це коротке, «людяне» пояснення, про що сторінка і чому вона цікава.
Приклад:
<meta property="og:description" content="Психолог пояснює, чому близькість не зникає раптово, а йде маленькими, непомітними кроками.">Рекомендована довжина: 100-160 символів. Опис має доповнювати заголовок, а не повторювати його.
Навіщо:
- допомагає соцмережі сформувати сніпет (preview-текст);
- посилює залученість і бажання клікнути;
- робить посилання «живим» і зрозумілим.
3. <meta property="og:image">, зображення попереднього перегляду
Задає картинку, яка відображатиметься поряд із заголовком і описом.
Приклад:
<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. Як це виглядає на практиці
Під час публікації посилання:
https://mysite.com/postTelegram, Facebook або LinkedIn покажуть картку:
(картинка з og:image)
7 помилок, через які стосунки руйнуються непомітно
Психолог пояснює, чому близькість не зникає раптово, а йде маленькими, непомітними кроками.
Підсумок:
| Тег | Призначення | Де відображається |
|---|---|---|
og:title | Заголовок картки | Верхній рядок попереднього перегляду |
og:description | Текст-опис | Під заголовком |
og:image | Картинка попереднього перегляду | Зліва або зверху картки |
Простими словами: Ці три теги, візуальний паспорт сторінки для соцмереж. Вони говорять:
«Ось мій заголовок, ось короткий опис, ось фото, покажи мене красиво.»
Без них соцмережа «вгадує» прев'ю автоматично, часто з обрізаними заголовками та випадковими зображеннями.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.