How to Generate Open Graph Images Automatically with a Screenshot API

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

Most developers either skip OG images entirely or create a single generic one. Neither approach is ideal:

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

Create an endpoint that accepts query parameters and renders the template:

// /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&key=YOUR_KEY`;

Step 4: Set the OG Meta Tag

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

Caching Strategy

OG images don't change often, so cache aggressively:

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

Results

With this approach, every page on your site gets a unique, branded social preview card — automatically. No design tools, no manual exports, no broken images.

Try PxShot free and start generating OG images in minutes.