React SEO challenges

SEO (Search engine optimisation) purpose is to make site visible and easily found by users. Google is most used search engine, and there are other less used, like Bing, Yahoo, Yandex, CC search etc. 

Search engines are using crawlers to find pages and index the content of websites. Crawlers are going through the queue of URLs, fetching initial HTML, finding appropriate content and links to other pages, and saving that informations for later user searches. 

For the most of web sites, it is very important that content is indexed and that it appears in relevant user searches. That is why SEO is one of the topics that must be considered already in the phase of planning for web site. It can inpact architecture decisions and it can save resources if you made correct decisions on time.

React is one of common JS frameworks that is used for developing SPAs (Single page applications), which means that HTML is generated on client side, and that initial content of site is empty HTML, with a script that will be loaded and executed, in order to generate HTML. 

Google crawlers will postpone indexing of pages that need JS code to be executed to render HTML, so it can take more time for indexing pages, but it should be executed at the end. Other search engines (that are taking around 20 % of market share) don’t support JS generated HTML. Client side rendering of SPAs lead to one more issue – it can have negative impact on core web vitals (first page load can be  long, but with next visit it is faster), and that means lower ranking by search engine. 

There are solutions for this challenge:

1) Static rendering – save static HTML per each url on site. Improves web vitals for page, but It is not appropriate for sites that should serve live, personalised data.

2) Pre-rendering – capturing an initial state of pages as static HTML, as in static rendering, but major part of JS code still should be executed in client. 

3) Selective pre-rendering – if first approach doesn’t fit to your site, it is possible to pre render html only for search engine bots, based on user-agent information. With this approach, content must be the same for users and for bot.

4) Server side rendering – if you need personalisation on the page and to serve fresh data, then it may pay off to have server side rendering. It increases time for page load  which means negative impact on web vitals, but there are tactics for minimizing this impact. 

5) Rehydration – server side rendered HTML with js embedded into the resulting document. It is initially served, and reused on the client side to update HTML, which can increase time for interactivity, but it have positive effect on First Contentful Paint.

Next challenge – in the SPA there is only one head tag per whole site, which is not SEO friendly, because each page should have its own meta tags that describes its content. There are some existing solutions for this, like npm package React-Helmet which enables creation of meta tags per each route.

General tips for SEO:

  • Manage site crawl budget – time and resources spent on indexing of some site is limited. This budget is calculated by Google (factors that goes in this equation: responsiveness of the site, settings that site owner sets in search console, uniqueness of content on site, popularity of your site…). Create robots.txt file to spent budget on best way (It is used to define settings for crawlers in order to optimize indexing. Settings can be set for all crawlers and can be granular – for specific crawlers. Settings include which parts of sites crawlers should skip, define sitemaps locations, add delay if needed – to avoid performanse issues).
  • Create sitemap: Sitemap is a file used to introduce all your new or changed pages  to google crawlers, so they find and index all of them. It is helpful to cover pages that are not linked on your navigation of site or mentioned on some other page on your site.  If you want that your media files appears in search, they should also be added in sitemaps. For react there are frameworks that can work with react router to generate sitemap.
  • Crate meaningful content and url of the page should match content.

If you want to check index coverage for your site, on this link you can find instructions for index coverage report, with explanation and advices how to improve it.