Automate OG Image Generation for Your Blog or SaaS

February 19, 2026 · 6 min read

Every time you share a link on Twitter, Slack, or Discord, the platform fetches your OG image. If you don't have one, your link looks plain and gets fewer clicks. If you design them manually, it doesn't scale. Here's how to automate it.

The Problem with Manual OG Images

Most teams either skip OG images entirely or create them in Figma/Canva one at a time. Neither scales. If you have a blog with 50 posts, a SaaS with dynamic pages, or a directory with thousands of listings, you need automation.

Approach 1: HTML Template + Screenshot API

The most flexible approach: create an HTML template for your OG image, then screenshot it.

Step 1: Create a simple HTML page that renders your OG image at 1200x630:

<!-- og-template.html?title=My+Blog+Post -->
<div style="width:1200px;height:630px;background:#0f172a;
  display:flex;align-items:center;justify-content:center;
  font-family:Inter;color:white;padding:60px">
  <h1 style="font-size:48px">{{title}}</h1>
</div>

Step 2: Screenshot it with GrabShot:

curl "https://grabshot.dev/v1/screenshot?\
url=https://yoursite.com/og-template?title=My+Blog+Post\
&width=1200&height=630&format=png" \
  -H "X-API-Key: your_key" -o og-image.png

That's it. You now have a pixel-perfect OG image generated from HTML/CSS.

Approach 2: Screenshot Your Actual Page

Even simpler: just screenshot the page itself and use that as the OG image. GrabShot can add device frames to make it look polished:

// Your page's og:image meta tag, dynamically generated:
const ogUrl = `https://grabshot.dev/v1/screenshot?` +
  `url=${encodeURIComponent(pageUrl)}` +
  `&width=1200&height=630&frame=macbook` +
  `&key=your_og_key`;

// In your HTML head:
// <meta property="og:image" content="${ogUrl}">

GrabShot caches the result, so repeated fetches by social platforms are fast and don't count against your quota.

Approach 3: AI-Cleaned Screenshots

Real websites have cookie banners, popups, and notification prompts. GrabShot's AI cleanup feature (paid plans) automatically removes these distractions:

curl "https://grabshot.dev/v1/screenshot?\
url=https://example.com&width=1200&height=630\
&cleanup=true&frame=browser" \
  -H "X-API-Key: your_key" -o clean-og.png

Integrating with Your Framework

Most frameworks support dynamic meta tags. Here's how to wire it up:

Next.js (App Router):

export function generateMetadata({ params }) {
  const ogImage = `https://grabshot.dev/v1/screenshot?` +
    `url=${encodeURIComponent(`https://yoursite.com/og/${params.slug}`)}`+
    `&width=1200&height=630&key=your_og_key`;
  return {
    openGraph: { images: [ogImage] }
  };
}

Hugo / Static Sites: Use a build script that pre-generates OG images for each page and saves them to your static directory.

Cost and Scaling

With caching, most blogs need only a few dozen unique screenshots. GrabShot's free plan (25/month) covers small blogs. The Starter plan ($9/month, 500 screenshots) handles most SaaS products. OG images are cached aggressively, so the actual cost is usually just one screenshot per page.

Get Started

Sign up for a free GrabShot API key and start generating OG images in minutes:

Get Your Free API Key →