Facebook在Netlify上无法识别某些Gatsby React头盔元标记

时间:2018-12-31 22:40:25

标签: facebook gatsby netlify react-helmet

我的Gatsby React Helmet Meta Tags的一些但不是全部,似乎已被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.

我知道这种情况正在发生,因为它需要一个完整的URL,例如"https://www.codechampionship.com/static/running-with-tagline-b034f5627c117830a13bb19345ebb2b0.png",但这就是我在meta标签中提供的。还有什么我需要做的吗?在URL完全不同的Netlify“预览”站点上不会显示此错误。因此,这些图像对于“预览”网站似乎效果更好。

第二个Facebook列表是:

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

这是有道理的,因为它似乎没有在刮这些。我的元标记中有什么地方做错了吗?

我知道这与其他问题相似,因此我试图弄清楚这有何不同,并列出具体细节。我正在使用Netlify进行部署也可能是相关的。

2 个答案:

答案 0 :(得分:1)

让我链接Luke的GitHub问题: https://github.com/gatsbyjs/gatsby/issues/10743

surge.sh也有同样的问题

我已经找到了很好的工具来检查og标签时,Facebook和Twitter的实际作用:  * https://developers.facebook.com/tools/debug/sharing/  * https://cards-dev.twitter.com/validator

在Facebook上,还有“再次抓取”按钮: Scrape Again

答案 1 :(得分:0)

这最终是一个缓存问题。我没有更改代码,睡着了,醒了,它开始起作用。我不确定是Netlify还是Facebook还是其他进行缓存的东西。

有人建议我可以在最后使用查询字符串进行测试(高速缓存中断)。如果您遇到类似的问题,则可以尝试执行以下操作:www.example.com?foo=bar强制其进行搜索。从技术上讲,它是一个不同的url,但是查询字符串不会影响页面结果(除非您使用查询字符串来实现功能)。