We have launched our Form Builder. 🚀 Want to test it?

Blog

Automated Social Media Screenshots: Generate Images from HTML Templates

Social media performance often comes down to one thing: the preview image. If your Open Graph (OG) image looks wrong (cropped, blurry, missing fonts, outdated), clicks drop.

In this guide, you’ll learn how to generate social media screenshots and dynamic OG images automatically from HTML templates using a Screenshot API. We’ll cover:

  • How to build HTML templates for Twitter/X, LinkedIn, and Facebook preview images
  • How to render them reliably (fonts, images, async content)
  • How to automate generation with Make.com and n8n
  • How to integrate a Screenshot API into your app or CMS

TL;DR

  • Use HTML templates to create pixel-perfect OG images and social cards.
  • Generate images via a Screenshot API so you don’t have to run and maintain Puppeteer/Playwright.
  • Automate creation and refresh with Make.com and n8n modules.
  • Use browser interactions (click/wait/type) to handle cookie banners and dynamic pages.

What are automated social media screenshots?

Automated social media screenshots are images generated programmatically (usually PNG) that represent either:

  • A rendered HTML template (recommended for OG images)
  • A screenshot of a live URL (useful for previews, monitoring, or UGC pages)

The key benefit: you can create consistent, branded images at scale for every blog post, product page, or campaign—without manually designing assets.

Why HTML templates are the best way to generate OG images

If you need dynamic OG images, HTML is the most flexible “design tool” you already have:

  • Precise layout: CSS grid/flexbox gives you exact alignment.
  • Brand consistency: reuse a single template across content types.
  • Multi-language & personalization: inject title, author, pricing, KPI numbers, etc.
  • Easy iterations: update design once, regenerate everywhere.

Live demo: generate a screenshot with browser interactions

Below is an interactive generator (same widget used in other CustomJS articles). You can enter any URL, add interactions like clicking cookie banners, and crop a region. Then it generates ready-to-use API code.

Interactive Social Screenshot Generator

Tip: Try a public blog post URL. Add a click action for "Accept" / "Agree" if a cookie banner blocks the page, then capture a clean preview.

Step-by-step: build an OG image template in HTML

Start with a 1200Ă—630 canvas (the most common Open Graph size). Use a fixed layout so it always renders the same.

Minimal OG template

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      body { margin: 0; }
      .card {
        width: 1200px;
        height: 630px;
        display: grid;
        grid-template-rows: 1fr auto;
        padding: 64px;
        box-sizing: border-box;
        background: linear-gradient(135deg, #111827, #312e81);
        color: white;
        font-family: ui-sans-serif, system-ui;
      }
      .title {
        font-size: 72px;
        line-height: 1.05;
        font-weight: 800;
        letter-spacing: -0.02em;
      }
      .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        opacity: 0.9;
        font-size: 26px;
      }
      .badge {
        padding: 10px 16px;
        border-radius: 999px;
        background: rgba(255,255,255,0.12);
      }
    </style>
  </head>
  <body>
    <div class="card">
      <div class="title">Automate your OG images</div>
      <div class="footer">
        <div class="badge">customjs.space</div>
        <div>February 2026</div>
      </div>
    </div>
  </body>
</html>

You can host this HTML as a route in your app (recommended), or generate it on-demand and serve it behind a URL that your Screenshot API can access.

Generate a screenshot via API (cURL + Node.js)

Once your template is available as a URL, capturing it is a simple HTTP request.

cURL example

curl -X POST 'https://e.customjs.io/screenshot' \
  -H 'x-api-key: YOUR_API_KEY' \
  -H 'Content-Type: application/json' \
  -d '{
    "input": {
      "url": "https://your-domain.com/og/post/123",
      "commands": []
    }
  }' \
  > og-image.png

Node.js example

const axios = require('axios');
const fs = require('fs');

async function generateOgImage(url) {
  const response = await axios.post(
    'https://e.customjs.io/screenshot',
    {
      input: {
        url,
        commands: []
      }
    },
    {
      headers: {
        'x-api-key': 'YOUR_API_KEY',
        'Content-Type': 'application/json'
      },
      responseType: 'arraybuffer'
    }
  );

  fs.writeFileSync('og-image.png', response.data);
}

generateOgImage('https://your-domain.com/og/post/123');

For advanced use cases you can add commands like waits, clicks, and typing (use the widget above to generate a correct command list).

Automation workflows: Make.com and n8n

If you don’t want to write code, you can automate OG image generation with CustomJS modules in Make.com and n8n. Common workflows:

  • CMS publish: when a post is published, generate OG image and upload to CDN/storage.
  • Refresh: regenerate OG images when branding changes.
  • Monitoring: screenshot competitor pages daily and compare changes.

For deeper integration details, see the Native API documentation.

Best practices

  • Use a fixed viewport: keep OG templates at 1200Ă—630 for consistent cropping.
  • Preload fonts: self-host or use reliable font sources to avoid fallbacks.
  • Wait for async content: if you render charts/QR codes, use a "render done" flag or a wait command.
  • Keep templates lightweight: fewer external assets = faster, more reliable rendering.
  • Cache outputs: store generated images and only regenerate when inputs change.

FAQ

1. Should I screenshot a live page or render an HTML template?

For OG images, render a dedicated HTML template route and screenshot that. Live pages are great for previews, monitoring, and link cards.

2. How do I handle cookie banners?

Use a click command targeting the banner’s accept button. The interactive widget makes this easy: click the element and copy the generated API code.

3. Can I generate multiple sizes (Twitter, LinkedIn, etc.)?

Yes. Either parameterize your template (size query parameter) or create separate routes per platform and call the Screenshot API for each.

4. Do you support Make.com and n8n?

Yes. CustomJS offers native Make.com and n8n modules, which is ideal for marketing automation and content pipelines.

Conclusion

Automated social media screenshots and OG images help you ship consistently branded previews for every piece of content—without design bottlenecks.

Build HTML templates, capture them with a Screenshot API, and automate the pipeline with Make.com or n8n.

Start free with 600 screenshots per month

Related Articles

Continue reading on similar topics