Повний посібник з тегів Open Graph
Все, що потрібно знати про OG-теги для ідеальних прев'ю в соціальних мережах
Вступ
У цифрову епоху те, як ваш контент виглядає при поширенні в соціальних мережах, може визначати, чи хтось натисне, чи прогортає далі. Теги Open Graph (OG) - це секрет привабливих прев'ю посилань. Створені Facebook у 2010 році, вони стали стандартом контролю вигляду URL при поширенні онлайн.
Чому OG-теги важливі
1. Вищий показник кліків
Дослідження показують, що посилання з багатими прев'ю отримують до 2x більше залучення, ніж звичайні текстові посилання.
2. Контроль бренду
Без OG-тегів платформи вгадують, що показати. З OG-тегами ви вирішуєте, яке зображення, заголовок та опис представляють ваш контент.
3. Професійний вигляд
Добре відформатоване прев'ю посилання сигналізує про якість та надійність.
4. Узгодженість між платформами
OG-теги забезпечують однаковий вигляд контенту на Facebook, LinkedIn, Twitter чи месенджерах.
Pro Tip
Посилання з оптимізованими OG-тегами можуть збільшити трафік з соціальних мереж до 150%.
Теги для конкретних платформ
Twitter Cards
Twitter (тепер X) має власні мета-теги. Хоча він використовує OG-теги, теги Twitter дають більше контролю.
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://example.com/image.png" />LinkedIn використовує OG-теги, але вимагає зображення щонайменше 1200x627 пікселів.
WhatsApp & Telegram
WhatsApp і Telegram також використовують OG-теги, але агресивно кешують прев'ю.
Найкращі практики
| Platform | Size | Ratio |
|---|---|---|
| 1200 x 630px | 1.91:1 | |
| 1200 x 628px | 1.91:1 | |
| 1200 x 627px | 1.91:1 | |
| 1200 x 630px | 1.91:1 |
- Заголовок: 60-90 символів (Facebook обрізає при ~88)
- Опис: 150-200 символів для повного відображення
- URL: Використовуйте зрозумілі URL
Поширені помилки
1. Відсутній og:image
Зображення привертає увагу. Без нього посилання виглядає неповним.
2. Відносні URL
Завжди використовуйте абсолютні URL, що починаються з https://.
3. Неправильні розміри зображення
Занадто малі зображення або неправильні пропорції можуть бути обрізані або не відображатися.
4. Немає тестування на платформах
Кожна платформа рендерить прев'ю по-різному. Завжди тестуйте.
5. Ігнорування кешу
Платформи кешують прев'ю. Використовуйте дебагери після змін.
Інструменти тестування
Перед публікацією перевірте OG-теги за допомогою офіційних інструментів:
Часті запитання
Що таке теги Open Graph?
Мета-теги, що контролюють вигляд URL при поширенні в соціальних мережах, визначаючи заголовок, опис та зображення.
Чому мій og:image не відображається?
Поширені проблеми: зображення замале (мін 200x200px), відносний URL, файл завеликий (макс 8MB), або стара версія в кеші.
Чи можу я використовувати SVG для og:image?
Ні, Facebook та більшість платформ не підтримують SVG. Використовуйте PNG або JPEG.