Use Case

OG Image Generation
Dynamic Social Previews via API

Generate beautiful social preview images from HTML templates. Design your OG image with CSS, inject dynamic content (titles, authors, dates), and get a pixel-perfect 1200x630 PNG back. Works with Twitter, Facebook, LinkedIn, and Slack.

Start Free — 100 requests/month
The problem

Static images don't scale

Most sites use a single static OG image for every page — or worse, none at all. Links shared on social media look generic and get ignored. But creating unique OG images manually for every blog post, product page, or documentation article doesn't scale.

With SnapRender, you design one HTML/CSS template and dynamically inject content for each page. The API renders it as a crisp PNG image — ready to serve as your og:image meta tag.

Code examples

Generate OG images in any language

Python
import requests

html_template = """
<html>
<head>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap" rel="stylesheet">
  <style>
    body {
      margin: 0; width: 1200px; height: 630px;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      font-family: 'Inter', sans-serif; color: white;
    }
    .card {
      text-align: center; padding: 60px;
    }
    h1 { font-size: 48px; margin: 0 0 16px; }
    p { font-size: 24px; opacity: 0.8; }
  </style>
</head>
<body>
  <div class="card">
    <h1>How to Build a REST API in 2026</h1>
    <p>by Jane Smith &middot; April 12, 2026</p>
  </div>
</body>
</html>
"""

resp = requests.post('https://api.snaprender.dev/v1/screenshot',
    headers={'Authorization': 'Bearer YOUR_KEY'},
    json={
        'html': html_template,
        'width': 1200,
        'height': 630,
        'format': 'png'
    })

with open('og-image.png', 'wb') as f:
    f.write(resp.content)
Node.js
const html = `
<html>
<head>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap" rel="stylesheet">
  <style>
    body {
      margin: 0; width: 1200px; height: 630px;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      font-family: 'Inter', sans-serif; color: white;
    }
    .card { text-align: center; padding: 60px; }
    h1 { font-size: 48px; margin: 0 0 16px; }
    p { font-size: 24px; opacity: 0.8; }
  </style>
</head>
<body>
  <div class="card">
    <h1>${title}</h1>
    <p>by ${author} &middot; ${date}</p>
  </div>
</body>
</html>`;

const res = await fetch('https://api.snaprender.dev/v1/screenshot', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    html,
    width: 1200,
    height: 630,
    format: 'png'
  })
});

const buffer = Buffer.from(await res.arrayBuffer());
// Upload to S3, serve from CDN, etc.
How it works

Three steps to dynamic OG images

1

Design your HTML template

Create an HTML/CSS template with placeholders for dynamic content. Use any fonts, gradients, images, or layouts you want. The template is rendered in a real browser, so everything works.

2

Send it to the Screenshot API

POST your HTML to /v1/screenshot with width: 1200 and height: 630. Inject your dynamic content (post title, author name, date) into the template before sending.

3

Cache and serve

Store the generated PNG in your CDN (S3, R2, etc.) and reference it in your og:image meta tag. Regenerate only when the content changes.

Simple pricing for OG images

Each OG image generation counts as one request. No per-pixel charges, no resolution multipliers.

$0
100 images/mo
$9
1,500 images/mo
$29
5,000 images/mo
Start Free

Frequently asked questions

An OG (Open Graph) image is the preview image that appears when you share a link on social media platforms like Twitter, Facebook, LinkedIn, and Slack. A well-designed OG image dramatically increases click-through rates on shared links.

You send an HTML template to SnapRender's /screenshot endpoint with your dynamic content (title, author, date, etc.). SnapRender renders it in a headless browser and returns a PNG or JPEG image at your specified dimensions — typically 1200x630px for OG images.

Yes. Your HTML template can include any CSS, web fonts (via Google Fonts or inline @font-face), gradients, images, and complex layouts. SnapRender renders the full page just like a browser would.

The recommended size is 1200x630 pixels (1.91:1 ratio). This works well across Twitter, Facebook, LinkedIn, and Slack. SnapRender lets you set exact viewport dimensions via the width and height parameters.

Typical generation time is 1-3 seconds per image. For high-traffic sites, you should cache generated images (e.g., in S3 or Cloudflare R2) and only regenerate when content changes.

SnapRender starts at $9/mo for 1,500 requests. Each OG image generation counts as one request. The free tier includes 100 requests/month — enough to test your implementation and generate images for a small blog.

Make every link stand out.

Dynamic OG images in 3 lines of code. Start free with 100 images/month.

Start Free — 100 requests/month