Gatsby: Gatsby React Helmet not correctly Producing Meta Tags on Netlify

Created on 1 Jan 2019 · 6Comments · Source: gatsbyjs/gatsby

I tried really hard to make sure this wasn't a duplicate. I'm hoping I just missed it and there is a simple fix.

Description

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

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

Steps to reproduce

https://www.codechampionship.com

But assuming a specific deploy is easier
https://5c2a96a277d623000ae1784c--kind-sammet-f4aa3c.netlify.com/

Facebook Debugger Report:
https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2F5c2a96a277d623000ae1784c--kind-sammet-f4aa3c.netlify.com%2F

(although, the specific deploy does not have the image issue, only issues with the other tags.)

Expected result

All meta tags in React Helmet should be scraped by facebook or twitter.

Actual result

Some tags are not being scraped correctly.

Environment

The issue is with the deployment environment, which is netlify, but in case it is relevant, I did run the line:

System:
OS: macOS 10.14.2
CPU: x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.5.0 - /usr/local/bin/node
npm: 6.5.0 - /usr/local/bin/npm
Browsers:
Chrome: 71.0.3578.98
Firefox: 63.0.3
Safari: 12.0.2
npmPackages:
gatsby: ^2.0.79 => 2.0.79
gatsby-image: ^2.0.25 => 2.0.25
gatsby-plugin-eslint: ^2.0.1 => 2.0.1
gatsby-plugin-google-analytics: ^2.0.8 => 2.0.8
gatsby-plugin-manifest: ^2.0.13 => 2.0.13
gatsby-plugin-offline: ^2.0.20 => 2.0.20
gatsby-plugin-react-helmet: ^3.0.5 => 3.0.5
gatsby-plugin-sharp: ^2.0.17 => 2.0.17
gatsby-plugin-sitemap: ^2.0.4 => 2.0.4
gatsby-source-apiserver: ^2.1.0 => 2.1.0
gatsby-source-filesystem: ^2.0.12 => 2.0.12
gatsby-transformer-sharp: ^2.1.10 => 2.1.10
npmGlobalPackages:
gatsby-cli: 2.4.2

Source

LukeSchlangen

🎉3

Most helpful comment

Great! That helps a lot! (Not familiar with cache-busting, but I'm guessing it just means adding something like ?foo=bar to the end of the query string, which makes sense and is simple enough.)

Thank you!

LukeSchlangen on 2 Jan 2019

👍6 😄1

All 6 comments

Hey @LukeSchlangen

As far as I know og:image needs to be an absolute url

Here's what we do in the gatsby docs
https://github.com/gatsbyjs/gatsby/blob/828499dbca3a6fafba63d432ede846a72281458b/www/src/components/site-metadata.js#L38

Can you try this?

sidharthachatterjee on 2 Jan 2019

🎉1

Thanks @sidharthachatterjee ! I think you are 100% correct.

The confusing part for me is that I have an absolute url in my JSX

<meta property="og:image" content="https://www.codechampionship.com/static/running-with-tagline-b034f5627c117830a13bb19345ebb2b0.png" />

But Facebook says it is a relative url when it is reading it:

<meta data-react-helmet="true" property="og:image" content="/static/running-with-tagline-b034f5627c117830a13bb19345ebb2b0.png" />

The more I look at this issue, the more I think it is likely to be a caching issue? It seems like new pages are working, but any page I've tested previously will not update. It might make sense to put this issue on hold for a week to see if that clears the Facebook and Twitter cache?

I honestly am not very familiar with how their caching works, so maybe you know if that's a reasonable guess?

LukeSchlangen on 2 Jan 2019

Ok, I just retested (after changing no code in the past 12-ish hours), and now it seems to be working. To me, it seems most likely that even after clicking Scrape Again Facebook and Twitter (or maybe this is Netlify?) both use caching for some period of time that was preventing the meta tags to update. Does that seem reasonable?

Either way, since this is no longer an issue for my application, I will close the issue.

Thank you for your help!

LukeSchlangen on 2 Jan 2019

Glad you could resolve this @LukeSchlangen (shout out to @DSchau for mentioning that og:image needs to be an absolute url)

Yeah, the Facebook.com does seem to cache urls for a while

You site also has cache-control: public, max-age=0, must-revalidate coming from netlify so potentially refetching it there as well hit the same cache

Adding a cache busting query parameter when you test with a url tends to work, in my experience

sidharthachatterjee on 2 Jan 2019

Great! That helps a lot! (Not familiar with cache-busting, but I'm guessing it just means adding something like ?foo=bar to the end of the query string, which makes sense and is simple enough.)

Thank you!

LukeSchlangen on 2 Jan 2019

👍6 😄1

Absolutely, that's what I meant

You're welcome @LukeSchlangen Glad we could help

sidharthachatterjee on 2 Jan 2019

👍3

Was this page helpful?

0 / 5 - 0 ratings