Настройка 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="ru_RU">
<!-- Для продуктов -->
<meta property="product:price:amount" content="89990">
<meta property="product:price:currency" content="RUB">
<!-- Для статей -->
<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 дня.