'Facebook not recognizing some Gatsby React Helmet Meta Tags on Netlify

Some, but not all, of my Gatsby React Helmet Meta Tags seems to be getting lost by facebook. Here is the code:

    <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>

Here is what Facebook says it is seeing:

<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" />

The first issue facebook lists is:

Provided og:image URL, /static/running-with-tagline-b034f5627c117830a13bb19345ebb2b0.png was not a valid URL.

I know this is happening because it requires a full URL like "https://www.codechampionship.com/static/running-with-tagline-b034f5627c117830a13bb19345ebb2b0.png", but that's what I am providing in the meta tag. Is there something else I need to do? This error does not show on Netlify "preview" sites that have completely different urls. So the images appear to work better for the "preview" sites.

and the second issue facebook lists is:

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

Which makes sense, because it doesn't seem to be scraping these. Is there something I am doing wrong in my meta tags?

I know this is similar to other questions, so I have tried to clarify where this is different and lay out the specifics. It may also be relevant that I am using Netlify to deploy.

Solution 1:^[1]

Just let me link the Luke' GitHub issue: https://github.com/gatsbyjs/gatsby/issues/10743

I have the same problem with a surge.sh

I have found good tools to check what is Facebook and Twitter really doing when crawling for the og tags: * https://developers.facebook.com/tools/debug/sharing/ * https://cards-dev.twitter.com/validator

At Facebook one there is also the Scrape Again button:

Solution 2:^[2]

I came across this same issue recently and found that it was an outdated cache plugin issue on Netlify. I was able to do a temporary fix by clicking the "Clear cache and deploy site" button in the Netlify build. But for every new page created we saw the problem of incorrect meta data on the SSR version of the pages. When I upgraded the Essential Gatsby plugin to v2.1.2 thats when I started seeing the correct meta data on both the SSR page and browser version of the page.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Simply007
Solution 2	David Beauchamp

'Facebook not recognizing some Gatsby React Helmet Meta Tags on Netlify

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]