Next.js

Integrating OpenGraph.xyz with the Next.js App Router is straightforward. You can use the generateMetadata function to dynamically generate Open Graph images for your pages.

URL Structure

The dynamic image URL follows this pattern:

https://ogcdn.net/{templateId}/v{version}/{variable1}/{variable2}/.../og.png

• templateId – your unique template identifier (found in the dashboard)
• version – the published version number, prefixed with v (e.g. v3)
• variables – URL-encoded values for each template variable, in order

Here is an example image generated with this URL structure:

Code Example

Here is how you can implement this in a Next.js App Router page (e.g. app/posts/[slug]/page.tsx). This example assumes a template with two variables: a title (text) and an image URL (image source).

import type { Metadata, ResolvingMetadata } from 'next'

type Props = {
  params: { slug: string }
  searchParams: { [key: string]: string | string[] | undefined }
}

export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata,
): Promise<Metadata> {
  // Fetch your page data
  const post = await getPost(params.slug)

  // Template details (find these in your dashboard)
  const templateId = '4baf7dd9-4a11-4e55-9837-649e705f44ef'
  const version = 3

  // Encode the dynamic values
  const title = encodeURIComponent(post.title)
  const imageUrl = encodeURIComponent(post.image)

  // Construct the OG Image URL
  const ogImageUrl = `https://ogcdn.net/${templateId}/v${version}/${title}/${imageUrl}/og.png`

  return {
    title: post.title,
    openGraph: {
      images: [ogImageUrl],
    },
    twitter: {
      card: 'summary_large_image',
      images: [ogImageUrl],
    },
  }
}

export default function Page({ params, searchParams }: Props) {
  return <div>My Post</div>
}

Replace the template ID and version number with the values from your dashboard. The variable segments must match the order defined in your template.