Link is being set to localhost:3000/og.png in production

Question

I'm using the dynamic og image feature in the app dir.

Basically, I create a opengraph-image.tsx file and it will autogenerate me an og image.

However, in production the src of the og image is set to localhost:3000/og.png instead of mywebsite.com/og.png

Any idea how to fix this? I don't have localhost:3000 specified anywhere in my project

My code is exactly like the next.js docs: https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#dynamic-assets---generate-images-with-code

From the docs above, this is the ouput of the opengraph-image.tsx file. The src of the image is being auto generated and I cannot set it myself. I'm not sure how it generates the link.

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

Husk

You may be running into this bug: github.com/vercel/next.js/issues/66957 – Clyve

Answer 1

I had to set metadataBase in my layout page

export const metadata = {
  metadataBase: new URL('https://website.com'),
};

Husk

Solved this for cloudflare pages nextjs deployment – Cozen

Answer 2

I use a dynamic solution that works for deployment to different environments:

/app/layout.tsx

export async function generateMetadata(): Promise<Metadata> {
  return {
    //
    // dynamically get the host from the Next headers
    metadataBase: new URL(`https://${headers().get("host")}`),
  };
}

Dobrinsky

Answer 3

Are you hosted on Netlify or Vercel? Or elsewhere?

I noticed different behaviors between Netlify and Vercel.

Netlify would only work by exporting a metadata object for your page (in my case I put it in root layout.tsx), which sounds not ideal for you since want a dynamic og:image.

export const metadata = {
  title: "Sphere Showcase",
  description:
    "Showcase of Photosphere, 360, and Panorama images from around the world. Upload and share your own!",
  keywords: ["Photosphere", "360 Photo", "Panorama", "World Map"],
  openGraph: {
    images: 'https://photos.sphereshowcase.com/tBJczsgyzUAP3woETDr31.jpg',
  },
};

In Vercel, opengraph-image.png worked out of the box. I simply had my image at the highest level of my app and it worked.

I put together two small write-ups showing the different static og:image methods for Netlify and Vercel.

Static og:image in Netlify for Next.js

Static og:image in Vercel for Next.js

Petroglyph

Answer 4

If you're facing this issue in AWS Amplify, this has fixed for me.

Create an environment variable: VERCEL_URL , value : hostname (for e.g:- domain.com) without https://)

NextJS 14.1.0

Soapwort

Answer 5

if you are using runtime env for building Next.js app using docker (Build once, deploy many philosophy)

just add to this page where you need generated og image metadataBase

export const generateMetadata = (): Metadata => {
  const envUrl = env("NEXT_PUBLIC_BASE_METADATA_KEY");
  const metadataBase = typeof envUrl === "string" ? new URL(envUrl) : undefined;
  return {
    metadataBase,
  };
};

Nason