Open Graph 共享调试器抓取空 html

Question

我正在尝试为网站设置 Open Graph 元标记。当我正常使用浏览器访问站点并检查源代码时，标签就在那里。但是，当我使用 OG 调试器时，它们没有出现。

我正在开发的网站在这里 spurafrika-org.vercel.app (Next.js site). It's replacing the original site here: spurafrika.org（WordPress 网站）。

当我使用 See exactly what our scraper see for your URL 功能时，我得到了这个：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head>
<body><p>ÿþ</p></body>
</html>

自己看看here。与我网站的实际来源大不相同。

我最初认为这可能是 Vercel/Next.js 问题，但当我发现它也发生在 WordPress 网站上时，我感到非常困惑：请参阅 this。我检查了使用 Next.js 和 WordPress 开发的其他网站 - 元标记在调试器上工作正常。

另一个令人困惑的地方是，调试器工具似乎能够在我的 Next.js 站点上找到它，我将 https://spurafrika.org 列为其规范 URL，它只能通过我的og:url标签来判断。然而，当我查看调试器应该看到的内容时，它显示了上面的空 HTML 片段。

我认为它可能是，但我已经使用多种工具验证了我的 HTML 来源，没有任何问题。

我很难过。有人知道为什么会这样吗？

Answer 1

我针对代码沙箱复制了您的代码 - https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fkzi2c.csb.app%2F

最初将 og:url 保持为 https://spurafrika.org/ 导致警告并且 og:description 未被拾取，一旦我将其指向实际 url 都修好了

将 og:url 更改为右侧 url 可能会解决问题，试一试并告诉我们。

Open Graph 共享调试器抓取空 html

Open Graph share debugger scrapes empty html

html

facebook-opengraph

next.js