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.
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.
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 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:
It also comes with its own shortcomings:
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.
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