Guides / Open Graph images

Open Graph images

Generate branded preview images for Facebook, LinkedIn, Slack, Discord, and Twitter cards. Use the structured endpoint for fast social cards, or render your own HTML template through the capture API when you need total layout control.

Overview

Most Open Graph images use a 1200x630 canvas. ScreenNabster's /api/v1/og endpoint builds that canvas from safe structured fields, then sends the generated HTML through the same Playwright worker, quota checks, cache support, and billing rules as normal captures.

Structured cards

Choose a built-in template, pass the text and optional image, and save the returned bytes as your page's social preview asset.

terminal

curl -X POST "https://screennabster.com/api/v1/og" \
  -H "X-API-Key: pk_live_your_key_here" \
  -H "Content-Type: application/json" \
  -d "{\"template\":\"hero\",\"title\":\"Open Graph images for every article\",\"subtitle\":\"Generate branded social previews with one API call.\",\"brand\":\"ScreenNabster\",\"output\":\"png\"}" \
  --output og.png

body.json

{
  "template": "split",
  "title": "Ship social cards faster",
  "subtitle": "Structured fields, branded templates, and Playwright rendering.",
  "brand": "ScreenNabster",
  "image_url": "https://example.com/cover.png",
  "theme": "dark",
  "response_mode": "json"
}

Custom HTML templates

For ScreenshotOne-style full control, generate your own HTML on your server and pass it to /api/v1/capture. Set the viewport to social-card dimensions and request a raster output.

capture-og.mjs

const html = `<!doctype html>
<html>
  <body style="width:1200px;height:630px;margin:0;display:grid;place-items:center;background:#020617;color:white">
    <main style="font-family:Inter,system-ui,sans-serif;text-align:center;padding:80px">
      <p style="font-size:28px;color:#38bdf8">ScreenNabster</p>
      <h1 style="font-size:76px;line-height:0.95;margin:0">My article title</h1>
    </main>
  </body>
</html>`;

const res = await fetch("https://screennabster.com/api/v1/capture", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "X-API-Key": process.env.SCREENNABSTER_API_KEY,
  },
  body: JSON.stringify({
    html,
    screen_width: 1200,
    screen_height: 630,
    output: "png",
  }),
});

Meta tag URLs

Social crawlers cannot send custom request headers. For direct og:image URLs, generate a signed public GET URL using your public ak_live_* access key and signing secret. Include expires (Unix seconds): it must be in the future and within 15 minutes of when the crawler requests the image. The signature is HMAC-SHA256 over the exact query string before the signature parameter is appended.

meta.html

<meta property="og:image" content="https://screennabster.com/api/v1/capture?html=...&screen_width=1200&screen_height=630&output=png&access_key=ak_live_...&expires=...&signature=..." />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://screennabster.com/api/v1/capture?html=...&screen_width=1200&screen_height=630&output=png&access_key=ak_live_...&expires=...&signature=..." />

Guidelines

Use 1200x630 for Facebook, LinkedIn, Slack, and most Open Graph previews.
Keep title text short enough to fit at large sizes; test long article titles.
Cache generated assets when your page content changes infrequently.
Prefer structured `/api/v1/og` cards unless you need fully custom HTML.