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

jakubtomas108 commented 6 years ago

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!

LekoArts commented 6 years ago

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

jakubtomas108 commented 6 years ago

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

LekoArts commented 6 years ago

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.

GriffinJohnston commented 6 years ago

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.

btk commented 6 years ago

@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

plugins: [
   `gatsby-plugin-react-helmet`
    ...
]

jakubtomas108 commented 6 years ago

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.

LekoArts commented 6 years ago

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.

gatsbot[bot] commented 5 years ago

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! 💪💜

fab commented 5 years ago

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.

Jornve commented 5 years ago

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

jakubtomas108 commented 5 years ago

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

DSchau commented 5 years ago

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

jlengstorf commented 5 years ago

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

fab commented 5 years ago

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.

jlengstorf commented 5 years ago

Glad to hear it, @fab!

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

DSchau commented 5 years ago

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

walpoletim commented 5 years ago

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/

priyankoctal commented 5 years ago

@jakubtomas108

have you found a solution for this ?

jakubtomas108 commented 5 years ago

Well, I did. Migration to NextJS.

wfendler commented 5 years ago

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

GuttermanA commented 5 years ago

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.

crutchcorn commented 4 years ago

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);
};

malcolm-kee commented 4 years ago

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

bruskowski commented 4 years ago

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)

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.

jmadelaine commented 4 years ago

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.

bruskowski commented 4 years ago

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

malcolm-kee commented 4 years ago

@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);
};

bruskowski commented 4 years ago

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

bruskowski commented 4 years ago

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.

Soneji commented 3 years ago

@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);
};

Thank you @malcolm-kee This solved the issue for me! :)

gatsbyjs / gatsby

Metatags from helmet are not recognized by google, neither social medias! #9979

Update: