React SEO-friendly

Most people use Google to search for information. Therefore it has never been more important to be visible on Google. But it is not enough to just be visible on Google. Your single-page app needs to rank high in the Google search results because most people click on one of the first three alternatives.

How do you rank high on Google?
SEO, search engine optimization, is a big and complex area. In this article, we'll focus on React (or React.js as it is formally named) and its effect on SEO. But to summarize SEO it is about making it easier for Google to find the right content for the user. When a user makes a search Google tries to find which page is the most relevant to that specific search.

Nobody knows the exact algorithm for how Google ranks which page is the most relevant since it is proprietary technology but there are several factors that almost everyone agrees on that affect the ranking in Google. Examples of such factors are which other sites link to the site, how fast the site is, and a page that is easy for Google's crawl bot to read.

What is React and how does it affect your SEO?
React is a Javascript-framework (even though some people would rather call it a a library) that can be used for building the user interface of a site. It makes it simple to build interactive websites and apps that feel fast. React enables you to for example achieve that “app feeling” of navigating between pages without a reload which increases the user experience.

React gives you a SPA (Single Page Application) which requires Javascript to show the content on the page. The problem is that the Google crawl bot, that scans all the pages on the internet, isn’t as good as understanding a page with javascript compared with a page that consists of regular HTML-code.

For a long while Google couldn’t at all see the content that was rendered with Javascript and they used to recommend that the content could be viewed without Javascript enabled. But a couple of years ago Google announced that their crawl bot can now renderer pages with Javascript and index them.

So Javascript and SEO isn’t a problem anymore?
Yes and no. It is correct that Google announced in 2015 that they can now render and index content that requires Javascript so in theory it shouldn’t be a problem. However, theory and practice aren't always the same. Most SEO professionals agree that Google has a harder time reading and indexing pages that requires Javascript compared to one that doesn’t require Javascript.

Should you avoid using React for SEO reasons?
No, absolutely not. React.js, just as Angular.js or Vue.js, helps the developer to create a great user experience which is positive for SEO.

React and Server-Side Rendering
The key to making React more SEO-friendly is to make sure Google doesn’t have to use Javascript to render the content. It can be achieved by using Server-Side Rendering (short is SSR).

Normally React is run in your web browser after you downloaded all the files from the website you are visiting (called Client Side Rendering). Server-Side Rendering means that you run the Javascript code on the server before you send the files to the user for the first time.

That means that the visitor can see the content directly without having to wait for React to run first, It can make the page a little bit faster (especially on older computers) but more importantly it means that Google doesn’t need to run Javascript to read the content of the page.

How do you set up Server-Side Rendering?
It can be complex to set up Server-Side Rendering in React if you do it from scratch. But don’t lose hope. There are several frameworks that build upon React, which makes it very easy to set up Server-Side Rendering for a React-page. Two common frameworks for SSR is Gatsby.js and Next.js.

Gatsby.js
Gatsby.js is a React framework for generating static pages where you generate all the pages on your computer (or on a computer in the cloud) and then sent the pre-generated pages to a server/cloud storage service such as Amazon S3. Gatsby.js is a good alternative for pages where the content doesn’t need to change in real-time. Example of websites that work great with Gatsby is blogs and corporate pages. Gatsby.js is less optimal for pages with a lot of user-generated content such as forum-pages.

Read more about Gatsby.js at their official page or get help from one of our skilled Gatsby developers.

Next.js
Next.js takes another approach than Gatsby (even if they have the possibility to generate static pages just as Gatsby). When a user visits a page for the first time Next.js pre-renders the page before it sends the files to the user. The big advantage of Next.js compared to Gatsby is that it is generated when the user requests it which means that the content is always updated in real time, That means that Next.js is a great choice for pages with a lot of user generated content like forum-pages.

Read more about Next.js on their official website.

Should you use React for your next SEO-project?
Which technology you should use is always specific to the project and what you want to achieve (and another factor is what tech-stack your team is familiar with already). But React is often a very good choice to build an SEO-friendly website as long as you set it up correctly. At Proxify we have many skilled React developers that can help you and make sure that your React site is optimized for both the user and SEO.