Auto OG images from a page URL

Endpoint

GET /api/og/auto?url=https://example.com&key=KEY (or demo=1 without a key). Optional template=article|minimal|… forces a template; otherwise OGKit picks article when an image is found, else minimal.

https://www.webmorp.art/ogkit/api/og/auto?demo=1&url=https%3A%2F%2Fexample.com

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

What metadata is extracted

• title — og:title → twitter:title → <title>
• description — og:description → twitter:description → meta description (used as subtitle)
• image — og:image → twitter:image (absolute URL)
• favicon — link rel icon / apple-touch-icon (mapped to logo when applicable)
• theme-color — used as accent when it is a #RRGGBB value

Overrides

Any normal OG query param overrides extracted values: title, subtitle, image, logo, accent, theme, pattern, and template-specific fields. Use overrides when the remote page title is noisy or you want a launch-specific card.

Safety and limits

• Only http/https URLs; localhost and private IPs are rejected (invalid_url)
• Fetch timeout ~5 seconds; large HTML is truncated before parse
• If title cannot be found → metadata_not_found (422)
• Same auth, quota, and signing rules as /api/og/{template}

When to use auto vs explicit templates

Prefer explicit /api/og/{template} when you already have structured fields in your CMS or database — titles stay clean and cards stay on-brand.

Prefer /api/og/auto for aggregators, link-unfurl tools, changelog mirrors, or “share this external URL” flows where you do not control the source HTML.

Next.js pattern

export async function generateMetadata({ params }) {
  const image = new URL("https://www.webmorp.art/ogkit/api/og/auto");
  image.searchParams.set("key", process.env.OGKIT_KEY!);
  image.searchParams.set("url", `https://example.com/posts/${params.slug}`);
  image.searchParams.set("template", "article");
  return {
    openGraph: { images: [{ url: image.toString(), width: 1200, height: 630 }] },
    twitter: { card: "summary_large_image", images: [image.toString()] },
  };
}