Playground

Change the text and style, watch a real image render through the OGKit engine, then copy a snippet for your site. Signed in, it uses your own template key.

TitleSubtitleSite label

ToneLayoutPatternAlign

Live render via the same engine as /api/og.

You're seeing a demo key. Sign in and the snippets below fill in your real template key automatically.

Endpoint URL

https://ogkit.org/api/og?key=YOUR_KEY&url={{canonical_url}}

HTML — <head>

<meta property="og:image" content="https://ogkit.org/api/og?key=YOUR_KEY&url={{canonical_url}}" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://ogkit.org/api/og?key=YOUR_KEY&url={{canonical_url}}" />

Next.js — generateMetadata

// app/your-page/page.tsx — pass each page's canonical URL
export async function generateMetadata() {
  const pageUrl = 'https://yoursite.com/your-page'
  const image = 'https://ogkit.org/api/og?key=YOUR_KEY&url=' + encodeURIComponent(pageUrl)
  return {
    openGraph: { images: [image] },
    twitter: { card: 'summary_large_image', images: [image] },
  }
}