Після публікації посилання на новий продукт у Facebook замість картки з ціною та назвою відображається випадковий банер. Це типова ситуація при відсутності коректних Open Graph і Twitter Card мета-тегів. Без них соцмережі вибирають контент на свій розсуд: перше зображення, уривок тексту або alt-тег. Налаштування OG-тегів вирішує цю проблему: ми впроваджуємо og:title, og:description, og:image для кожної сторінки, гарантуючи гарний сніпет. Результат — зростання клікабельності (CTR) на 30–50% у соціальних мережах. Зв'яжіться з нами — оцінимо поточну мікророзмітку та назвемо терміни.
Чому Open Graph та Twitter Card так важливі?
Open Graph — протокол, розроблений Facebook, а Twitter Card — аналогічний стандарт для Twitter. Вони фіксують заголовок, опис, зображення та тип контенту (продукт, стаття, відео). Без них соцмережі показують випадковий контент: замість заголовка — alt-текст картинки, замість опису — уривок тіла сторінки. Дослідження показують зростання CTR до 50% для постів із налаштованими og-тегами. Згідно з документацією Facebook, зображення 1200×630 забезпечує оптимальний вигляд.
Які проблеми вирішують ці теги?
- Некоректне зображення — соцмережа бере не ту картинку або не показує її взагалі. og:image задає конкретне зображення з потрібним співвідношенням сторін (1200×630 для Facebook, 1200×628 для Twitter).
- Обрізаний текст — без og:description сніпет містить перші 150 символів сторінки, часто безглузді. Ми задаємо лаконічний опис до 200 символів.
- Довге кешування — Telegram кешує OG-теги при першому перегляді. Якщо змінити зображення, потрібно додати GET-параметр до url картинки. Ми розповімо, як оновити кеш.
Як налаштувати Open Graph: приклади коду
<!-- Обов'язкові -->
<meta property="og:title" content="Купити iPhone 15 Pro 256GB — ТехноМагазин">
<meta property="og:description" content="Найкраща ціна на iPhone 15 Pro. Доставка за 1 день.">
<meta property="og:image" content="https://example.ru/og/iphone-15-pro.jpg">
<meta property="og:url" content="https://example.ru/products/iphone-15-pro">
<meta property="og:type" content="product">
<meta property="og:site_name" content="ТехноМагазин">
<meta property="og:locale" content="uk_UA">
<!-- Для продуктів -->
<meta property="product:price:amount" content="89990">
<meta property="product:price:currency" content="UAH">
<!-- Для статей -->
<meta property="article:published_time" content="2024-01-01T10:00:00+03:00">
<meta property="article:author" content="Іван Іванов">
| Тег | Опис | Приклад вмісту |
|---|---|---|
| og:title | Заголовок сторінки (до 95 символів) | "Купити iPhone 15 Pro" |
| og:description | Опис (до 200 символів) | "Найкраща ціна на iPhone 15 Pro. Доставка за 1 день." |
| og:image | URL зображення (1200x630) | "https://example.com/image.jpg" |
| og:url | Канонічний URL | "https://example.com/page" |
| og:type | Тип контенту | "product", "article", "website" |
| og:site_name | Назва сайту | "ТехноМагазин" |
Як налаштувати Twitter Card
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Купити iPhone 15 Pro 256GB">
<meta name="twitter:description" content="Найкраща ціна на iPhone 15 Pro.">
<meta name="twitter:image" content="https://example.ru/og/iphone-15-pro.jpg">
<meta name="twitter:site" content="@technoshop_ua">
| Тип | Опис | Коли використовувати |
|---|---|---|
| summary | Маленьке зображення (120x120) зліва від тексту | Статті, новини |
| summary_large_image | Велике зображення (1200x628) зверху (найчастіше) | Продукти, лендінги, яскраві картинки |
| app | Пряме посилання на мобільний додаток | Промо додатків |
| player | Відеоплеєр (HLS, MP4) | Відеоконтент |
summary_large_image дає CTR у 2–3 рази вищий за summary для візуальних сторінок.
Порівняння вимог до зображень Facebook та Twitter
| Параметр | Facebook (OG) | Twitter (summary_large_image) |
|---|---|---|
| Розмір зображення | 1200x630 (мін 600x315) | 1200x628 |
| Співвідношення сторін | 1.91:1 | 2:1 |
| Формат | JPG, PNG, WebP | JPG, PNG, GIF |
| Максимальний розмір файлу | 8 MB | 5 MB |
Рекомендації щодо зображення: включайте логотип і назву, уникайте дрібного тексту, використовуйте контрастні кольори. Мінімальний розмір — 600x315.
Динамічна генерація OG-зображень
Для сторінок з унікальними даними (товари, статті) статичний банер неефективний. Ми використовуємо автоматичну генерацію через Puppeteer/Chrome headless або бібліотеку Intervention Image. Кожен товар отримує унікальний сніпет із ціною, назвою, акцією — CTR зростає на 30–40% порівняно з універсальним зображенням.
// Через Puppeteer/Chrome headless або бібліотеку Intervention Image
Route::get('/og-image/product/{product}', function (Product $product) {
$image = ImageManager::gd()->create(1200, 630);
// Фон
$image->fill('#1a1a2e');
// Текст
$image->text($product->name, 600, 300, function ($font) {
$font->filename(public_path('fonts/Inter-Bold.ttf'));
$font->size(48);
$font->color('#ffffff');
$font->align('center');
});
return response($image->toJpeg(90))->header('Content-Type', 'image/jpeg')
->header('Cache-Control', 'public, max-age=86400');
});
Альтернатива — Vercel OG (@vercel/og) для Next.js: генерує зображення з JSX на edge runtime. Це швидше та не вимагає додаткового сервера.
Як налагоджувати та тестувати?
Використовуйте валідатори: Facebook Debug Tool та Twitter Cards Validator. Вони показують, які теги розпізнано, та попереджають про помилки. Telegram не має валідатора — для скидання кешу додайте GET-параметр до URL зображення (наприклад, ?v=2). Ми включаємо це в процес налаштування, щоб клієнт не чекав оновлення кешу.
Процес роботи та що входить
- Аналітика — аудит поточних мета-тегів, виявлення помилок, формування чек-листа.
- Проектування — вибір типів og:type для кожної сторінки, підготовка макету зображення.
- Реалізація — правка шаблонів (head-секція), налаштування динамічної генерації (якщо потрібно).
- Тестування — перевірка через усі валідатори, контроль кешування.
- Деплой — викладка на продакшн, моніторинг результатів (CTR у соцмережах).
У склад робіт входить: консультація щодо структури тегів, налаштування шаблонів, тестування на реальних посиланнях, навчання вашої команди (як змінювати og:title для нових сторінок), документація щодо процесу. Ми даємо гарантію на коректну роботу тегів протягом місяця після запуску — якщо щось зламається, виправимо безкоштовно.
Чек-лист перевірки OG-тегів
- og:title ≤ 95 символів
- og:description ≤ 200 символів
- og:image розмір 1200x630, не більше 8MB
- twitter:card встановлено
- Усі обов'язкові теги дублюються в Twitter Card
- Зображення оптимізовано (формат JPG/PNG/WebP)
- Немає конфлікту з іншими мета-тегами
- Протестовано через Facebook Debug Tool та Twitter Cards Validator
- Telegram кеш оновлено (додано GET-параметр до url зображення)
Строки та вартість
Базове налаштування OG/Twitter Card тегів займає від кількох годин до 2 днів. Якщо потрібна динамічна генерація зображень — додається 1–2 дні. Вартість розраховується індивідуально залежно від кількості шаблонів та складності інтеграції. Замовте налаштування — отримайте гарний сніпет та зростання CTR. Наш досвід — 5+ років у веб-розробці, понад 100 реалізованих проектів. Ми не просто вставляємо теги — ми тестуємо кожен випадок, щоб сніпет виглядав ідеально.
Зв'яжіться з нами для оцінки вашого проекту — ми проаналізуємо поточну мікророзмітку та запропонуємо оптимальне рішення. Отримайте консультацію з налаштування OG та Twitter Card вже сьогодні.