错误的 og:image 出现在页面元数据上
Posted
技术标签:
【中文标题】错误的 og:image 出现在页面元数据上【英文标题】：Wrong og:image is appearing on page metadata 【发布时间】：2022-01-22 17:00:26 【问题描述】：在我的[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') : ''
下面是我的数据的形状
【问题讨论】：
该错误表明您正在为该特定文章提供og:image 标记的相对 URL。您确定您传递给imageUrl 的所有网址都是绝对网址吗？该 URL 是如何生成的？
@juliomalves 编辑了我的帖子以显示我如何获得我的imageUrl，我相信我将我的 URL 显示为绝对 URL，有没有一种方法可以根据我显示的内容提供相对 URL我的编辑？
如果您从 API (images[0].url) 获得的 URL 值本身是相对的，则它可能是相对的。您可以检查 URL 是否以 http 开头，这可能会确保它们是绝对的。
控制台记录images[0].url给了我一个以https开头的绝对URL。但我发现我的主页og:image 的相对URL 为<meta property="og:image" content="/static/images/thumbnail.png" />，这可能是导致问题的原因？
这是否意味着主页的og:image 出现在文章的元数据中？是不是因为文章本身没有imageUrl？
【参考方案1】：
我删除了
<link rel="canonical" href="https://poomgo.com/" />
来自我的_app.tsx，问题已解决。很确定上面的代码表示从生产中的每个页面重定向到我的主页，这导致了错误og:image
【讨论】：
以上是关于错误的 og:image 出现在页面元数据上的主要内容，如果未能解决你的问题，请参考以下文章
提供 og:image URL，[url to AWS S3] 无法作为图像处理，因为它具有无效的内容类型