错误的 og:image 出现在页面元数据中

Question

在我的 [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
  })

然后我从 archives 得到我的 images 如果 images 存在，我得到我的 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') : ''
}

下面是我的数据的形状

Answer 1

我删除了

<link rel="canonical" href="https://poomgo.com/" />

来自我的 _app.tsx，问题已解决。很确定上面的代码表示从生产中的每个页面重定向到我的主页，这导致了错误 og:image

错误的 og:image 出现在页面元数据中

Wrong og:image is appearing on page metadata

seo

facebook-opengraph

reactjs

next.js