Gatsby: Optimize the open graph tag in gatsby

[calpa]

Currently, I am using react-helmet to insert the open graph meta tag in the header. However, the tag is also added with react-helmet="true" attribute.

Another approach is to insert those open graph meta tag in the html.js, but I wonder how to receive different information in different pages.

Any ideas?

[KyleAMathews]

Does the extra react-helmet="true" cause any trouble?

[sebastienfi]

It raises and invalid tag warning on SEO analysers, W3C specs says the meta tag shouldn't add any more attributes.

[KyleAMathews]

React Helmet is a far superior way to manage meta tags than doing it in html.js which is why we encourage its usage. But yeah, it's not cool they're adding this.

There's this issue there https://github.com/nfl/react-helmet/issues/79

Perhaps the easiest thing to do is do postBuild find/replace with a regex to remove the attribute from HTML pages?

[jonathan-chin]

I came across this exact problem. I added two lines in my package.json that should be set-and-forget:

"scripts": {
      "build": "gatsby build; npm run scrub-react-helmet",
      "scrub-react-helmet": "grep -rl ' data-react-helmet=\"true\"' ./public | xargs sed -i '' 's/ data-react-helmet=\"true\"//g'",
      ...
}

**update
seems it doesn't play well with continuous deployment in Netlify. potentially, it could if I knew more about how the environment is set up. for now, I'm building locally and pushing public/ to gitlab, for now.

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!