Back to Docs

React framework

Next.js OG Image Integration

Add automatic MyOG.social images to Next.js App Router metadata with generateMetadata and openGraph images.

Prerequisites

  • A Next.js App Router project
  • A production site URL available to server code
  • A MyOG.social account with your domain added

How MyOG fits Next.js

Next.js App Router renders metadata through the Metadata API. That is the right integration point for MyOG because HTML-limited crawlers need head tags in the response.

Use generateMetadata for routes whose URL depends on params. Use a shared helper so every blog post, product, or docs page builds the MyOG image URL consistently.

This is a code integration, not a plugin candidate. Developers will want a clear helper they can paste and adapt.

1

Choose a layout

MyOG detects page content and branding automatically. The layout only controls image composition.

2

Add the Next.js code

generateMetadata helper

Use this pattern in app/blog/[slug]/page.tsx or any dynamic route.

import type { Metadata } from "next"

const siteURL = "https://example.com"

function getMyOGImageURL(pathname: string) {
  const pageURL = siteURL + pathname
  return `https://api.myog.social/og?url=${encodeURIComponent(pageURL)}&template=screenshot-right`
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>
}): Promise<Metadata> {
  const { slug } = await params
  const pathname = `/blog/${slug}`
  const imageURL = getMyOGImageURL(pathname)

  return {
    alternates: { canonical: pathname },
    openGraph: {
      url: pathname,
      images: [{ url: imageURL, width: 1200, height: 630 }],
    },
    twitter: {
      card: "summary_large_image",
      images: [imageURL],
    },
  }
}
3

Place it correctly

  1. Create a helper that builds the MyOG image URL from your production origin and pathname.
  2. Return openGraph.images and twitter.images from generateMetadata.
  3. Set metadataBase or use absolute URLs so Next.js emits stable production metadata.
  4. Deploy, then test the production URL because localhost URLs cannot be fetched by social crawlers.

Avoid duplicate og:image tags

Avoid mixing a route-level opengraph-image file with a generateMetadata image unless you mean to provide multiple images. Keep MyOG as the primary image in openGraph.images for pages it should control.

Dynamic pages

Use params inside generateMetadata. Build the canonical page URL from the slug, then pass that absolute URL into MyOG's url parameter.

Test the result

  • Run View Source on the deployed URL and confirm og:image is present.
  • Check a dynamic route, not only the home page.
  • Do not test social crawlers against localhost.

Start with the MyOG Open Graph Checker, then refresh social platform caches if needed.

Known limitations

Client components cannot reliably set OG tags for crawlers.
metadataBase warnings usually mean URL resolution needs to be explicit.
If your route is private or blocked by middleware, MyOG and social crawlers cannot fetch it.

Sources

Ready to get started?

Sign up for free and add generated OG images to every Next.js route.

Already have an account?

cdf733b534ea2f2ed964d150330b323c44837e4f