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

jakubtomas108 · 2018-11-16T15:20:24Z

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 · 2018-11-16T15:24:48Z

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

jakubtomas108 · 2018-11-16T15:34:49Z

   <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 · 2018-11-16T15:42:40Z

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 · 2018-11-16T17:13:56Z

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 · 2018-11-17T20:26:44Z

@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 · 2018-11-19T10:21:03Z

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 · 2018-11-19T10:32:16Z

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 · 2019-02-01T17:27:35Z

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 · 2019-02-11T03:42:37Z

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 · 2019-02-14T09:52:34Z

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 · 2019-02-18T20:03:21Z

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

DSchau · 2019-02-18T20:19:59Z

@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 · 2019-02-19T04:20:06Z

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 · 2019-02-26T02:01:49Z

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 · 2019-02-28T00:39:22Z

Glad to hear it, @fab!

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

DSchau · 2019-03-04T18:13:12Z

@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 · 2019-09-02T15:14:09Z

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 · 2019-10-04T06:20:33Z

@jakubtomas108

have you found a solution for this ?

jakubtomas108 · 2019-10-04T06:31:02Z

Well, I did. Migration to NextJS.

wfendler · 2019-12-02T07:58:04Z

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 · 2019-12-05T17:21:06Z

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 · 2020-02-29T20:53:53Z

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 · 2020-05-01T12:29:15Z

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 · 2020-05-10T15:43:50Z

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 ( nfl/react-helmet#79 (comment) ) 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 · 2020-05-12T08:02:31Z

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 · 2020-05-12T12:18:52Z

@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 · 2020-05-12T13:28:03Z

@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 · 2020-05-12T18:41:51Z

@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 · 2020-05-12T19:19:49Z

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 · 2021-05-21T10:45:29Z

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

jakubtomas108 changed the title ~~Metatags from helmet are not recognized google, neither social medias!~~ Metatags from helmet are not recognized by google, neither social medias! Nov 16, 2018

LekoArts added the status: needs reproduction This issue needs a simplified reproduction of the bug for further troubleshooting. label Nov 16, 2018

gatsbot bot added the stale? Issue that may be closed soon due to the original author not responding any more. label Feb 1, 2019

jlengstorf added not stale and removed stale? Issue that may be closed soon due to the original author not responding any more. labels Feb 19, 2019

DSchau closed this as completed Mar 4, 2019

papan01 mentioned this issue Feb 24, 2020

Meta tag problem on template papan01/gatsby-starter-papan01#1

Closed

bruskowski mentioned this issue May 25, 2020

Facebook Share not picking up OpenGraph meta tags from Gatsby site via React Helmet. #22908

Closed

LekoArts removed status: needs reproduction This issue needs a simplified reproduction of the bug for further troubleshooting. not stale labels May 26, 2020

orlando mentioned this issue Oct 7, 2020

Fix SEO tags rendering on Facebook and Twitter debtcollective/home#55

Merged

take77 mentioned this issue Mar 14, 2021

feat: add production setting again take77/take77_port#19

Merged

This was referenced Jul 3, 2021

Comentando código de importação de CSS que está provavelmente causand… joaoPedroCordeiroProfissional/giovanni-italy#10

Merged

Feature/adding react helmet joaoPedroCordeiroProfissional/giovanni-italy#11

Merged

This was referenced Feb 15, 2022

sort head tag shogo-nakano-desu/blog.shgnkn.io#60

Merged

Debug shogo-nakano-desu/blog.shgnkn.io#62

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

jakubtomas108 commented Nov 16, 2018

LekoArts commented Nov 16, 2018

jakubtomas108 commented Nov 16, 2018

LekoArts commented Nov 16, 2018

GriffinJohnston commented Nov 16, 2018 •

edited

btk commented Nov 17, 2018

jakubtomas108 commented Nov 19, 2018 •

edited

LekoArts commented Nov 19, 2018

gatsbot bot commented Feb 1, 2019

fab commented Feb 11, 2019

Jornve commented Feb 14, 2019

jakubtomas108 commented Feb 18, 2019

DSchau commented Feb 18, 2019 •

edited

jlengstorf commented Feb 19, 2019

fab commented Feb 26, 2019 •

edited

jlengstorf commented Feb 28, 2019

DSchau commented Mar 4, 2019

walpoletim commented Sep 2, 2019

priyankoctal commented Oct 4, 2019

jakubtomas108 commented Oct 4, 2019

wfendler commented Dec 2, 2019 •

edited

GuttermanA commented Dec 5, 2019

crutchcorn commented Feb 29, 2020 •

edited

malcolm-kee commented May 1, 2020

bruskowski commented May 10, 2020 •

edited

jmadelaine commented May 12, 2020 •

edited

bruskowski commented May 12, 2020

malcolm-kee commented May 12, 2020

bruskowski commented May 12, 2020

bruskowski commented May 12, 2020

Soneji commented May 21, 2021

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

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

Comments

jakubtomas108 commented Nov 16, 2018

LekoArts commented Nov 16, 2018

jakubtomas108 commented Nov 16, 2018

LekoArts commented Nov 16, 2018

GriffinJohnston commented Nov 16, 2018 • edited

btk commented Nov 17, 2018

jakubtomas108 commented Nov 19, 2018 • edited

LekoArts commented Nov 19, 2018

gatsbot bot commented Feb 1, 2019

fab commented Feb 11, 2019

Jornve commented Feb 14, 2019

jakubtomas108 commented Feb 18, 2019

DSchau commented Feb 18, 2019 • edited

jlengstorf commented Feb 19, 2019

fab commented Feb 26, 2019 • edited

jlengstorf commented Feb 28, 2019

DSchau commented Mar 4, 2019

walpoletim commented Sep 2, 2019

priyankoctal commented Oct 4, 2019

jakubtomas108 commented Oct 4, 2019

wfendler commented Dec 2, 2019 • edited

GuttermanA commented Dec 5, 2019

crutchcorn commented Feb 29, 2020 • edited

malcolm-kee commented May 1, 2020

bruskowski commented May 10, 2020 • edited

jmadelaine commented May 12, 2020 • edited

Update:

bruskowski commented May 12, 2020

malcolm-kee commented May 12, 2020

bruskowski commented May 12, 2020

bruskowski commented May 12, 2020

Soneji commented May 21, 2021

GriffinJohnston commented Nov 16, 2018 •

edited

jakubtomas108 commented Nov 19, 2018 •

edited

DSchau commented Feb 18, 2019 •

edited

fab commented Feb 26, 2019 •

edited

wfendler commented Dec 2, 2019 •

edited

crutchcorn commented Feb 29, 2020 •

edited

bruskowski commented May 10, 2020 •

edited

jmadelaine commented May 12, 2020 •

edited