Open Graph image templates
Headline, screenshot, blog post, and more. Copy a route, change the text, ship a 1200×630 card.
Emoji
No icons, no text, just a beautiful emoji
return new ImageResponse(
<div tw="flex items-center justify-center w-full h-full p-4 bg-black border-[20px] border-white/10">
<span style={{ fontSize: '300px' }}>🔥</span>
</div>,
{ width: 1200, height: 630 }
)Icon
These lucide icons look great
return new ImageResponse(
<div tw="flex items-center justify-center w-full h-full p-4 bg-pink-500 text-white border-[20px] border-pink-400">
<svg width="256" height="256" viewBox="0 0 24 24" stroke="currentColor" fill="none">
<circle cx="12" cy="12" r="10" />
</svg>
</div>,
{ width: 1200, height: 630 }
)Image
Any image, logo or profile picture
return new ImageResponse(
<div tw="flex items-center justify-center w-full h-full bg-gray-900">
<img src="https://ogimage.org/img/1024w/ogimage-black_1024.png" width={150} height={150} tw="mr-4 rounded-full" />
<div tw="flex flex-col text-white">
<div tw="text-[72px]">Jane Doe</div>
<div tw="text-[32px] opacity-90">Your Company</div>
</div>
</div>,
{ width: 1200, height: 630 }
)Button
Highly converting call to action button
return new ImageResponse(
<div tw="flex flex-col items-center justify-center w-full h-full bg-[#2663ec]">
<div tw="text-[150px] -mb-2">🤯</div>
<div tw="text-[64px] text-white mb-10">OG Image Generator</div>
<div tw="bg-[#ffd400] rounded-full px-12 py-4 text-[60px] text-black">
Create beautiful OG images
</div>
</div>,
{ width: 1200, height: 630 }
)Headline
Headline with a background box
return new ImageResponse(
<div tw="flex flex-col items-center justify-center w-full h-full bg-white text-black p-4 text-[90px]">
<div tw="bg-yellow-400 rounded-2xl">Better social previews</div>
<div tw="font-bold flex items-center">
with <div tw="ml-4 text-violet-500">OG Image</div>
</div>
</div>,
{ width: 1200, height: 630 }
)Live screenshot
Make automatic screenshots for every page
return new ImageResponse(
<div
style={{ background: 'linear-gradient(to top left,#ff75c3,#ffa647,#ffe83f,#9fff5b,#70e2ff,#cd93ff)' }}
tw="flex w-full h-full"
>
<img src={screenshot} tw="w-full h-full rounded-t-2xl shadow-2xl" />
</div>,
{ width: 1200, height: 630 }
)Phone
Real-time live screenshot of your mobile website
return new ImageResponse(
<div tw="flex w-full h-full bg-blue-500 relative p-4">
<div tw="flex w-full flex-col pl-10 items-start justify-end pb-10 bg-white rounded-[20px]">
<div tw="text-[60px] font-black">WIKIPEDIA</div>
</div>
<img src={screenshot} tw="absolute right-0 top-[10px]" width={600} />
</div>,
{ width: 1200, height: 630 }
)City
Use Unsplash API + Vercel geolocation to get a city picture
const city = headers().get('x-vercel-ip-city') ?? 'New York'
return new ImageResponse(
<div tw="flex flex-col items-center justify-center w-full h-full p-[40px]">
<div tw="text-[64px] bg-blue-500 px-2 text-white rounded-2xl mb-2">Your Brand</div>
<div tw="bg-[#ffd400] rounded-full px-12 py-4 text-[40px]">
Events in {city}
</div>
</div>,
{ width: 1200, height: 630 }
)Blog post
Blog post with a screenshot, title, and author
return new ImageResponse(
<div tw="flex flex-col items-center justify-center w-full h-full bg-[#261e36] p-4">
<div tw="text-[48px] font-black text-white mb-2">How to design Open Graph images</div>
<div tw="text-[24px] text-white mb-8">Sizing, typography, and templates for social previews</div>
<div tw="flex items-center mt-auto">
<div tw="text-[42px] font-black text-white">ogimage.org</div>
</div>
</div>,
{ width: 1200, height: 630 }
)