OG image API

Base URL

Use your deployed app root (e.g. NEXT_PUBLIC_APP_URL). If the app is mounted under a path, include it (see basePath / NEXT_PUBLIC_BASE_PATH in this project).

Example base: https://www.webmorp.art

Authentication

Choose one of for production usage:

• Query: ?key=ogk_live_…
• Header: Authorization: Bearer ogk_live_…

Create keys from the dashboard after you sign in. For evaluation, add demo=1 and omit the key. Demo images are watermarked.

Endpoint

GET /api/og/{template}

Replace {template} with one of the slugs in the table below. Query parameters follow (see search params, excluding key when you use a header for auth).

https://www.webmorp.art/api/og/minimal?key=KEY&title=My+Page

https://www.webmorp.art/api/og/minimal?demo=1&title=My+Page&theme=dark&accent=%232563eb

Auto-generate from a URL

Use /api/og/auto when you want OGKit to fetch a page, extract metadata, and choose an article or minimal card. You can still override fields with query parameters.

https://www.webmorp.art/api/og/auto?key=KEY&url=https%3A%2F%2Fexample.com&template=article

Templates

Query parameters

Empty values are dropped. All values should be URL-encoded.

Errors (JSON body)

Next.js — opengraph-image alternative

Point metadata.openGraph.images at a fully qualified OGKit URL (or use /api/og/… on the same origin).

export const metadata = {
  title: { absolute: "My post — OGKit" },
  openGraph: {
    title: "My post",
    images: ["https://www.webmorp.art/api/og/article?key=KEY&title=My+post&author=ACME"]
  },
  twitter: {
    card: "summary_large_image",
    images: ["https://www.webmorp.art/api/og/article?key=KEY&title=My+post&author=ACME"]
  }
};

Signed URLs and domain allowlists

Paid keys can require signed URLs and domain claims from the dashboard. Sign the canonical path and sorted query string, excluding sig, with HMAC-SHA256 using the full API key as the secret.

// pseudo-code
const url = new URL("https://www.webmorp.art/api/og/minimal?key=KEY&title=Hello&domain=example.com");
url.searchParams.sort();
const sig = hmacSha256(fullApiKey, url.pathname + "?" + url.searchParams.toString());
url.searchParams.set("sig", sig);

Guides and comparisons

Plain fetch

const u = new URL("https://www.webmorp.art/api/og/minimal");
u.searchParams.set("key", process.env.OGKIT_KEY!);
u.searchParams.set("title", "Hello");
const r = await fetch(u);
if (!r.ok) throw new Error(String(r.status));
const buf = await r.arrayBuffer();
// e.g. write to disk or return new Response(buf, { headers: { "Content-Type": "image/png" } })

LLM and crawler discovery

For coding agents and search systems that ingest plain-text site maps, use /llms.txt (same facts at /llm.txt). It lists endpoints, templates, pricing summary, and deep links to comparisons and use cases.