Guide · Next.js
OG images for Next.js, generated automatically
Next.js App Router reads generateMetadata, so you can point openGraph.images at OGKit with zero rendering code in your app. Each page gets a crisp 1200×630 preview image the moment someone shares it — no design work, no image uploads.
1. Copy this snippet
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
const og = `https://ogkit-api.dsbotz.workers.dev/og?template=docs&title=${encodeURIComponent(post.title)}&site=yoursite.com`;
return { title: post.title, openGraph: { images: [og] }, twitter: { card: 'summary_large_image', images: [og] } };
}
2. Where to paste it in Next.js
Add the function to app/blog/[slug]/page.tsx. No @vercel/og, no edge function, no fonts to bundle.
3. Check the result
Paste any page URL into the free link preview checker to see exactly how it will look on X, LinkedIn, Slack and Facebook. Social networks cache previews, so re-share or use their debuggers after changing tags.
Why use OGKit with Next.js?
- Posts with a large image card get noticeably more clicks than bare links — and most Next.js sites ship without one.
- Images are rendered once at the edge and cached, so they load in milliseconds for crawlers.
- 6 designer templates (blog, product, docs, minimal, gradient, photo) and your brand color.
- Free forever with a small “made with OGKit” badge; paid plans remove it.
Parameters
template, title, desc, site, accent (hex), image (for product/photo), tag, author, date. Or use /auto?url= to read the title from the page itself. Full reference in the docs.