OG Pilot
Next.js guide

OG Image Generator for Next.js

Generate route-specific Open Graph images in Next.js and inject them into metadata from the server.

1

Install and configure the SDK

Add og-pilot-js and configure API key + domain in server env variables.

2

Create a server helper

Build a reusable helper that signs payloads and returns OG image URLs.

3

Generate page-specific metadata

Call the helper in generateMetadata so each URL gets its own preview image.

4

Publish and validate

Deploy and validate with Open Graph debugger tools to refresh social caches.

Next.js App Router

Server-side helper + metadata usage

// lib/og-image.ts
import { configure, createImage } from "og-pilot-js"

configure((config) => {
  config.apiKey = process.env.OG_PILOT_API_KEY
  config.domain = process.env.OG_PILOT_DOMAIN
})

export async function buildOgImage(post: {
  title: string
  description: string
  path: string
  imageUrl?: string
}) {
  return createImage(
    {
      template: "blog_post",
      title: post.title,
      description: post.description,
      image_url: post.imageUrl,
      path: post.path,
    },
    { iat: Math.floor(Date.now() / 1000) },
  )
}

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug)
  const ogImage = await buildOgImage({
    title: post.title,
    description: post.excerpt,
    path: "/blog/" + post.slug,
  })

  return {
    openGraph: { images: [ogImage] },
    twitter: { card: "summary_large_image", images: [ogImage] },
  }
}

Common questions

Should I call OG Pilot from client components?

No. Keep JWT signing and OG Pilot calls on the server only.

Can each blog post have a unique image?

Yes. Pass per-post title, description, and path values when generating the image URL.

Ship branded previews for every URL

OG Pilot turns page metadata into consistent, high-quality social previews without manual design exports.

Read API docsStart free trial