Generating Dynamic OG Images with HTML & CSS
Why spend hours in Figma when you can automate your social share images with code?
Every blog post or product page needs a high-quality Open Graph (OG) image. But manually creating these for hundreds of pages is impossible.
The Strategy: HTML as a Template
Instead of using an image editor, create a simple HTML template for your social card. Use Tailwind or standard CSS to make it look exactly how you want.
<div class="w-[1200px] h-[630px] bg-slate-950 flex flex-col p-20">
<h1 class="text-7xl font-bold text-white mb-4">{{title}}</h1>
<p class="text-3xl text-slate-400">By {{author}}</p>
</div>
Automating with RocketUtils
Using our Screenshot API, you can point to your template (hosted or passed as raw HTML) and get back a PNG in milliseconds. No Puppeteer maintenance required.
const response = await fetch('https://rocketutils.dev/v1/screenshot', {
method: 'POST',
headers: { 'x-api-key': 'YOUR_KEY' },
body: JSON.stringify({
url: 'https://your-site.com/og-template?title=Hello%20World',
viewport: { width: 1200, height: 630 }
})
});