Generate dynamic OG preview images automatically — render an HTML template in Chromium and get a 1200x630 PNG back in one API call. No Puppeteer server, no design tool, no manual work.
curl https://api.snapapi.pics/v1/screenshot -H "X-Api-Key: sk_live_YOUR_KEY" -d '{
"url": "https://yoursite.com/og-template?title=My+Article&author=Jane",
"width": 1200, "height": 630,
"format": "png"
}'The pattern is simple: create an HTML page at a route like /og-image that reads title, description, and author from query parameters and renders them into a visually styled template. Set the viewport to exactly 1200x630 pixels — the OG image standard size. Call SnapAPI to capture a screenshot of that URL and return the PNG.
Your OG template can use any CSS, fonts, and images. It is a regular web page. Use CSS Grid for layout, load your brand font from Google Fonts or serve it locally, add your logo as an SVG, and style the title and description with your brand colors. SnapAPI runs the full Chromium renderer — what you see in your browser is exactly what the OG image contains.
Cache the generated images using a content-addressed key derived from the title and description. On first request, call SnapAPI and store the result. On subsequent requests, serve from cache. This eliminates API calls for repeat social shares and keeps your costs predictable as your content library grows.
Next.js has a built-in ImageResponse API for OG images, but it uses a custom React renderer with limited CSS support. For full CSS fidelity — gradients, box shadows, web fonts, complex layouts — use SnapAPI to render your actual React component as a screenshot.
// pages/api/og.js
import { NextResponse } from 'next/server';
export async function GET(request) {
const { searchParams } = new URL(request.url);
const title = searchParams.get('title') ?? 'Untitled';
const ogUrl = `${process.env.SITE_URL}/og-template?title=${encodeURIComponent(title)}`;
const resp = await fetch('https://api.snapapi.pics/v1/screenshot', {
method: 'POST',
headers: { 'X-Api-Key': process.env.SNAP_API_KEY, 'Content-Type': 'application/json' },
body: JSON.stringify({ url: ogUrl, width: 1200, height: 630, format: 'png' })
});
const data = await resp.json();
const imgBuffer = Buffer.from(data.image, 'base64');
return new NextResponse(imgBuffer, { headers: { 'Content-Type': 'image/png', 'Cache-Control': 'public, max-age=31536000' } });
}Keep text large and readable at thumbnail size — most social previews display OG images at 300-400px wide. Use a minimum font size of 48px for titles and 28px for subtitles. High contrast text on a solid or gradient background performs best across platforms and in both dark and light mode feed views.
Twitter and LinkedIn cache OG images aggressively. After updating an OG image, use Twitter Card Validator and LinkedIn Post Inspector to force a cache refresh. Both tools fetch the current image when you submit a URL for validation.
Test your OG template at multiple viewport sizes — some platforms request OG images in non-standard sizes. The 1200x630 size is the recommended standard for Twitter, LinkedIn, Facebook, and Slack. Always set both og:image and og:image:width and og:image:height meta tags so platforms know the dimensions without downloading the image first.
An OG image template is a minimal HTML page that reads parameters from the URL query string and renders them into a styled layout. Keep the HTML small and fast-loading — the page only needs to render once per unique image. Use inline CSS and avoid heavy JavaScript frameworks to keep render time under 500ms.
<!-- /og-template.html -->
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@700;800&display=swap" rel="stylesheet">
<style>
* { margin: 0; box-sizing: border-box; }
body {
width: 1200px; height: 630px; overflow: hidden;
background: linear-gradient(135deg, #0f1117 0%, #1a1f2e 100%);
font-family: Inter, sans-serif; color: #fff;
display: flex; flex-direction: column;
justify-content: center; padding: 80px;
}
.title { font-size: 64px; font-weight: 800; line-height: 1.1; margin-bottom: 24px; }
.meta { font-size: 28px; color: #94a3b8; }
.logo { position: absolute; top: 48px; left: 80px; }
</style>
</head><body>
<div class="logo">YourBrand</div>
<div class="title" id="title"></div>
<div class="meta" id="meta"></div>
<script>
const p = new URLSearchParams(location.search);
document.getElementById("title").textContent = p.get("title") || "";
document.getElementById("meta").textContent = p.get("author") || "";
</script>
</body></html>Deploy this template at a stable URL on your domain. When generating an OG image, call SnapAPI with this URL plus the title and author as query parameters. The SnapAPI screenshot endpoint renders the page in a 1200x630 Chromium viewport and returns the PNG — matching the exact dimensions Twitter, LinkedIn, and Facebook expect.
Generate OG images lazily — on first request, call SnapAPI, store the result, and redirect to the cached URL. On subsequent requests, serve from cache without calling the API. Use a Redis key or a database column on your posts table to store the generated image URL. For most content sites, 90%+ of pages are only shared once — the lazy approach avoids generating images for pages that are never shared.
An alternative is eager generation at publish time — when a post is published, enqueue a background job that generates and caches the OG image immediately. This eliminates any latency on first social share, at the cost of generating images for pages that may never be shared. For content platforms with high publish volume, lazy generation is usually more cost-efficient.
SaaS dashboards and user-generated content platforms benefit enormously from dynamic OG images. When a user shares a chart, report, or public profile from your product, the OG preview is often the deciding factor in whether someone clicks the link. A generic OG image with your logo performs significantly worse than one that shows the actual content being shared.
For shareable dashboards, capture a screenshot of the actual dashboard at the shared URL using SnapAPI. If the dashboard is behind authentication, use a signed URL with a short-lived token that grants read-only access to the specific view. Crop the screenshot to the most informative area using the clip parameter, then use it as the OG image.
For documentation sites and blogs deployed with GitHub Actions, add a step that calls SnapAPI to regenerate OG images for new or updated pages. Store generated images in your repository or an S3 bucket, and reference them in your og:image meta tags. This ensures every page always has a fresh, up-to-date OG image without any on-demand generation infrastructure.
Sign up at snapapi.pics to get started. The free tier includes 200 captures per month — enough to generate OG images for a site with a few hundred pages. The Starter plan at $19/month covers 5,000 captures — sufficient for a documentation site with thousands of pages, or a high-traffic blog with frequent new posts.
Any language that can make an HTTP POST can generate OG images. Python Django example:
import requests, base64
from django.core.cache import cache
def get_og_image(title: str, author: str) -> bytes:
cache_key = f"og:{hash(title + author)}"
cached = cache.get(cache_key)
if cached: return cached
og_url = f"https://yoursite.com/og-template?title={title}&author={author}"
resp = requests.post(
"https://api.snapapi.pics/v1/screenshot",
headers={"X-Api-Key": settings.SNAP_API_KEY},
json={"url": og_url, "width": 1200, "height": 630, "format": "png"}
)
img_bytes = base64.b64decode(resp.json()["image"])
cache.set(cache_key, img_bytes, timeout=None) # cache forever
return img_bytesCan I use custom fonts? Yes — load any Google Font or self-hosted font in your OG template HTML. SnapAPI fetches all external resources before capturing.
How long does generation take? Typically 1-3 seconds. For OG images requested during a crawl by Twitter or LinkedIn, this is well within acceptable response time.
Can I inject SVG logos? Yes — inline SVG in your HTML template or reference hosted SVGs. Both render correctly in Chromium.
Sign up at snapapi.pics for 200 free captures per month. No credit card required. OG image generation uses the same screenshot endpoint as all other captures — no special plan needed.
SnapAPI is used by content platforms, SaaS products, developer tools, and documentation sites to generate OG images automatically at scale. The screenshot endpoint handles JavaScript rendering, web font loading, and CSS animations — ensuring your OG template renders exactly as designed. Custom viewport sizes, image formats (PNG, JPEG, WebP), and quality settings are all supported. Try it free at snapapi.pics with 200 captures per month on the free tier, no credit card required.