时间戳

首页 > 解决方案 > Facebook - Open Graph 未检测到元标记（Gatsby + Netlify）

gatsby - Facebook - Open Graph 未检测到元标记（Gatsby + Netlify）

问题描述

我使用 Gatsby + Netlify 部署了一个博客。我目前正在使用 react-helmet 在每篇博文中填充适当的元标记。

由于某种原因，Facebook Open Graph 没有检测到属于博客的元标记，并且默认使用主页的元标记。

这是我从 Facebook 调试器得到的：

The following required properties are missing: og:url, og:type, og:title, og:image, og:description, fb:app_id

这是我点击后得到的结果 - 准确查看我们的抓取工具为您的 URL 看到的内容： The document returned no data.

注意：Netlify - 我目前没有使用 Netlify 预渲染。

Gatsby，这是代码如何处理博客文章元标记的示例（Twitter 标记正常工作）。

  {
    property: 'og:image',
    content: `https://website.com${image}`,
  },

我已经尝试过刷新 Facebook 调试器（再次抓取），但没有成功。

如果这是 Netlify、Facebook 或 Gatsby/react-helmet 的问题，有什么想法吗？

标签： gatsbynetlifyreact-helmetfacebook-debugger

解决方案

不太可能是 Netlify 的问题。Facebook 的刷新按钮通常效果很好。

很可能是 Gastby/ReactHelmet - 您是否通过 Inspector 或 View Source 在您的站点上打开了已编译和托管的 HTML？这是调试此类问题的最佳场所。

推荐阅读