{/* Header: logo + category */}
),
{ width: 1200, height: 630 }
);
}
```
Usage URL: `/og/blog?title=My+Post&author=Jane&date=2024-01-15&category=Engineering&avatar=https://...`
---
## 6. Product OG Template
Combines a product photo on the right with metadata on the left — a split layout.
```tsx
// app/og/product/route.tsx
import { ImageResponse } from '@vercel/og';
import type { NextRequest } from 'next/server';
export const runtime = 'edge';
function StarRating({ rating }: { rating: number }) {
return (
{/* eslint-disable-next-line @next/next/no-img-element */}
{category && (
{/* Title */}
{category}
)}
50 ? 52 : 68, fontWeight: 800, color: '#f8fafc', lineHeight: 1.15, margin: '0', maxWidth: '90%', }} > {title}
{/* Author row */}
{avatarUrl && (
)}
{author}
{date && (
{new Date(date).toLocaleDateString('en-US', {
month: 'long',
day: 'numeric',
year: 'numeric',
})}
)}
{Array.from({ length: 5 }).map((_, i) => (
★
))}
);
}
export async function GET(request: NextRequest) {
const { searchParams } = new URL(request.url);
const name = (searchParams.get('name') ?? 'Product').slice(0, 60);
const price = searchParams.get('price') ?? '';
const rating = parseFloat(searchParams.get('rating') ?? '0');
const reviewCount = searchParams.get('reviews') ?? '';
const imageUrl = searchParams.get('image') ?? '';
const badge = searchParams.get('badge') ?? ''; // e.g. "New" or "Sale"
return new ImageResponse(
(
{/* Left: product info */}
)}
),
{ width: 1200, height: 630 }
);
}
```
---
## 7. Twitter Card vs OG (Different Sizes)
Twitter/X `summary_large_image` uses a 1200×628 crop (effectively identical to OG). Twitter `summary` uses a 1:1 card at 800×800. LinkedIn and Facebook both read `og:image` at 1200×630.
**Dedicated Twitter square image route:**
```tsx
// app/og/twitter/route.tsx — 800x800 for summary card
import { ImageResponse } from '@vercel/og';
import type { NextRequest } from 'next/server';
export const runtime = 'edge';
export async function GET(request: NextRequest) {
const { searchParams } = new URL(request.url);
const title = (searchParams.get('title') ?? '').slice(0, 50);
return new ImageResponse(
(
{badge && (
{/* Right: product image */}
{imageUrl && (
{badge}
)}
{name}
{rating > 0 && (
{price}
)}
mystore.com
mysite.com
{title}
{post.title}
{post.excerpt}
Hello World
),
{
width: 1200,
height: 630,
fonts: [
{
name: 'Inter',
data: interBold,
weight: 700,
style: 'normal',
},
],
}
);
}
```
### Self-hosted font (fastest, no external fetch)
```tsx
// Place font file at: public/fonts/Inter-Bold.woff
// In your OG route:
const fontData = await fetch(
new URL('/fonts/Inter-Bold.woff', process.env.NEXT_PUBLIC_SITE_URL)
).then((r) => r.arrayBuffer());
```
### Font caching pattern (module-level)
Fetching fonts on every request adds ~200ms latency. Cache at module scope — the Edge runtime reuses the module between warm invocations:
```tsx
// Module-level cache — persists across warm requests on the same Edge instance
let cachedFont: ArrayBuffer | null = null;
async function getFont(): Promise{post.title}
// GOOD — clamp and scale font size based on length const safeTitle = post.title.slice(0, 80); const fontSize = safeTitle.length > 50 ? 52 : 72;{safeTitle}
``` Satori does not wrap text the same way browsers do. Always test with your longest realistic title. ### Wrong dimensions ```tsx // BAD — too small, platforms upscale and it looks blurry new ImageResponse(, { width: 600, height: 315 }); // BAD — non-standard ratio, gets letterboxed new ImageResponse(, { width: 1200, height: 400 }); // GOOD new ImageResponse(, { width: 1200, height: 630 }); // 1.91:1 ratio ``` ### Using Grid layout ```tsx // BAD — satori does not support CSS Grid
// GOOD — use flexbox exclusively
```
### Fetching images without error handling
```tsx
// BAD — if avatar fetch fails, the whole OG route returns 500
const avatar = await fetch(avatarUrl).then((r) => r.arrayBuffer());
// GOOD — fall back gracefully
let avatarData: ArrayBuffer | null = null;
try {
const res = await fetch(avatarUrl);
if (res.ok) avatarData = await res.arrayBuffer();
} catch {
// Render without avatar
}
```
### Hardcoded localhost URL in production
```tsx
// BAD
const logoUrl = 'http://localhost:3000/logo.png';
// GOOD
const logoUrl = new URL('/logo.png', process.env.NEXT_PUBLIC_SITE_URL);
```
Always set `NEXT_PUBLIC_SITE_URL` in your deployment environment variables.
### Skipping `og:image:width` and `og:image:height`
```tsx
// BAD — scrapers fetch blindly, causing layout shifts in link previews
openGraph: { images: [{ url: ogUrl }] }
// GOOD — always declare dimensions
openGraph: {
images: [{ url: ogUrl, width: 1200, height: 630, alt: post.title }]
}
```
Left
Right