Templates
OG image templates
Headline, screenshot, blog post, and more. Copy a route, change the text, ship a 1200×630 card.
Headline
A two-line headline with a marker on the second line
// /og/templates/headline?title=Launch%20week&highlight=starts%20Monday
return renderCard(
<div style={{ backgroundColor: '#faf7f2', padding: '64px 76px' }}>
<div style={{ fontFamily: MONO }}>{site}</div>
<div style={{ fontSize: 104, fontWeight: 700 }}>
<div>{title}</div>
<div style={{ backgroundColor: '#fde047', borderRadius: 20 }}>
{highlight}
</div>
</div>
<div>{cta} →</div>
</div>,
)Blog post
Title, excerpt, and author for each article
// /og/templates/blog-post?title=...&excerpt=...&author=Jane&tag=Guide
return renderCard(
<div style={{ backgroundColor: '#0b090c', padding: '68px 76px' }}>
<div style={{ color: '#e879f9', fontFamily: MONO }}>{tag}</div>
<div style={{ fontSize: 78, fontWeight: 700 }}>{title}</div>
<div style={{ color: '#a1a1aa', fontSize: 32 }}>{excerpt}</div>
<div>{author}</div>
</div>,
)Live screenshot
A live capture of each page in a browser window
// /og/templates/screenshot?path=/pricing
const screenshot = getScreenshotURL({
url: `https://your-site.com${path}`,
width: 1064,
height: 506,
})
return renderCard(
<div style={{ backgroundImage: 'linear-gradient(135deg, #f0abfc, #818cf8, #22d3ee)' }}>
<div style={{ borderRadius: '24px 24px 0 0', overflow: 'hidden' }}>
<BrowserBar url={path} />
<img src={screenshot} width={1064} height={506} />
</div>
</div>,
)Phone
Your mobile page in a phone, beside a headline
// /og/templates/phone?title=...&subtitle=...&cta=Open%20the%20app
return renderCard(
<div style={{ backgroundColor: '#eef2ff', justifyContent: 'space-between' }}>
<div>
<div style={{ fontSize: 84, fontWeight: 700 }}>{title}</div>
<div style={{ fontSize: 32 }}>{subtitle}</div>
<div style={{ backgroundColor: '#4338ca', borderRadius: 999 }}>{cta}</div>
</div>
<div style={{ borderRadius: 60, transform: 'rotate(4deg)' }}>
<img src={screenshot} width={302} height={652} />
</div>
</div>,
)Button
An emoji, a headline, and one large call to action
// /og/templates/button?emoji=🚀&title=Launch%20day&cta=Try%20it%20free
return renderCard(
<div style={{ backgroundColor: '#1d4ed8', alignItems: 'center' }}>
<div style={{ fontSize: 150 }}>{emoji}</div>
<div style={{ fontSize: 76, fontWeight: 700 }}>{title}</div>
<div style={{ backgroundColor: '#fde047', borderRadius: 999 }}>
{cta}
</div>
</div>,
)Profile
A profile card: picture, name, role, and handle
// /og/templates/image?name=Jane%20Doe&role=Designer&handle=@jane
return renderCard(
<div style={{ backgroundColor: '#0c0a09', alignItems: 'center' }}>
<img src={avatar} width={240} height={240} style={{ borderRadius: 999 }} />
<div>
<div style={{ fontFamily: SERIF, fontSize: 108 }}>{name}</div>
<div style={{ fontSize: 34 }}>{role}</div>
<div style={{ fontFamily: MONO, color: '#fbbf24' }}>{handle}</div>
</div>
</div>,
)Icon
An icon tile beside a title. Paste any Lucide SVG
// /og/templates/icon?title=Dribbble%20shots&subtitle=New%20every%20week
return renderCard(
<div style={{ backgroundImage: 'linear-gradient(135deg, #ec4899, #be185d)' }}>
<div style={{ backgroundColor: '#fff', borderRadius: 56, transform: 'rotate(-4deg)' }}>
<svg width="168" height="168" viewBox="0 0 24 24" stroke="currentColor" fill="none">
<circle cx="12" cy="12" r="10" />
</svg>
</div>
<div style={{ fontSize: 84, fontWeight: 700 }}>{title}</div>
</div>,
)Emoji
One large emoji. The least effort that works
// /og/templates/emoji?emoji=🔥&label=Hot%20take
return renderCard(
<div style={{ backgroundColor: '#0a0a0a', border: '20px solid #1c1917' }}>
<div style={{ fontSize: 300 }}>{emoji}</div>
<div style={{ fontFamily: MONO }}>{label}</div>
</div>,
)City
A photo of the city of each visitor, from the geo header
// /og/templates/city?brand=Acme&prefix=Events%20in
const city = headers().get('x-vercel-ip-city') ?? 'New York'
const photo = await getCityPicture(city) // Unsplash
return renderCard(
<div style={{ backgroundImage: `url(${photo})` }}>
<div style={{ backgroundColor: '#fff', borderRadius: 999 }}>{brand}</div>
<div style={{ fontFamily: MONO }}>{prefix}</div>
<div style={{ fontSize: 132, fontWeight: 700 }}>{city}</div>
</div>,
)