Розробка Open Graph зображень для соціальних мереж
Open Graph — протокол розмітки, що визначає як сторінка виглядає при шерінгу на Facebook, Twitter/X, Telegram, VK, LinkedIn, iMessage. Без правильно налаштованих OG-зображень платформи генерують превью произвільно: беруть перше зображення на сторінці або показують пусту прямокутник.
Технічні вимоги
Facebook, VK, Telegram:
-
og:image— мінімум 1200×630px, рекомендується 1200×630 - Формат: JPG або PNG, не більше 8 МБ
- Вказувати
og:image:type,og:image:width,og:image:height
Twitter/X Cards:
-
twitter:card: summary_large_image— горизонтальне превью - Зображення: 1200×600px, мінімум 300×157, максимум 5 МБ
-
twitter:imageможе відрізнятися відog:image
WhatsApp:
- Використовує
og:image, квадратні кроп 1:1 відображаються краще
Мета-теги у <head>:
<meta property="og:image" content="https://example.com/og/about.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og/about.jpg" />
Динамічна генерація
Для блогів, каталогів, тисяч сторінок OG-зображення генеруються автоматично. На Next.js — через ImageResponse з next/og:
// app/og/route.tsx
import { ImageResponse } from 'next/og';
export async function GET(req: Request) {
const { searchParams } = new URL(req.url);
const title = searchParams.get('title');
return new ImageResponse(
<div style={{ display:'flex', background:'#1e40af', width:'100%', height:'100%', padding:'60px' }}>
<h1 style={{ color:'white', fontSize: 64 }}>{title}</h1>
</div>,
{ width: 1200, height: 630 }
);
}
На PHP/Laravel — бібліотека intervention/image або headless Chrome через spatie/browsershot.
Дизайн-система OG-зображень
Всі OG-зображення повинні бути впізнавані як приналежні одному бренду. Типовий шаблон: фірмовий фон, лого в кутку, крупний заголовок сторінки, опціонально — ілюстрація або іконка рубрики. Текст повинен бути читаний при розмірі превью ~300×158px.
Тривалість
Розроблення набору шаблонів OG-зображень (головна + типові сторінки + блог): 1 робочий день.