Caching issues with meta data caused by @netlify/plugin-gatsby

I have been noticing some incorrect meta data on a few of our Gatsby SSR pages. If I inspect the page with view source I can see the SSR html code and the meta title, description, og title, og description., twitter title, etc. are all incorrect and show data from another unrelated page. Everything else looks fine on the page except the meta data is coming from another page. But if I view the page and inspect with the chrome dev tools I see the correct meta data. This at least tells me the SSR page starts with incorrect data and then the correct meta data is added on page load. This seems to be related to the @netlify/plugin-gatsby because clearing the cache and triggering a rebuild would fix the issue every time we saw this.
Ive had to remove the @netlify/plugin-gatsby(v2.1.2) because this issue was starting to happen too often over the last 2 weeks. So I do not have a live example to show. What I do have to show are a couple screenshots below that I took when this was happening yesterday. The project repo is also private so Im afraid I cant share a code base. We have a paid Netlify account here so maybe the support team can take a look at the logs of this site.

One thing that might help is if you can describe how the Netlify cache plugin is affect that the SSR process? The Netlify cache plugin is somehow grabbing the wrong meta data with our SSR Gatsby pages.

This is the page view source showing the meta data for the wrong page:

This is a Slack URL share showing the wrong meta data:

Hey @davidbbe,

Sorry for the delay here. I checked now and it appears that the page is showing correct metadata. Are you still having this issue?

@hrishikesh I mentioned in my post that I had to remove the @netlify/plugin-gatsby in order to get the meta data to work correctly. So its working only because I uninstalled @netlify/plugin-gatsby. I would like to use @netlify/plugin-gatsby but not until can figure out why this plugin is causing meta data issues on our site.

The problem still exists. Can you help me figure out why?

Can you describe how this Netlify cache plugin is affect that the SSR process? The Netlify cache plugin is somehow grabbing the wrong meta data with our SSR Gatsby pages.

Hey @davidbbe,

Would you be able to setup the site on another URL so we can check? The thing is SSR responses are never cached (but DSG are), so we do not expect this behaviour at all. Once we have a URL to check, we can try to produce some theories.

@hrishikesh I installed the Essential Gatsby plugin on https://particle-staging-01110000.netlify.app Take a look there and let me know if you see anything that could be causing this.

Hey @davidbbe,

For the page:

That’s the meta that we’re seeing. So the text is:

Understanding where IoT is in its hype cycle isn't just a thought exercise. It can have major implications for how you think about solving customer problems by deploying connectivity in your solutions.

Since you didn’t mention what the expected text was, I’m not sure if this is cached or correct. It does appear to be different from the one you posted, so I’m assuming it’s correct?

Are there any other pages affected, or is that the only one? Did you notice the cache get cleared automatically in a few days or something of that sort?

I also have the same problem. I think @davidbbe has been very clear about the issue.

Hey there, @jonathanphz :wave:

Sorry to hear you are having the same problem! Can you please outline in full detail what you are encountering (error message, steps to reproduce), and also share a link to your URL? Thank you!

Exactly what @davidbbe described: “If I inspect the page with view source I can see the SSR html code and the meta title, description, og title, og description., twitter title, etc. are all incorrect and show data from another unrelated page. Everything else looks fine on the page except the meta data is coming from another page. But if I view the page and inspect with the chrome dev tools I see the correct meta data.”

If I then deploy and clean cache from Netlify’s dashboard I get the correct meta data values. Seems a Netlify cache problem. Can’t share a url because it’s a private repon for a client.

Are there any steps to debug netlify’s cache? @davidbbe mentioned: “I had to remove the @netlify/plugin-gatsby in order to get the meta data to work correctly. So its working only because I uninstalled @netlify/plugin-gatsby. I would like to use @netlify/plugin-gatsby but not until can figure out why this plugin is causing meta data issues on our site.” Seems to me he’s found the problematic package.

thanks for that, but it wasn’t what Hillary asked for :upside_down_face: Could you please share the URL of an affected page with us so we can debug it directly, if you’d like our direct help in troubleshooting? The site, path, etc are all relevant as we’ll load pages using debug flags and see what we can see in our internal logs to help troubleshoot.

You can certainly debug our cache on your own, of course, there is even a plugin for it:
netlify-plugin-debug-cache - npm :slight_smile:

Or, you could try creating your own cache using our build image locally, so you can even root around in it and interact with it: GitHub - netlify/build-image: This is the build image used for running automated builds

Note that since our build cache is available during builds, you can also add or remove things from it. This part of our build process shows where you can find it in case you want to try working with it directly during or at the end of your build (e.g. remove an offending file after build so it isn’t cached):

…which is not something many people do, but isn’t against the rules :slight_smile:

Hi @fool,

Many pages are showing the wrong social media card information. If I look at dev tools I can see the correct values but if I then go to “view page source” I can see the wrong values which are the same appearing in social media. If I then go to Netlify’s dashboard and re-deploy and clean cache then I can see the correct values showing again. Basically the same problem @davidbbe described above.

Not sure if you’re reading carefully but I wrote above that I can’t share the url, at least not publicly. If you’d like I can share one privately although since I’ve been re-deploying and clearing cache I’m not sure I’ll find a buggy one. But it does keep happening.

So to be clear:

  • Some page are showing the incorrect meta tag information on social networks.
  • If you look at dev tools it does show the correct meta tags values but if you view page source then you can see the incorrect values which is what’s being crawled.
  • Re-deploying and cleaning cache from Netlify’s dashboard does fix the problem temporarily.
  • Is there a way to share a url privately? This is a paid account.

There are no errors.

If you haven’t noticed, there’s a DM option on each user’s profile. Just make sure that if you send a DM, send it to more of our folks so we’re not limited to a single person’s availability to share the details with the rest of the team.

You can share it with me, @hillary, @Melvin, @audrey or even @fool.