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.
This ended up being a caching issue. I made no changes to the code, went to sleep, woke up, and it started working. I'm not sure if it was Netlify or Facebook or something else that was doing the caching.
It was suggested to me that I could have used a query string at the end to test (cache breaking). If you're running into a similar issue, you might try something like: www.example.com?foo=bar to force it to search. It's technically a different url, but the query string shouldn't impact the page results (unless you are using the query string for functionality).