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:

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="https://micro-influencer-4jpfivaxy-tactycs.vercel.app/blog/how-to-select-a-micro-influencer-for-your-startup-saas-or-service/opengraph-image.jpg?dc0b8b089ef5e809">

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 https://micro-influencer-4jpfivaxy-tactycs.vercel.app instead of https://micro-influencer.io.

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("https://micro-influencer.io"),

  ...
}

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

And voila, it works.