Is React SEO Friendly in 2021?

By Ten Squared, posted on the 9th of September, 2021 · 7 minute read

It is common knowledge today that React websites create a user experience that WordPress could never create. The number of features they provide are exceptional and allow designers and developers alike to create incredible websites that work efficiently.

Having said this, it doesn't matter how good your website is if no one can find it. This brings us to the question that once was a valid question which is: Is React JS SEO friendly?

Let's start by establishing the importance of SEO. 90% of search traffic goes through the worlds biggest search engine Google. The first 5 links displayed by Google get most of that traffic, if the first 5 links aren't getting all of the traffic then Google is not serving its customers the right results. So this brings the question, how do you convince Google that your website is the right result to show to its customers? Fundamentally, this is what SEO is about, it is a competition between all websites who want to rank for a term to convince Google that their website is the best result.

Bots

With thousands of websites on the internet to choose from, there is only really one viable way for search engines to rank them. This is through bots. These bots crawl through websites page by page based on your robot.txt file. As they crawl through your website they analyse your content and try to understand what the content is about, yes you are reading that right, a bot has already read this and is likely the reason you are reading this too. Aside from content, there are many other factors that are considered when ranking a website including security and site speed, two things React is famous for.

How to help the bots

Now there were previously issues with React that prevented bots from doing their job, here is what you can do to overcome these shortcomings, and yes, the shortcoming can be overcome.

Pre-rendering

Pre-rendering is the most common way to make a React page SEO friendly. This is helpful as sometimes a bot can struggle to render your page correctly, if they cannot render your page correctly then they cannot crawl them. Hence pre-rendering is used to send static HTML versions of your website to the bots.

This comes with the following advantages:

  • Pre-rendering can be used to execute all types of modern JavaSCript and transform it into static HTML
  • This approach is the easiest to implement.

It also comes with its own shortcomings:

  • It will not help with pages where content is updated frequently
  • Pre-rendering can often take time
  • Many pre-rendering services charge by the amount of time the server is being used so larger sites can be more expensive.

Use Gatsby JS

Gatsby JS is a free, open-source, React-based framework designed to assist developers in building incredible websites and apps. In essence, Gatsby is a static website generator that uses React. Hence, React provide the essentials for developers including the core functionality. it is designed to be lightweight and broadly applicable. When combined with Gatsby JS the possibilities are endless.

So how can Gatsby be used to improve React?

Gatsby was created to take React and make it a viable option for everybody. It is designed to boost performance by only loading the critical HTML, CSS and JaveScript. After the first page is loaded, it prefetches resources for other pages you might navigate to. By loading content, before you need it, the website becomes perceivably faster.

What is a static site?

Static websites have been around for a while now, they are almost like returning to the first websites which were basic and nothing but HTML, CSS and JavaScript. The fundamental idea is the same, they are not rendered in real-time like some other websites. Not rendering in real-time and pre-rendering means that you can save time when loading your site for your users. You essentially lighten the load.

Gatsby JS is also great for SEO and the creators have addressed all the shortcomings of React JS.

If you are considering using Gatsby JS to develop your website, feel free to send us a message via our contact form and one of our developers would be happy to help answer your question.

Photo by Arseny Togulev