Skip to content

Social & sharing · Next.js (App Router)

My og:image is not showing up in Next.js (App Router)

Platforms fetch the image from their own servers, so a relative URL, a wrong content type or an error page means the card renders empty even though the tag is present. The tag being there is what makes it hard to notice — the card just looks wrong and nobody tells you.

The fix for Next.js (App Router)

13x detects your framework from the response and hands you this version rather than the generic one — below 50% confidence it hedges and gives you the generic one instead.

Set metadataBase in the root layout. Next then makes every relative image URL absolute:

ts code
// app/layout.tsx
export const metadata: Metadata = {
  metadataBase: new URL("https://example.com"),
  openGraph: { images: ["/og.png"] }, // resolved to https://example.com/og.png
};

Without metadataBase, relative image paths are emitted as-is and crawlers cannot fetch them.

On a different stack? The general version of this fix explains what 13x checks and why it matters, without assuming a framework.

Check your Next.js (App Router) site

113 deterministic checks against your live URL, in about 30 seconds. Framework detected from the response, so every fix comes back in the form your stack actually uses.

No signup. Results in 30 seconds.