Developing Open Graph Images for Social Networks
Open Graph is a markup protocol that defines how a page looks when shared on Facebook, Twitter/X, Telegram, VK, LinkedIn, iMessage. Without proper OG images, platforms generate preview arbitrarily: take first image on page or show empty rectangle.
Technical Requirements
Facebook, VK, Telegram:
-
og:image— minimum 1200×630px, recommended 1200×630 - Format: JPG or PNG, not over 8 MB
- Specify
og:image:type,og:image:width,og:image:height
Twitter/X Cards:
-
twitter:card: summary_large_image— horizontal preview - Image: 1200×600px, minimum 300×157, maximum 5 MB
-
twitter:imagecan differ fromog:image
WhatsApp:
- Uses
og:image, 1:1 square crops display better
Meta tags in <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" />
Dynamic Generation
For blogs, catalogs, thousands of pages — OG images generate automatically. On Next.js via ImageResponse from 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 }
);
}
On PHP/Laravel — intervention/image library or headless Chrome via spatie/browsershot.
OG Image Design System
All OG images should be recognizable as belonging to one brand. Typical template: brand background, logo in corner, large page title, optional illustration or category icon. Text readable at ~300×158px preview size.
Timeline
Developing set of OG image templates (home + typical pages + blog): 1 business day.