metadataBase not configured

What this means

In Next.js App Router, metadataBase is the base URL used to resolve relative image paths in your metadata exports. Without it, any og:image value that uses a relative path like /og.png is rendered into the HTML as a relative URL. Social platforms cannot load relative URLs. They need a full https:// address.

The check looks for a metadataBase property in app/layout.tsx.

How to fix it

Add metadataBase to the metadata export in app/layout.tsx. The value should be the production URL of your site.

import type { Metadata } from 'next'

export const metadata: Metadata = {
  metadataBase: new URL('https://example.com'),
  title: 'My Site',
  description: 'Site description.',
  openGraph: {
    images: [{ url: '/og.png' }],
    // With metadataBase, /og.png resolves to https://example.com/og.png
  },
}

In most projects, the production URL is available as an environment variable. Use a fallback for local development.

import type { Metadata } from 'next'

const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL
  ? new URL(process.env.NEXT_PUBLIC_SITE_URL)
  : new URL('http://localhost:3000')

export const metadata: Metadata = {
  metadataBase: BASE_URL,
  title: 'My Site',
  openGraph: {
    images: [{ url: '/og.png' }],
  },
}

Set NEXT_PUBLIC_SITE_URL=https://example.com in your production environment variables (Vercel, Netlify, etc.).

Verify the fix

curl -s https://example.com | grep -i 'og:image'

Confirm the content attribute starts with https://. Re-run the audit:

npx orino audit .

metadataBase not configured

What this means

How to fix it

Verify the fix

Related fixes