CODEWITHSUNDEEP
next.jsnext.js13
user19666029
user19666029

Reputation:

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

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>" />

Upvotes: 11

Views: 5052

Answers (6)

Rahul Gandhi
Rahul Gandhi

Reputation: 1095

If you're still facing the issue, it could be that you're not exporting metadataBase correctly.

For instance, in my case I'm using app/[language]/layout.tsx structure and defined the metadataBase url in same file.

Then exporting it from app/layout.tsx.

This is how I got it fixed.

app/layout.tsx

export { default, metadata } from "./[language]/layout";

Upvotes: 0

Unsleeping
Unsleeping

Reputation: 568

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,
  };
};

Upvotes: 0

coolfuse
coolfuse

Reputation: 1

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

Upvotes: 0

Cory Robinson
Cory Robinson

Reputation: 5272

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")}`),
  };
}

Upvotes: 4

tdesmond
tdesmond

Reputation: 81

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

Upvotes: 1

user19666029
user19666029

Reputation:

I had to set metadataBase in my layout page

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

Upvotes: 18

Related Questions