How to Generate OG Images Automatically for Your Website

February 16, 2026 · 6 min read

Every link shared on Twitter, Slack, Discord, or LinkedIn shows an Open Graph preview image. If you don't set one, your links look boring. If you design them manually, you'll go crazy after 10 blog posts.

The solution: auto-generate OG images using HTML templates and a screenshot API.

The Approach

Design a template in HTML/CSS (1200x630px, the OG standard)
Inject dynamic data (title, author, date, category)
Screenshot it via API to get a PNG
Serve it as your og:image

This is exactly how Vercel's og package works, except you don't need Vercel. Any screenshot API does the job.

Step 1: Create Your HTML Template

Host a simple page that accepts query parameters and renders a card:

<!-- og-template.html -->
<html>
<head>
<style>
  body {
    width: 1200px; height: 630px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #667eea, #764ba2);
    font-family: -apple-system, sans-serif;
    color: white; margin: 0; padding: 60px;
  }
  .card {
    text-align: center;
  }
  h1 { font-size: 56px; line-height: 1.2; margin-bottom: 16px; }
  p { font-size: 24px; opacity: 0.8; }
  .logo { font-size: 20px; margin-top: 32px; opacity: 0.6; }
</style>
</head>
<body>
  <div class="card">
    <h1 id="title"></h1>
    <p id="subtitle"></p>
    <div class="logo">yourbrand.com</div>
  </div>
  <script>
    const params = new URLSearchParams(location.search);
    document.getElementById('title').textContent = params.get('title') || 'My Blog Post';
    document.getElementById('subtitle').textContent = params.get('subtitle') || '';
  </script>
</body>
</html>

Step 2: Screenshot It with GrabShot

# Generate OG image for a specific blog post
curl "https://grabshot.dev/api/screenshot?\
url=https://yourdomain.com/og-template.html?title=My+Amazing+Post\
&width=1200&height=630&format=png" \
  -H "X-API-Key: your-key" \
  --output og-image.png

That's it. One API call, perfect OG image every time.

Step 3: Automate It

For a blog or CMS, generate OG images at build time or on first request:

// Node.js example: generate OG image on demand
const express = require('express');
const fetch = require('node-fetch');
const app = express();

const GRABSHOT_KEY = process.env.GRABSHOT_API_KEY;

app.get('/og/:slug', async (req, res) => {
  const { slug } = req.params;
  const post = await getPostBySlug(slug); // your data source

  const templateUrl = `https://yoursite.com/og-template.html?` +
    `title=${encodeURIComponent(post.title)}` +
    `&subtitle=${encodeURIComponent(post.date)}`;

  const response = await fetch(
    `https://grabshot.dev/api/screenshot?url=${encodeURIComponent(templateUrl)}&width=1200&height=630`,
    { headers: { 'X-API-Key': GRABSHOT_KEY } }
  );

  const buffer = await response.buffer();

  // Cache for 7 days
  res.set('Cache-Control', 'public, max-age=604800');
  res.set('Content-Type', 'image/png');
  res.send(buffer);
});

Then in your HTML:

<meta property="og:image" content="https://yoursite.com/og/my-blog-post">

Design Tips for Great OG Images

Keep text large — OG images are often shown small. 48-60px for titles minimum.
Use high contrast — White text on a gradient or dark background works great.
Include your logo/brand — People should recognize it's from you.
Test on multiple platforms — Twitter crops differently than LinkedIn. Use MetaPeek to preview how your meta tags render.
1200x630px — The universal safe size for all platforms.

The Easiest Way: GrabShot's Built-in OG Parameter

Everything above works, but there's an even simpler approach. On GrabShot's Pro and Business plans, you can generate OG images with zero backend code using the og query parameter.

Here's how it works:

Generate a public OG key from your dashboard (derived from your API key via HMAC)
Add a single meta tag to your HTML
Done. No server-side code needed.

<!-- Just add this to your <head> — that's it -->
<meta property="og:image"
  content="https://grabshot.dev/v1/screenshot?url=https://yoursite.com/blog/my-post&og=ogk_your_public_key&width=1200&height=630">

When Twitter, LinkedIn, or Slack crawls your page, they hit that URL and GrabShot returns a fresh screenshot. No template to build, no server to maintain, no build step. The ogk_ key is safe to put in public HTML because it can only be used for OG image generation, not general API access.

You can combine it with any other GrabShot parameters too:

<!-- OG image with device frame and AI cleanup -->
<meta property="og:image"
  content="https://grabshot.dev/v1/screenshot?url=https://yoursite.com&og=ogk_abc123&device=macbook&cleanup=true&width=1200&height=630">

GrabShot caches the result so subsequent requests are fast. You can refresh the cache anytime from your dashboard.

This is the approach we'd recommend for most use cases. The template method above gives you more design control, but the og parameter gets you 90% of the way with 0% of the effort.

Get OG Images in One Line of HTML

Pro and Business plans include the og parameter. No backend required.

Get Your OG Key →

Why Not Vercel OG?

Vercel's @vercel/og is great if you're on Vercel. But it uses Satori (limited CSS subset), only works in Edge Runtime, and you're locked into their platform.

A screenshot API approach works with any framework, any hosting, and supports full CSS/JS. More flexible, same result.

Generate OG Images with GrabShot

Screenshot any HTML template at 1200x630. Perfect social previews, every time.

Try Free →

Want to see GrabShot in action?

Try our free screenshot tool — no signup required.

Try GrabShot Free →

📧 Developer API Tips

Get practical API tutorials and tools. No spam, unsubscribe anytime.