How to Generate OG Images with a Screenshot API

Every time you share a link on Twitter, LinkedIn, or Slack, the platform fetches your Open Graph (OG) image. A good OG image gets clicks. A missing one gets ignored.

The problem? Creating unique OG images for every blog post, product page, or user profile is tedious. Designing them in Figma doesn't scale. Canva templates look generic.

The solution: design your OG image once as an HTML/CSS template, then render it to PNG via a screenshot API every time you publish new content.

How it works

1. Design your template — build a 1200x630 HTML card with your brand colors, logo, and dynamic text placeholders.
2. Inject content — replace placeholders with your post title, author, date.
3. Screenshot it — POST the HTML to the Screenshot API with a CSS selector targeting your card element.
4. Serve it — use the returned PNG as your og:image meta tag.

Example: dynamic OG image

curl -X POST https://screenshotapis.org/v1/screenshot \
  -H "X-Api-Key: sk_live_your_key" \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<div id=\"og\" style=\"width:1200px;height:630px;background:#1e3a8a;color:#fff;display:flex;align-items:center;justify-content:center;font-family:sans-serif\"><h1 style=\"font-size:48px\">My Blog Post Title</h1></div>",
    "selector": "#og",
    "format": "png"
  }' --output og-image.png

Why this beats other approaches

• vs. Figma/Canva — fully automated. No manual design per post.
• vs. Canvas/Sharp — use real HTML/CSS. Supports any font, flexbox, gradients. No pixel-pushing in code.
• vs. self-hosted Puppeteer — no browser infrastructure. One API call, done.

Pro tips

• Use device_scale_factor: 2 for retina-quality images
• Keep text large — OG images display small in feeds
• Cache the generated image — you only need to render it once per page
• Test with the OpenGraph debugger