Разработка 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 рабочий день.