DEV Community

Vitalii Holben
Vitalii Holben

Posted on

How to Automate OG Image Generation for Your Blog Using a Screenshot API

#screenshot #webdev #api #tutorial

Every blog post needs an OG image. Without one, your links look blank on Twitter, LinkedIn, and Slack — just a plain URL that nobody clicks. Most developers solve this by spinning up a headless browser, loading an HTML template, taking a screenshot, and uploading it somewhere. It works, but now you're maintaining a Puppeteer instance, dealing with font rendering quirks, and burning server resources on something that should be simple.

There's a faster approach: design your OG images as HTML templates and let a screenshot API handle the rendering.

The Idea: HTML Templates as OG Images

Think of your OG image as a tiny webpage. You already know HTML and CSS. Build a 1200×630 template with your blog title, author name, maybe a gradient background — whatever fits your brand. Host it or pass it as raw HTML. Then call an API to screenshot it. Done.

A basic template might look like this:

<div style="width:1200px;height:630px;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(135deg,#1a1a2e,#16213e);
  font-family:Inter,sans-serif;padding:60px">
  <div style="color:#fff;text-align:center">
    <h1 style="font-size:48px;margin:0">{{title}}</h1>
    <p style="font-size:24px;color:#8892b0;margin-top:20px">{{author}} · {{date}}</p>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Replace the placeholders on your server, then send the resulting HTML (or a URL pointing to it) to the API.

Calling the API

With ScreenshotRun, a single curl request captures the rendered template as a PNG:

curl -X POST "https://api.screenshotrun.com/v1/screenshot" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://yourblog.com/og-template?title=My+Post+Title",
    "viewport_width": 1200,
    "viewport_height": 630,
    "format": "png"
  }'
Enter fullscreen mode Exit fullscreen mode

The response gives you the image file. Save it to your CDN, set the og:image meta tag, and you're done. No browser to manage, no Chrome binary eating RAM on your CI server.

Wiring It Into Your Build

If you publish with a static site generator or a CMS, hook this into your build step or post-publish webhook. For each new post:

  1. Generate the template URL with the post's title and metadata.
  2. Call the screenshot API.
  3. Upload the returned image to S3 or your storage of choice.
  4. Set <meta property="og:image"> in the page head.

The whole pipeline runs in a few seconds per post. No headless browser dependencies, no Docker containers for rendering. Your CI stays clean.

Why Not Just Use Puppeteer Directly?

You can. But managing Chromium in production is annoying. Font loading breaks between environments. Lambda has size limits. Cold starts add latency. A screenshot API offloads all of that — you send a request, you get an image. Someone else worries about the browser.

If you want to see more patterns like this, ScreenshotRun has an OG image generator use-case page with additional examples and template ideas.

Quick Tips

  • Keep your template at 1200×630. That's the standard OG image size.
  • Use web-safe fonts or Google Fonts loaded via <link> in your template.
  • Cache aggressively. OG images rarely change after publish.
  • Test with the Twitter Card Validator and Facebook's Sharing Debugger before going live.

That's the whole setup. HTML template, one API call, and your blog posts stop looking naked when someone shares them.

Top comments (0)