Guides

Framework guides

The pattern is always the same: build the endpoint URL with your template key and the page's own canonical URL, then expose it as your og:image. OGKit reads that URL for the page's real title and description. Replace YOUR_KEY below with your real key.

Next.js (App Router)

app/blog/[slug]/page.tsx

export async function generateMetadata({ params }) {
  const pageUrl = `https://yoursite.com/blog/${params.slug}`
  const image =
    'https://ogkit.org/api/og?key=YOUR_KEY&url=' +
    encodeURIComponent(pageUrl)
  return {
    openGraph: { images: [image] },
    twitter: { card: 'summary_large_image', images: [image] },
  }
}

Astro

src/pages/[...slug].astro

---
const pageUrl = new URL(Astro.url.pathname, Astro.site).href
const image = `https://ogkit.org/api/og?key=YOUR_KEY&url=${encodeURIComponent(pageUrl)}`
---
<meta property="og:image" content={image} />
<meta name="twitter:card" content="summary_large_image" />

Nuxt

pages/[slug].vue

useSeoMeta({
  ogImage: () =>
    'https://ogkit.org/api/og?key=YOUR_KEY&url=' +
    encodeURIComponent(useRequestURL().href),
  twitterCard: 'summary_large_image',
})

Plain HTML

index.html — <head>

<meta property="og:image"
  content="https://ogkit.org/api/og?key=YOUR_KEY&url=https%3A%2F%2Fyoursite.com%2Fmy-page" />
<meta name="twitter:card" content="summary_large_image" />

WordPress

With Yoast or Rank Math, set the social image URL to your endpoint. Or add a filter in your theme:

functions.php

add_action('wp_head', function () {
  $page = get_permalink();
  $img = 'https://ogkit.org/api/og?key=YOUR_KEY&url=' . rawurlencode($page);
  echo '<meta property="og:image" content="' . esc_url($img) . '" />';
});

Not using one of these? Any stack works — build the same URL server-side and put it in your og:image tag. See the API reference.