search

based-ghost / react-seo-friendly-spa-template

React PWA/SPA template initially scaffolded with CRA (Create React App) and configured for SEO. Makes use of prerendering and other techniques/packages in order to achieve a perfect "Lighthouse Score".
MIT License
52 stars 21 forks source link

Crawlers are not getting correct meta tags #2

Closed p32929 closed 2 years ago

p32929 commented 3 years ago

Hello, thank you so much for creating this template. I've been trying to find an SEO friendly react boilerplate and I came across this repo.

So, I tried to crawl the meta tags from the webpage using facebook ( https://developers.facebook.com/tools/debug/ ) & linkedIn ( https://www.linkedin.com/post-inspector/ ) crawlers. But it seems, the correct meta tags are not being visible. For instance: Screenshot_2020-12-04 Sharing Debugger - Facebook for Developers

Can you please help? Thanks in advance

based-ghost commented 3 years ago

@p32929 - Hey sorry, just saw this issue. I'll take a look quick and get back to you.

p32929 commented 3 years ago

Thanks. Please, take your time

based-ghost commented 3 years ago

@p32929 - I just merged a fix I believe. The issue I saw was that for og:title & og:description I had name attributes and instead it should be property attribute. I think that should solve the problem here. Let me know if you see anything else though.

p32929 commented 3 years ago

Today I cloned the repo again to see if its fixed. Sadly, still the same wrong meta tags :(

based-ghost commented 3 years ago

@p32929 - sorry for not pushing this out sooner, but based on changes I was playing around with, it looks like the meta tag values are updating correctly during routing. I did some refactoring to place a Helmet instance at the root of the application and then instances for each "route component/container". Two other changes could have fixed the issue as well I believe: 1). I set the defer property to a value of false on Helmet instances which forces the changes to execute synchronously and immediately; 2). I refactored the WithTracker.tsx component in some minor ways (most notably using the useLocation hook and referencing the location object returned in the useEffect - maybe this more consistently triggers this effect? Prior, to this change I was just referencing the window.location.pathname in the effect.