I was just wondering about SEO. Google spiders look for html, and well formed html, but react apps are mostly js with not much html. Look at my demo for React Routing from “Learning React” (https://jamesallan626.gitlab.io/reactspa/) and view the page source. What you see mostly is js and minified js at that.
I always think about SEO, so are there any articles around that discuss this issue? I’m wondering how Spiders deal with React sites, and what SEO good practices I can follow when coding in React?
I haven’t been keeping up with SEO but I remember working with google years ago on getting Flash to be more SEO friendly. This included making SWFs dynamically “searchable” by google indexing spiders. They would literally open and play the SWF and navigate through its buttons to identify the content within it. I’m assuming they may do something similar with SPAs out there today, but I’m not sure.
At any rate, its not uncommon to render content - through react - on the backend and push that to the browser on initial requests to help with SEO and improved performance. Then client-side react “hydrates” that content, hooking into what’s there rather than rendering it directly. If this can be done with any route, then spiders can read all the links in your app as independent pages with all expected content.
… and now I’ll do the extra step of googling and… yeah seems like result #1 confirms what I said first, that crawlers can pretty much handle what you throw at them: https://medium.freecodecamp.org/seo-vs-react-is-it-neccessary-to-render-react-pages-in-the-backend-74ce5015c0c9
3 Likes
Building a one page app which may contain many views/pages is great and has wonderful performance though not all crawlers can ‘see’ past your root div and a notification to make sure JavaScript is enabled. Google crawlers can see the code but try the W3 Validator Service or GTMetrix and others out there. For this reason you could learn how to server render it into a static site, or you can use a solution like Gatsby Great documentation and not a steep learning curve if you’ve already grasped the basics of React. I use this. It’s still React plus much more. Great for SEO and GTM etc., you get a great final static site and also a full React App. Very good things will be coming up in the near future versions of Gatsby too.
Thanks for the tips. I know nothing of Gatsby and will look into it.
But for fun, I just ran the Gitlab sample Gatsby site [https://pages.gitlab.io/gatsby/] (a very crude 2 page site) through GTMatrix and it gave me poor PageSpeed/Yscore ratings of around 80%. 
I then proceeded to run a more sophisticated and playful React Site (this one right out of “Learning React” by @kirupa [https://jamesallan626.gitlab.io/strikecounter/] and which counts the number of lightning strikes on the planet Earth every second) through GTMatrix and it gave me superior scores of around 90%. 
2 Likes
Hi, no problem. I’m surprised at the results you got. I believe I get about 94% on GTMatrix though it’s not detecting the CDN that caches my sites, unless I’ve forgotten to restart it! With a Gatsby build using Chrome’s Audit tool I get 100% 100% 100% 93% 100%. The 93% is because my host isn’t using the latest http protocal.