< cd /blog

How to Generate Open Graph Images Automatically

Feb 14, 2026 | 4 min read

When you share a link on Twitter, LinkedIn, Slack, or Discord, the platform fetches the page’s Open Graph meta tags to display a rich preview. The most important tag? og:image. A good preview image can mean the difference between someone clicking your link or scrolling past it.

But creating unique OG images for every page is tedious. Here’s how to automate it.

What are Open Graph images?

Open Graph images are the preview images that appear when you share a URL on social media. They’re defined by the og:image meta tag in your page’s HTML:

html

<meta property="og:image" content="https://example.com/og-image.png" />

Without this tag, platforms either show nothing or try to grab a random image from your page — which usually looks terrible.

The manual approach (and why it doesn’t scale)

You could create each OG image in Figma or Canva. For a landing page or a handful of blog posts, this works fine. But what about:

A blog with 50+ posts
An e-commerce site with thousands of products
A SaaS app where users create public profiles or projects
Documentation sites with dozens of pages

Manually creating images for all of these isn’t realistic.

Automate it with a screenshot API

The idea is simple: create an HTML template for your OG image, serve it at a URL, and use a screenshot API to capture it as an image.

Step 1: Create an OG image template

Create an HTML page styled to look like your OG image. The standard OG image size is 1200x630 pixels.

html<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            width: 1200px;
            height: 630px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 60px;
            background: #0a0a0a;
            color: #33ff33;
            font-family: monospace;
            box-sizing: border-box;
        }
        h1 { font-size: 48px; margin-bottom: 20px; }
        p { font-size: 24px; color: #888; }
    </style>
</head>
<body>
    <h1>Your Post Title Here</h1>
    <p>screenshot-api.pro</p>
</body>
</html>

Step 2: Make it dynamic

Use query parameters to customize the title. If you’re using Express:

javascriptapp.get('/og-image', (req, res) => {
    const title = req.query.title || 'Screenshot API';
    res.send(`
        <!DOCTYPE html>
        <html>
        <head>
            <style>
                body {
                    margin: 0;
                    width: 1200px;
                    height: 630px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    padding: 60px;
                    background: #0a0a0a;
                    color: #33ff33;
                    font-family: monospace;
                    box-sizing: border-box;
                }
                h1 { font-size: 48px; margin-bottom: 20px; }
                p { font-size: 24px; color: #888; }
            </style>
        </head>
        <body>
            <h1>${title}</h1>
            <p>screenshot-api.pro</p>
        </body>
        </html>
    `);
});

Step 3: Capture it with the Screenshot API

bashcurl -X POST https://screenshot-api.pro/api/screenshot \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://yoursite.com/og-image?title=How+to+Generate+OG+Images",
    "width": 1200,
    "height": 630
  }' \
  -o og-image.png

You now have a perfectly sized OG image generated from your template.

Step 4: Use it in your meta tags

html<meta property="og:image" content="https://yoursite.com/images/og/your-post.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Automating the whole pipeline

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

javascriptconst fs = require('fs');

async function generateOGImage(title, outputPath) {
    const response = await fetch('https://screenshot-api.pro/api/screenshot', {
        method: 'POST',
        headers: {
            'X-API-Key': process.env.SCREENSHOT_API_KEY,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            url: `https://yoursite.com/og-image?title=${encodeURIComponent(title)}`,
            width: 1200,
            height: 630,
            format: 'png'
        })
    });

    const buffer = await response.arrayBuffer();
    fs.writeFileSync(outputPath, Buffer.from(buffer));
}

Run this as part of your build step or as a script whenever you publish a new post.

Tips for great OG images

Keep text large and short — It needs to be readable at thumbnail size
Use high contrast — Dark background with bright text, or vice versa
Include your brand — Logo or site name so people recognize the source
Test with validators — Use the Twitter Card Validator and Facebook Sharing Debugger to preview how your images look
Use 1200x630 — This is the recommended size that works across all platforms

Summary

Automating OG image generation saves hours of manual design work and ensures every page on your site has a polished social media presence. A screenshot API makes this trivial — create an HTML template, capture it as an image, done.

Get your free API key to start generating OG images today.