Налаштування Open Graph та Twitter Card мета-тегів
Open Graph та Twitter Card — протоколи для управління зовнішнім виглядом посилань при публікації в соціальних мережах. Без них ВКонтакте, Facebook, Telegram покажуть випадкове зображення та обрізаний текст. З правильними тегами — красивий сніпет, який збільшує CTR.
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-03-15T10:00:00+03:00">
<meta property="article:author" content="Іван Іванов">
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_ru">
Типи Twitter Card:
-
summary— маленьке зображення зліва -
summary_large_image— велике зображення зверху (використовується частіше) -
app— для мобільних додатків -
player— для відео
Вимоги до OG-зображення
- Рекомендуємий розмір: 1200×630 px (2:1 для Facebook), 1200×628 для Twitter
- Мінімум: 600×315 px
- Формат: JPG або PNG (WebP не підтримується везде)
- Включати логотип та назву для впізнавання
- Не мелкий текст — на мобільних зображення маленьке
Динамічна генерація OG-зображень
Для сторінок з унікальними даними (товари, статті) — автоматична генерація:
// Через 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: developers.facebook.com/tools/debug
- Twitter: cards-dev.twitter.com/validator
- ВКонтакте: очищає кеш при відправці нового URL у повідомлення
Telegram кешує OG-зображення — при змінах додайте GET-параметр до URL зображення.
Час налаштування: кілька годин. З динамічною генерацією зображень — 1–2 дні.