OG ImagesSocial MediaAutomation

How to Generate Open Graph Images Automatically with a Screenshot API

Automate your OG image generation using a screenshot API. Create dynamic social media preview images for every page without manual design work.

2025-05-157 min read

Open Graph images are the preview cards that appear when you share a URL on Twitter, LinkedIn, Slack, or Facebook. Creating them manually for every page is tedious — but with a screenshot API, you can automate the entire process.

The Problem with Manual OG Images

No OG image — Social shares look bland and get fewer clicks
Generic OG image — Every page looks the same, reducing engagement
Manual creation — Doesn't scale beyond a handful of pages

The Automated Solution

Build a lightweight OG image template page, then use a screenshot API to capture it for each piece of content.

Step 1: Create an OG Template Page

Build a simple HTML page designed at 1200×630px (the standard OG image size):

<!DOCTYPE html>
<html>
<body style="width:1200px;height:630px;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(135deg,#1e1b4b,#312e81);
  color:white;font-family:Inter,sans-serif;padding:60px">
  <div>
    <h1 style="font-size:48px;margin:0">{{title}}</h1>
    <p style="font-size:24px;opacity:0.8;margin-top:16px">{{description}}</p>
    <div style="margin-top:32px;font-size:18px;opacity:0.6">pxshot.dev</div>
  </div>
</body>
</html>

Step 2: Host the Template as a Dynamic Route

// /api/og?title=My+Post&description=A+cool+thing
app.get('/api/og', (req, res) => {
  const { title, description } = req.query;
  res.send(renderOgTemplate({ title, description }));
});

Step 3: Capture with PxShot

const ogUrl = encodeURIComponent(
  'https://yoursite.com/api/og?title=My+Amazing+Post'
);
const imageUrl = `https://pxshot.dev/api/capture?url=${ogUrl}&width=1200&height=630&format=png&api_key=YOUR_KEY`;

Step 4: Set the OG Meta Tag

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

Caching Strategy

Generate once on publish, store in R2/S3
Regenerate on content update
Serve with long Cache-Control headers

Try PxShot free and start generating OG images in minutes.