Your first OG image in 60 seconds

Step 1 — Pick a template in the Playground

Open the Playground, choose a template (article or minimal for most sites), and fill title + optional subtitle.

Leave demo=1 on — during open access there is no watermark and no quota.

• Playground: live PNG preview at 1200×630
• Copy the HTTPS image URL from the preview panel
• Prefer short titles (~60–80 chars) so Slack/LinkedIn do not clip the meaning

Step 2 — Paste into HTML

Put the absolute URL in both Open Graph and Twitter tags:

<meta property="og:image" content="https://www.webmorp.art/ogkit/api/og/article?demo=1&title=Hello%20OGKit" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://www.webmorp.art/ogkit/api/og/article?demo=1&title=Hello%20OGKit" />

Step 3 — Next.js App Router (optional)

If you use Next.js metadata API:

import type { Metadata } from "next";

const og = new URL("https://www.webmorp.art/ogkit/api/og/article");
og.searchParams.set("demo", "1");
og.searchParams.set("title", "Hello OGKit");

export const metadata: Metadata = {
  openGraph: { images: [{ url: og.toString(), width: 1200, height: 630 }] },
  twitter: { card: "summary_large_image", images: [og.toString()] },
};

Step 4 — Verify with debuggers

• Facebook Sharing Debugger — scrape and confirm the image
• LinkedIn Post Inspector — refresh if an old card is cached
• Twitter/X Card Validator — summary_large_image
• See Tools for links, and Caching & rescrape when platforms keep old images

Step 5 — Production key (when ready)

Sign in, create an API key, replace demo=1 with key=… (or Authorization: Bearer). Keep keys server-side — never commit them to the client bundle.

For public HTML, prefer signed URLs (see the Signed URLs guide).