Fix Metadata Image in NextJS on Vercel

Fix Metadata Image in NextJS on Vercel
og:image and metadata in nextjs

As of January 3rd, 2024, when you follow the recommended metadata image process for NextJS as described here:

Metadata Files: opengraph-image and twitter-image | Next.js
API Reference for the Open Graph Image and Twitter Image file conventions.

It will look like everything is working but no provider will correctly display the image. I am using NextJS 14+ with the app router.

Inside the head tag we can see the property is set and the of:image and twitter:image do exist.

<meta property="og:image" content="">

But it will show up like this (in slack for example)

The problem is simple. Vercel requires authentication for the build domains. In this case it was auto-generating to use instead of

The Solution

Solving this is also very simple! You just need to add the metadataBase property in your metadata definition. Like so:

export const metadata = {
  title: 'Solving ogimage problem',
  description: 'Wow, so simple',
  metadataBase: new URL(""),


The vercel docs are otherwise fairly solid for setting up your metadata.

Functions: generateMetadata | Next.js
Learn how to add Metadata to your Next.js application for improved search engine optimization (SEO) and web shareability.

And voila, it works.