Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
jakubtomas108 opened this issue Nov 16, 2018 · 29 comments
Closed

Comments

@jakubtomas108
Copy link

@jakubtomas108 jakubtomas108 commented Nov 16, 2018

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!

@jakubtomas108 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
Copy link
Contributor

@LekoArts LekoArts commented Nov 16, 2018

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

@jakubtomas108
Copy link
Author

@jakubtomas108 jakubtomas108 commented Nov 16, 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.

@LekoArts
Copy link
Contributor

@LekoArts LekoArts commented Nov 16, 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.

@GriffinJohnston
Copy link

@GriffinJohnston GriffinJohnston commented Nov 16, 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.

@btk
Copy link
Collaborator

@btk btk commented Nov 17, 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

plugins: [
   `gatsby-plugin-react-helmet`
    ...
]
@jakubtomas108
Copy link
Author

@jakubtomas108 jakubtomas108 commented Nov 19, 2018

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
Copy link
Contributor

@LekoArts LekoArts commented Nov 19, 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.

@gatsbot gatsbot bot added the stale? label Feb 1, 2019
@gatsbot
Copy link

@gatsbot gatsbot bot commented Feb 1, 2019

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
Copy link
Contributor

@fab fab commented Feb 11, 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.

@Jornve
Copy link

@Jornve Jornve commented Feb 14, 2019

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
Copy link
Author

@jakubtomas108 jakubtomas108 commented Feb 18, 2019

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

@DSchau
Copy link
Contributor

@DSchau DSchau commented Feb 18, 2019

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

developers facebook com_tools_debug_sharing__q https 3a 2f 2fblog dustinschau com 2fsearch-engine-optimization-with-gatsby

Additionally, see @jlengstorf's blog

Thanks!

@jlengstorf jlengstorf added not stale and removed stale? labels Feb 19, 2019
@jlengstorf
Copy link
Collaborator

@jlengstorf jlengstorf commented Feb 19, 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

@fab
Copy link
Contributor

@fab fab commented Feb 26, 2019

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
Copy link
Collaborator

@jlengstorf jlengstorf commented Feb 28, 2019

Glad to hear it, @fab!

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

@DSchau
Copy link
Contributor

@DSchau DSchau commented Mar 4, 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 DSchau closed this Mar 4, 2019
@walpoletim
Copy link

@walpoletim walpoletim commented Sep 2, 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/

@priyankoctal
Copy link

@priyankoctal priyankoctal commented Oct 4, 2019

@jakubtomas108

have you found a solution for this ?

@jakubtomas108
Copy link
Author

@jakubtomas108 jakubtomas108 commented Oct 4, 2019

Well, I did. Migration to NextJS.

@wfendler
Copy link

@wfendler wfendler commented Dec 2, 2019

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
Copy link

@GuttermanA GuttermanA commented Dec 5, 2019

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
Copy link

@crutchcorn crutchcorn commented Feb 29, 2020

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
Copy link
Collaborator

@malcolm-kee malcolm-kee commented May 1, 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 :(

@richardbruskowski
Copy link
Collaborator

@richardbruskowski richardbruskowski commented May 10, 2020

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 ( 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
Copy link
Collaborator

@jmadelaine jmadelaine commented May 12, 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.

@richardbruskowski
Copy link
Collaborator

@richardbruskowski richardbruskowski commented May 12, 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? 🤔

@malcolm-kee
Copy link
Collaborator

@malcolm-kee malcolm-kee commented May 12, 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);
};
@richardbruskowski
Copy link
Collaborator

@richardbruskowski richardbruskowski commented May 12, 2020

@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
Copy link
Collaborator

@richardbruskowski richardbruskowski commented May 12, 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.