英文:
Link is being set to localhost:3000/og.png in production
问题
我在应用程序目录中使用动态 og 图像功能。
基本上，我创建了一个 opengraph-image.tsx 文件，它会自动生成一个 og 图像。
然而，在生产环境中，og 图像的 src 被设置为 localhost:3000/og.png 而不是 mywebsite.com/og.png。
有什么办法可以解决这个问题吗？我的项目中没有任何地方指定 localhost:3000。
我的代码与 Next.js 文档完全相同：https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#dynamic-assets---generate-images-with-code
根据上述文档，opengraph-image.tsx 文件的输出如下。图像的 src 是自动生成的，我无法自行设置。我不确定它是如何生成链接的。
<meta property="og:image" content="<generated>" />
英文:
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>" />
答案1
得分: 5
metadataBase 在我的布局页面中需要设置。
export const metadata = {
metadataBase: new URL('https://website.com'),
};
英文:
I had to set metadataBase in my layout page
export const metadata = {
metadataBase: new URL('https://website.com'),
};
答案2
得分: 0
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 you want a dynamic og:image.
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][1]
[Static og:image in Vercel for Next.js][2]
[1]: https://thetombomb.com/posts/og-image-nextjs-netlify
[2]: https://thetombomb.com/posts/og-image-nextjs-vercel
<details>
<summary>英文:</summary>
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][1]
[Static og:image in Vercel for Next.js][2]
[1]: https://thetombomb.com/posts/og-image-nextjs-netlify
[2]: https://thetombomb.com/posts/og-image-nextjs-vercel
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论