Open Graph image API

Generate cards at build time

Fetch one card per page during your static build and save it next to the page. The key stays in your CI secrets and the card is served from your own domain.

for (const post of posts) {
  const q = new URLSearchParams({ title: post.title, subtitle: post.date, site: "acme.dev", template: "split" });
  const res = await fetch("https://shotkiln.com/v1/og?" + q, { headers: { "x-api-key": process.env.SHOTKILN_KEY } });
  await fs.writeFile(`public/og/${post.slug}.png`, Buffer.from(await res.arrayBuffer()));
}

<meta property="og:image" content="https://acme.dev/og/release-2-4.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">

Signed URLs for og:image tags

A signed URL points the og:image tag at Shotkiln directly, so there is no build step and no file to host. The tag holds your key id and a signature, never the API key, and nobody can change the text to draw other cards on your quota. Get the secret once with POST /v1/keys/signing-secret, then sign each URL on your server. The docs have the full algorithm and a Python version.

import { createHmac } from "node:crypto";
const enc = encodeURIComponent;
const params = { title: post.title, template: "split", site: "acme.dev", kid: process.env.SHOTKILN_KID };
const qs = Object.entries(params).sort(([a], [b]) => (a < b ? -1 : 1)).map(([k, v]) => enc(k) + "=" + enc(v)).join("&");
const sig = createHmac("sha256", process.env.SHOTKILN_SIGNING_SECRET).update("/v1/og?" + qs).digest("hex");
const ogImage = "https://shotkiln.com/v1/og?" + qs + "&sig=" + sig;

Next.js metadata

In the App Router, generate the card when the page is built or revalidated, store it, and point openGraph.images at the stored file. Or put a signed URL in openGraph.images and skip storing the file.

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    openGraph: { images: [{ url: `/og/${post.slug}.png`, width: 1200, height: 630 }] },
  };
}

Compared with other OG image tools

@vercel/og (Satori) runs in your own app and is free, but supports a subset of CSS and you maintain the fonts and layout. HTML/CSS to Image ($14 for 1,000) and Bannerbear ($49 for 1,000 credits) render custom designs from template editors. CaptureAPI also has an OG endpoint, with Starter at the same $4.50 per 1,000 as Shotkiln. Shotkiln has fixed templates instead of an editor, and signed URLs so the card URL can sit in an og:image tag.