SEO & React

2022-04-03

Please have in mind these are field notes organized in a common structure that I use for myself or for my students, university classes and industrial activities. They may be messy, with errors and in some cases, without proper references. If you find your work (or part of it) here without proper acknowledgement, please let me know so I can fix it as soon as possible.

This is a screenshot taken from here: https://www.youtube.com/watch?v=3B7gBVTsEaE pasted-image-20220214145136.png

Don't confuse Googlebot (the crawler) with Caffeine (Google’s indexing system). The crawler can't "run a React application"; the indexer is the one that "runs the application".

The crawler get the page as when you do a curl example.com. Just a regular GET. After that the crawler halts because it can follow any hyperlink and send the page to the indexer. The indexer "understand" the page and render it, extracting the hyperlinks which then are added to the crawler's queue. Eventually the cycle starts again (crawler GET the new page, halts, send it to the indexer and so on).

That is why websites built on React (and other JavaScript platforms) perform worse in Google than websites that primarily serve plain HTML to the crawler.

The best solution is to opt for Server Side Rendering (SSR) or Server Side Generation (SSG) mainly due to:

  • Faster initial renders.
  • Not having to rely on search engine crawlers to render content.
  • Improvements in TTI due to less JavaScript code for the browser to parse and render before becoming interactive. Source

Significant Revisions

Apr 3, 2022: Original publication on dariomac.com

Darío Macchi