OG Images

Generate Open Graph Images From HTML

Design social cards with the layout tools you already know — HTML and CSS — and render them to pixel-perfect images on demand.

Every page that gets shared needs an Open Graph image, and static placeholders leave clicks on the table. The reliable pattern: build an HTML template with your fonts and brand, interpolate the title/author/data per page, and render it at exactly 1200×630 in a real browser.

Because Screenshotty accepts raw HTML, the whole pipeline is one POST per image — no canvas libraries, no font rasterization bugs, no design tool exports.

Generate an OG image from a template

const html = ogTemplate({ title: post.title, author: post.author });

const res = await fetch("https://api.screenshotty.link/api/v1/screenshot", {
  method: "POST",
  headers: {
    "X-Api-Key": process.env.SCREENSHOTTY_API_KEY,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    html,
    format: "image/png",
    viewport_width: 1200,
    viewport_height: 630,
  }),
});

Everything You Need, Built In

Exact dimensions

Set the viewport to 1200×630 (or any platform spec) and capture precisely that box.

Real web fonts

Google Fonts and custom @font-face render exactly as in Chrome — no metric drift.

Template-friendly

POST the interpolated HTML per request, or capture a parameterized URL of your own /og route.

Cache-ready

response_type=json returns a hosted image URL you can store and serve from your CDN.

Frequently Asked Questions

Should I render OG images from HTML or capture a live URL?

Both work. POSTing HTML is simplest for templates. Capturing a URL (e.g. your own /og/[slug] route) is convenient when the template needs your app's components — point the API at it with viewport 1200×630.

How do I make sure fonts load before capture?

Use ready_event=networkidle and, for icon fonts or late-loading assets, add a small wait_ms buffer. Fonts referenced in the HTML are fetched like in any browser tab.

Is there a free tier to try this?

Yes. 100 screenshots per month free, no credit card required. Paid plans start at $9/month for 2,500 screenshots with $0.004 pay-as-you-go overage.

Can I generate these in bulk when publishing?

Yes — fire one request per page at publish time and store the result, or use webhook_url for async delivery on large back-catalogs.

Start Capturing in Minutes

100 free screenshots per month. No credit card required.

const html = ogTemplate({ title: post.title, author: post.author });

const res = await fetch("https://api.screenshotty.link/api/v1/screenshot", {

method: "POST",

headers: {

"X-Api-Key": process.env.SCREENSHOTTY_API_KEY,

"Content-Type": "application/json",

body: JSON.stringify({

html,

format: "image/png",

viewport_width: 1200,

viewport_height: 630,

}),

});