Facebook 无法识别 Netlify 上的一些 Gatsby React Helmet 元标签
Facebook not recognizing some Gatsby React Helmet Meta Tags on Netlify
我的一些（但不是全部）Gatsby React 头盔元标签似乎被 facebook 丢失了。这是代码：
<Helmet>
<title>Code Championship | Code is Sport</title>
<meta name="description" content="Code is Sport. Competitive coding competitions for elementary, middle, and high school students." />
<meta name="keywords" content="code, championship, competition, minnesota" />
<meta property="og:url" content="https://www.codechampionship.com" />
<meta property="og:title" content="Code Championship | Code is Sport" />
<meta property="og:description" content="Code is Sport. Competitive coding competitions for elementary, middle, and high school students." />
<meta property="og:type" content="website" />
<meta property="fb:app_id" content="281289809224344" />
<meta property="og:image" content="https://www.codechampionship.com/static/running-with-tagline-b034f5627c117830a13bb19345ebb2b0.png" />
<meta property="og:image:width" content="1080" />
<meta property="og:image:height" content="608" />
<meta property="og:image:alt" content="Running Athlete with Code in Foreground" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@codechampionshp" />
<meta name="twitter:title" content="Code Championship | Code is Sport" />
<meta name="twitter:description" content="Code is Sport. Competitive coding competitions for elementary, middle, and high school students." />
<meta name="twitter:image" content="https://www.codechampionship.com/static/running-with-tagline-b034f5627c117830a13bb19345ebb2b0.png" />
<link rel="icon" href={logo} />
<html lang="en" />
<script id="stripe-js" src="https://js.stripe.com/v3/" async />
</Helmet>
这是 Facebook 所说的看到的内容：
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="generator" content="Gatsby 2.0.66" />
<meta name="theme-color" content="#ffe83d" />
<meta data-react-helmet="true" name="description" content="Code is Sport. Competitive coding competitions for elementary, middle, and high school students." />
<meta data-react-helmet="true" name="keywords" content="code, championship, competition, minnesota" />
<meta data-react-helmet="true" property="og:title" content="Code Championship | Code is Sport" />
<meta data-react-helmet="true" property="og:description" content="Code is Sport. Competitive coding competitions for elementary, middle, and high school students." />
<meta data-react-helmet="true" property="og:image" content="/static/running-with-tagline-b034f5627c117830a13bb19345ebb2b0.png" />
<meta data-react-helmet="true" property="og:image:width" content="1080" />
<meta data-react-helmet="true" property="og:image:height" content="608" />
<meta data-react-helmet="true" name="twitter:card" content="summary" />
<meta data-react-helmet="true" name="twitter:site" content="@codechampionshp" />
<meta data-react-helmet="true" name="twitter:title" content="Code Championship | Code is Sport" />
<meta data-react-helmet="true" name="twitter:description" content="Code is Sport. Competitive coding competitions for elementary, middle, and high school students." />
<meta data-react-helmet="true" name="twitter:image" content="/static/running-with-tagline-b034f5627c117830a13bb19345ebb2b0.png" />
第一期 facebook 列表是：
Provided og:image URL, /static/running-with-tagline-b034f5627c117830a13bb19345ebb2b0.png was not a valid URL.
我知道这是因为它需要像 "https://www.codechampionship.com/static/running-with-tagline-b034f5627c117830a13bb19345ebb2b0.png" 这样的完整 URL，但这就是我在元标记中提供的内容。还有什么我需要做的吗？此错误不会显示在具有完全不同 url 的 Netlify "preview" 站点上。因此，这些图像似乎更适合 "preview" 网站。
第二期 facebook 列表是：
The following required properties are missing: og:url, og:type, fb:app_id
这是有道理的，因为它似乎并没有抓取这些。我的元标记中有什么地方做错了吗？
我知道这与其他问题类似，所以我试图澄清这不同之处并列出具体细节。我正在使用 Netlify 进行部署也可能是相关的。
这是一个缓存问题。我没有对代码做任何更改，睡着了，醒来，它开始工作了。我不确定是 Netlify 还是 Facebook 或其他什么东西在做缓存。
有人向我建议我可以在最后使用查询字符串来测试（缓存中断）。如果您 运行 遇到类似问题，您可以尝试类似的操作：www.example.com?foo=bar 强制它进行搜索。它在技术上是不同的 url，但查询字符串不应影响页面结果（除非您使用查询字符串来实现功能）。
让我 link Luke' GitHub 问题：
https://github.com/gatsbyjs/gatsby/issues/10743
我和 surge.sh
有同样的问题
我找到了很好的工具来检查 Facebook 和 Twitter 在抓取 og 标签时真正做了什么：
* https://developers.facebook.com/tools/debug/sharing/
* https://cards-dev.twitter.com/validator
在 Facebook 上还有一个 Scrape Again 按钮：
我最近遇到了同样的问题，发现这是 Netlify 上过时的缓存插件问题。我能够通过单击 Netlify 构建中的“清除缓存和部署站点”按钮来进行临时修复。但是对于创建的每个新页面，我们都看到了页面 SSR 版本上元数据不正确的问题。当我将 Essential Gatsby plugin 升级到 v2.1.2 时，我开始在页面的 SSR 页面和浏览器版本上看到正确的元数据。
我的一些（但不是全部）Gatsby React 头盔元标签似乎被 facebook 丢失了。这是代码：
<Helmet>
<title>Code Championship | Code is Sport</title>
<meta name="description" content="Code is Sport. Competitive coding competitions for elementary, middle, and high school students." />
<meta name="keywords" content="code, championship, competition, minnesota" />
<meta property="og:url" content="https://www.codechampionship.com" />
<meta property="og:title" content="Code Championship | Code is Sport" />
<meta property="og:description" content="Code is Sport. Competitive coding competitions for elementary, middle, and high school students." />
<meta property="og:type" content="website" />
<meta property="fb:app_id" content="281289809224344" />
<meta property="og:image" content="https://www.codechampionship.com/static/running-with-tagline-b034f5627c117830a13bb19345ebb2b0.png" />
<meta property="og:image:width" content="1080" />
<meta property="og:image:height" content="608" />
<meta property="og:image:alt" content="Running Athlete with Code in Foreground" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@codechampionshp" />
<meta name="twitter:title" content="Code Championship | Code is Sport" />
<meta name="twitter:description" content="Code is Sport. Competitive coding competitions for elementary, middle, and high school students." />
<meta name="twitter:image" content="https://www.codechampionship.com/static/running-with-tagline-b034f5627c117830a13bb19345ebb2b0.png" />
<link rel="icon" href={logo} />
<html lang="en" />
<script id="stripe-js" src="https://js.stripe.com/v3/" async />
</Helmet>
这是 Facebook 所说的看到的内容：
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="generator" content="Gatsby 2.0.66" />
<meta name="theme-color" content="#ffe83d" />
<meta data-react-helmet="true" name="description" content="Code is Sport. Competitive coding competitions for elementary, middle, and high school students." />
<meta data-react-helmet="true" name="keywords" content="code, championship, competition, minnesota" />
<meta data-react-helmet="true" property="og:title" content="Code Championship | Code is Sport" />
<meta data-react-helmet="true" property="og:description" content="Code is Sport. Competitive coding competitions for elementary, middle, and high school students." />
<meta data-react-helmet="true" property="og:image" content="/static/running-with-tagline-b034f5627c117830a13bb19345ebb2b0.png" />
<meta data-react-helmet="true" property="og:image:width" content="1080" />
<meta data-react-helmet="true" property="og:image:height" content="608" />
<meta data-react-helmet="true" name="twitter:card" content="summary" />
<meta data-react-helmet="true" name="twitter:site" content="@codechampionshp" />
<meta data-react-helmet="true" name="twitter:title" content="Code Championship | Code is Sport" />
<meta data-react-helmet="true" name="twitter:description" content="Code is Sport. Competitive coding competitions for elementary, middle, and high school students." />
<meta data-react-helmet="true" name="twitter:image" content="/static/running-with-tagline-b034f5627c117830a13bb19345ebb2b0.png" />
第一期 facebook 列表是：
Provided og:image URL, /static/running-with-tagline-b034f5627c117830a13bb19345ebb2b0.png was not a valid URL.
我知道这是因为它需要像 "https://www.codechampionship.com/static/running-with-tagline-b034f5627c117830a13bb19345ebb2b0.png" 这样的完整 URL，但这就是我在元标记中提供的内容。还有什么我需要做的吗？此错误不会显示在具有完全不同 url 的 Netlify "preview" 站点上。因此，这些图像似乎更适合 "preview" 网站。
第二期 facebook 列表是：
The following required properties are missing: og:url, og:type, fb:app_id
这是有道理的，因为它似乎并没有抓取这些。我的元标记中有什么地方做错了吗？
我知道这与其他问题类似，所以我试图澄清这不同之处并列出具体细节。我正在使用 Netlify 进行部署也可能是相关的。
这是一个缓存问题。我没有对代码做任何更改，睡着了，醒来，它开始工作了。我不确定是 Netlify 还是 Facebook 或其他什么东西在做缓存。
有人向我建议我可以在最后使用查询字符串来测试（缓存中断）。如果您 运行 遇到类似问题，您可以尝试类似的操作：www.example.com?foo=bar 强制它进行搜索。它在技术上是不同的 url，但查询字符串不应影响页面结果（除非您使用查询字符串来实现功能）。
让我 link Luke' GitHub 问题： https://github.com/gatsbyjs/gatsby/issues/10743
我和 surge.sh
有同样的问题我找到了很好的工具来检查 Facebook 和 Twitter 在抓取 og 标签时真正做了什么： * https://developers.facebook.com/tools/debug/sharing/ * https://cards-dev.twitter.com/validator
在 Facebook 上还有一个 Scrape Again 按钮：
我最近遇到了同样的问题，发现这是 Netlify 上过时的缓存插件问题。我能够通过单击 Netlify 构建中的“清除缓存和部署站点”按钮来进行临时修复。但是对于创建的每个新页面，我们都看到了页面 SSR 版本上元数据不正确的问题。当我将 Essential Gatsby plugin 升级到 v2.1.2 时，我开始在页面的 SSR 页面和浏览器版本上看到正确的元数据。