Gatsby: Metatags from helmet are not recognized by google, neither social medias!

Created on 16 Nov 2018 · 29Comments · Source: gatsbyjs/gatsby

Hi, We're using Gatsby for Our websites, but we have to face quite big issue. All of our metatags passed to Helmet are ignored everywhere, Google, Yahoo, neither Facebook and other social medias. All of Our metatags are written correctly, followed by GatsbyJS and React-Helmet documentation. When checking the elements in the console, metatags are physically there, but they are ignored. When we move the metatags to html.js file, then it works correctly, but this is not what we want, because we need to set the meta tags dynamically corresponding to the route. Please, Anyone, could You kindly help Us with that? It's a real problem at this point of development. Thank You in advance!

Source

jakubtomas108

👍2

Most helpful comment

After working on this on and off over the last week I've finally figured it out on my project.

I made a mistake resulting in 55k lines (after it was formatted) of embedded CSS in a <style> element _above_ the meta tags. It seems that after a certain number of characters/lines FB/Twitter/Google stop trying to find meta tags and give an error stating that you're missing tags.

(If it's helpful for anyone else here... In my case, I had some code in gatsby-config.js that included some Sass variables/mixins that I could use in my component's CSS modules. What happened was I included part of bulma in one of those files. So for each component it was rendering a bunch of third party CSS and scoping it to that component, therefore duplicating it what seems like hundreds of times.)

wfendler on 2 Dec 2019

👍6

All 29 comments

We'd need code snippets or your repository to see what's happening there. (As per the issue template you saw)

LekoArts on 16 Nov 2018

   <I18nextProvider i18n={i18n}>
        <Fragment>
          <Helmet title={data.site.siteMetadata.title}>
            <link
              href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700,800"
              rel="stylesheet"
            />
            <link
              rel="stylesheet"
              href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
            />
            <link rel="shortcut icon" type="image/ico" href={icon} />
            <html lang="en" />
            <meta
              name="description"
              content={description ? description : defaultMetaTags.description}
            />
            <meta
              name="keywords"
              content="SWC Summit, SWCSUMMIT, StartUp, Start Up, Competition, StartUp Competition, Vysehrad, Congress Centre, Congress Hall, Inventi"
            />
            <meta
              property="og:title"
              content={title ? title : defaultMetaTags.title}
            />
            <meta
              property="og:description"
              content={description ? description : defaultMetaTags.description}
            />
            <meta
              property="og:image"
              content={image ? image : './assets/img/summit_logo_text.png'}
            />
            ...........rest

This dynamic metatags are just recent update. It does not work even if the metatags are hardcoded. If You need another snippet from some file, please tell Me.

jakubtomas108 on 16 Nov 2018

I fear that code snippet is kinda vacuous. I don't know your setup but an overview of every complete file which is involved in this would be better. As a side note:
You could also try to reproduce this issue in a new project and link that here because if you can't reproduce it in a minimal setup then it's something on your end, not Gatsby's.

LekoArts on 16 Nov 2018

Your problem might be related to this issue: nfl/react-helmet#79

Apparently the 'data-react-helmet' that RH adds to meta tags causes problems with AMP and possibly Facebook, Googlebot, etc.

GriffinJohnston on 16 Nov 2018

@jakubrohleder is your project live? If so can you share a link or reproduce this issue?

Also can you make sure you also have gatsby-plugin-react-helmet installed and resolved over your gatsby.config.js

~JS
plugins: [
gatsby-plugin-react-helmet
...
]
~

btk on 17 Nov 2018

👍1

Hi, thanks for answering. Right now, I'm trying to figure it out, how to get rid of the data-react-helmet attributes. Do You have some hint for me, how to achieve it with gatsby? Right now, I'm trying something like this in gatsby-ssr.js:

const Helmet = require('react-helmet')

exports.onRenderBody = ({ setHeadComponents }) => {
  const Head = Helmet.Helmet.rewind()
  const regexp = /data-react-helmet="true"/g
  setHeadComponents([Head.meta.toString().replace(regexp, '')])
}

But it's not working.

jakubtomas108 on 19 Nov 2018

Your problem might be related to this issue: nfl/react-helmet#79
Apparently the 'data-react-helmet' that RH adds to meta tags causes problems with AMP and possibly Facebook, Googlebot, etc.

I can't confirm this. I use react-helmet on every site and never had any issues with previews, Facebook's share debugger etc.

LekoArts on 19 Nov 2018

👍5

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

gatsbot[bot] on 1 Feb 2019

Not stale. I'm currently running a Gatsby site and the meta tags generated by Helmet are not being picked up by Google. The meta description is not rendering correctly in search results.

fab on 11 Feb 2019

👍2

I have the same problem. When sharing the website no preview is being displayed. When using Facebook debugger (https://developers.facebook.com/tools/debug/sharing/) is says:

Inferred Property
The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.

Missing Properties
The following required properties are missing: og:url, og:type, og:title, og:image, og:description, fb:app_id

Jornve on 14 Feb 2019

We solved this issue.. by migrating to Next :D it was resolved out of the box

jakubtomas108 on 18 Feb 2019

👎30 👍2

@Jornve are you able to reproduce? Similarly, @fab could you provide anything so I could take a look? URLs would be fine, but source code would be even better.

One thing we've seen before is that some invalid JavaScript (e.g. a non-transpiled node_module containing an arrow function) can often cause things to go awry in the crawlers/parsers for SEO--particularly in Googlebot with an old version of Chrome.

However - this seems to be working just fine in a few sample Gatsby apps I just spot-checked. That being said--it's possible some of you are hitting an edge case that we haven't been able to reproduce, that's why a reproduction is so valuable! If you're not able to reproduce, like I said, a URL would be valuable as would a peek at your gatsby-config.js to see what plugins are being used.

Additionally, see @jlengstorf's blog

Thanks!

DSchau on 18 Feb 2019

For reference, these two components are reusable and handle SEO pretty well for me: https://github.com/jlengstorf/gatsby-theme-jason-blog/tree/master/src/components/SEO

jlengstorf on 19 Feb 2019

❤3

Strangely I no longer have this issue, although I did install Google Search Console on the domain since posting this. At first the Google search results were not picking up the meta description tag correctly but that appears to be sorted now. For anyone running into this problem I would suggest looking at @jlengstorf's SEO components, that's what I modelled mine on, and also using Google Search Console to manually crawl your site.

fab on 26 Feb 2019

👍2 🎉1

Glad to hear it, @fab!

@Jornve are you still seeing this issue? Or are we good to close?

jlengstorf on 28 Feb 2019

@Jornve been a few days, so going to close this out. As @jlengstorf said though, if you are still having this issue _please_ reply and we'll re-open the issue and take another look.

Thanks all for using Gatsby 💜

DSchau on 4 Mar 2019

I am also having this problem on my site, and cant seem to get around the issue...

Have we managed to get to the bottom of this..

https://staging.ingmarson.com/

walpoletim on 2 Sep 2019

@jakubtomas108

have you found a solution for this ?

priyankoctal on 4 Oct 2019

Well, I did. Migration to NextJS.

jakubtomas108 on 4 Oct 2019

👎15

After working on this on and off over the last week I've finally figured it out on my project.

wfendler on 2 Dec 2019

👍6

After working on this on and off over the last week I've finally figured it out on my project.

I made a mistake resulting in 55k lines (after it was formatted) of embedded CSS in a <style> element _above_ the meta tags. It seems that after a certain number of characters/lines FB/Twitter/Google stop trying to find meta tags and give an error stating that you're missing tags.

(If it's helpful for anyone else here... In my case, I had some code in gatsby-config.js that included some Sass variables/mixins that I could use in my component's CSS modules. What happened was I included part of bulma in one of those files. So for each component it was rendering a bunch of third party CSS and scoping it to that component, therefore duplicating it what seems like hundreds of times.)

Thank you for sharing this. I believe we are having the same exact issue and this gives me some ammunition to get it fixed.

GuttermanA on 5 Dec 2019

👍2

I have written my own gatsby-srr.js file to remove the metatag attribute from helmet:

exports.onPreRenderHTML = ({ replaceHeadComponents, getHeadComponents }) => {
    const headComponents = getHeadComponents();
    console.log(headComponents);
    headComponents.forEach(head => {
        if (head.props && head.props['data-react-helmet']) {
            delete head.props['data-react-helmet'];
        }
    });
    replaceHeadComponents(headComponents);
};

crutchcorn on 29 Feb 2020

After working on this on and off over the last week I've finally figured it out on my project.

I made a mistake resulting in 55k lines (after it was formatted) of embedded CSS in a <style> element _above_ the meta tags. It seems that after a certain number of characters/lines FB/Twitter/Google stop trying to find meta tags and give an error stating that you're missing tags.

(If it's helpful for anyone else here... In my case, I had some code in gatsby-config.js that included some Sass variables/mixins that I could use in my component's CSS modules. What happened was I included part of bulma in one of those files. So for each component it was rendering a bunch of third party CSS and scoping it to that component, therefore duplicating it what seems like hundreds of times.)

For my case, I add tailwindcss without css purge :(

malcolm-kee on 1 May 2020

👍1

I have the same issue: Google/Twitter/Facebook don't detect the meta data, although it's in there. I've compared the last deployment where everything seemed to work fine with the current one, which does not work fine. ~Is it possibly that the issue is caused by the order of the data attribute in the meta tags? 🤔~
Current one on the left (data-react-helmet last), last deployment that worked well on the right (data-react-helmet first)
Bildschirmfoto 2020-05-10 um 17 38 07

Edit: Somebody here ( https://github.com/nfl/react-helmet/issues/79#issuecomment-527972925 ) is suggesting the exact opposite, and for gatsbyjs.com it works with data-react at the end, so this doesn't seem to be the cause.

I've made a couple of changes between the last deployment where everything worked fine and the one that broke the social sharing.

Moved MDXProvider with shortcodes up the latter to wrapRootElement, which is called in gatsby-ssr
Added a VideoPlayer component with dependencies

I tried rolling back these but so far none of the rollbacks fixed the issue.

I had also upgraded some dependencies back then, moving from Gatsby 2.21.0 to 2.21.12, in case that matters.

richardbruskowski on 10 May 2020

I'm having the same issue with my site jonathanmadelaine.com. You can see the meta tags in the head, but when crawling using either the Facebook or Twitter debugger, those meta tags are not detected.

Update:

I made a comment in this thread that may identify the cause. It looks like it is related to rendering context providers in wrapRootElement of gatsby-ssr.js.

jmadelaine on 12 May 2020

👍2

@jmadelaine's finding applied to me as well. In my case I had to move the SEO component not only outside of my theme provider but also outside of my context provider.
So relieved 😅. Is that architecture recommendable, though? 🤔

richardbruskowski on 12 May 2020

@jmadelaine's finding applied to me as well. In my case I had to move the SEO component not only outside of my theme provider but also outside of my context provider.
So relieved 😅. Is that architecture recommendable, though? 🤔

If you keep the SEO inside, but switching the styles and the meta tag like this, is your problem solved?

exports.onPreRenderHTML = function onPreRenderHTML({
  getHeadComponents,
  replaceHeadComponents,
}) {
  const headComponents = getHeadComponents();
  headComponents.sort((a, b) => {
    if (a.type === b.type || (a.type !== 'style' && b.type !== 'style')) {
      return 0;
    }

    if (a.type === 'style') {
      return 1;
    } else if (b.type === 'style') {
      return -1;
    }

    return 0;
  });

  replaceHeadComponents(headComponents);
};

malcolm-kee on 12 May 2020

👍2 🎉1

@malcolm-kee No in my case the order in the <head /> wasn't the cause. Instead, the social graph/SEO tags weren't server-rendered at all. Observing index.html in the public folder was more helpful than looking at the Facebook/Twitter debugger. I've had made some conceptual mistakes which led to a mismatch between SSR and Runtime, got help in spectrum.chat which made that clear: https://spectrum.chat/gatsby-js/general/unable-to-generate-twitter-facebook-cards~852b7d81-b4fe-4843-8c6f-9917a3d5fb63?m=MTU4OTI5OTcwNTMwMw==

I think I've been able to resolve the mismatch and it seems to be working now again, with the SEO component inside of the Layout component or page templates respectively. Still have to deploy and test live, though.

richardbruskowski on 12 May 2020

Can confirm that resolving the mismatch of SSR and Runtime solved the issue for me.

A little note: Both, the Twitter Debugger and the Facebook Debugger didn't immediately show results after publishing the fix, so probably better to rely on checking public/index.html if the social graph/search tags there appear for debugging.

richardbruskowski on 12 May 2020

👍1

Was this page helpful?

0 / 5 - 0 ratings