Setting up Open Graph and Twitter Card Meta Tags
Open Graph and Twitter Card are protocols for controlling how links appear when shared on social networks. Without them, VKontakte, Facebook, Telegram will show a random image and truncated text. With proper tags — a beautiful snippet that increases CTR.
Open Graph
<!-- Required -->
<meta property="og:title" content="Buy iPhone 15 Pro 256GB — TechnoStore">
<meta property="og:description" content="Best price for iPhone 15 Pro. Delivery in 1 day.">
<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="TechnoStore">
<meta property="og:locale" content="en_US">
<!-- For products -->
<meta property="product:price:amount" content="89990">
<meta property="product:price:currency" content="RUB">
<!-- For articles -->
<meta property="article:published_time" content="2024-03-15T10:00:00+03:00">
<meta property="article:author" content="Ivan Ivanov">
Twitter Card
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Buy iPhone 15 Pro 256GB">
<meta name="twitter:description" content="Best price for 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 types:
-
summary— small image on the left -
summary_large_image— large image on top (used more often) -
app— for mobile applications -
player— for video
OG Image Requirements
- Recommended size: 1200×630 px (2:1 for Facebook), 1200×628 for Twitter
- Minimum: 600×315 px
- Format: JPG or PNG (WebP not supported everywhere)
- Include logo and name for recognition
- Don't use small text — image is small on mobile
Dynamic Generation of OG Images
For pages with unique data (products, articles) — automatic generation:
// Via Puppeteer/Chrome headless or Intervention Image library
Route::get('/og-image/product/{product}', function (Product $product) {
$image = ImageManager::gd()->create(1200, 630);
// Background
$image->fill('#1a1a2e');
// Text
$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');
});
Alternative — Vercel OG (@vercel/og) for Next.js: generates image from JSX on edge runtime.
Debugging
- Facebook: developers.facebook.com/tools/debug
- Twitter: cards-dev.twitter.com/validator
- VKontakte: clears cache when sending new URL in a message
Telegram caches OG images — when changing, add GET parameter to image URL.
Setup timeline: a few hours. With dynamic image generation — 1–2 days.