在我的 [id].tsx 页面中，我有以下元标记结构
<Head>
<meta property="og:title" content={'품고 - ' + archive.title} key="title" />
<meta property="og:type" content="article" key="type" />
{imageUrl && <meta property="og:image" content={imageUrl} key="image" />}
</Head>
但是在我的生产服务器中，当我使用 Facebook 调试器抓取文章时，出现以下错误
但是当我在开发服务器中检查一篇文章时，即使代码与生产相同，也会显示正确的图像
我的 _app.tsx 文件中也有以下行，我认为这可能会导致错误，但不确定
<link rel="canonical" href="https://poomgo.com/" />
真正奇怪的是，如果我在 kakao 上分享我的制作文章链接，缩略图显示正常，但在 Facebook 和 LinkedIn 上，缩略图无法正确显示。
有谁知道为什么当应用的代码完全相同时我的元标记在我的生产和开发服务器上的抓取方式不同？
我的 imageUrl 是如何生成的
我使用 useSWR 从第三方 API (strapi) 获取archive 数据
const { data: archive, error } = useSWR('/archives/' + router.query.id, (url) => {
return axios.get(url).then(res => res.data)
}, {
initialData: props.data
})
然后，我从文件中获取我的图像，如果图像存在，我就会获取我的imageUrl
const images = archive.images
let imageUrl = ''
if (images && images.length > 0) {
imageUrl = getCloundFrontUrl(images[0].url)
}
然后，我使用 getCloundFrontUrl 函数将 url 替换为我的 CDN
export const getCloundFrontUrl = (url) => {
return url ? url.replace('poomgo-homepage.s3.ap-northeast-2.amazonaws.com', 'cdn-hp.poomgo.com') : ''
}
下面是我的数据的形状
最佳答案
我删除了
<link rel="canonical" href="https://poomgo.com/" />
来 self 的_app.tsx，问题已解决。非常确定上面的代码信号从生产中的每个页面重定向到我的主页，这导致了错误的 og:image
关于reactjs - 错误 og :image is appearing on page metadata，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70432631/