HTML to Image API: Generate Dynamic OG Images at Scale

Open Graph (OG) images determine how your links look when shared on Twitter, LinkedIn, Slack, and iMessage. A well-designed OG image can 2–3× your click-through rate. The problem: generating unique OG images for every blog post, product page, or user profile doesn't scale manually.

The HTML-to-image approach

Instead of using a design tool like Figma or Canva, you write a simple HTML template. Inject dynamic data (title, author, date), and render it to a 1200×630 PNG using a headless browser API. This approach is:

• Consistent — the same template produces the same look every time
• Programmable — you can generate thousands of images in a loop
• Maintainable — change the template once, all future images update

Building an OG image template

const ogTemplate = ({ title, author, date, tag }) => `
<div style="
  width: 1200px; height: 630px;
  background: linear-gradient(135deg, #1e1b4b, #312e81);
  display: flex; flex-direction: column;
  justify-content: center; padding: 80px;
  font-family: 'Inter', sans-serif; color: white;
">
  <span style="
    background: rgba(99,102,241,0.3); color: #a5b4fc;
    padding: 6px 16px; border-radius: 999px;
    font-size: 14px; width: fit-content; margin-bottom: 24px;
  ">${tag}</span>
  <h1 style="font-size: 52px; font-weight: 800; line-height: 1.1; margin: 0 0 24px;">${title}</h1>
  <p style="font-size: 20px; color: #a5b4fc;">${author} · ${date}</p>
</div>
`

Generating the image

const res = await fetch('https://www.agent-gen.com/api/v1/generate/image', {
  method: 'POST',
  headers: {
    'X-API-Key': process.env.AGENTGEN_API_KEY,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    html: ogTemplate({
      title: 'How to Build an AI Invoice Generator',
      author: 'Sarah Chen',
      date: 'Feb 2026',
      tag: 'Tutorial',
    }),
    width: 1200,
    height: 630,
    format: 'png',
  }),
})

const { url } = await res.json()
// url is a permanent CDN link you can use in <meta og:image>

Integrating with Next.js

In Next.js, generate OG images at build time by calling the API inside generateStaticParams or on demand in a Route Handler. Cache the resulting URL to avoid regenerating on every request.

Cost

Each OG image costs 1 token. For a blog with 500 posts that's 500 tokens — less than $10 at any tier.

Sign up and generate your first OG image in under 2 minutes.