Skip to main content

Best SEO Practices for React Websites

Posted in Strategy & Analytics on January 11th 2018
author photo
COO and Co-Founder

React websites pose a big challenge when it comes to SEO. This article provides an introduction to what the challenges are and how to deal with them in order to rank higher.


SEO Introduction


About 92% of the web traffic comes from the first page of the search engine results while about 75% of the traffic goes to the top 5 websites on the list. Smartphones have led to the rise in search volumes drastically. Hence, for a business, one of the most important sources of web traffic is the search engine.

Search Engine Optimization (SEO) is a process of structuring and organizing your website to bring a better quality and quantity of traffic to your website by ranking higher in the search engine results, focusing on the specific keywords related to your business. The main aim of performing the SEO process is to gain more visibility on the internet and drive more traffic to your website.

Search engines today rely on crawling the content that is put on your websites. Since this process is automated, it is extremely important that the content is structured and formatted in a manner that is understandable by machines. The SEO process involves optimizing the website performance and also curating the content to provide hints to the search engine crawlers to easily understand your website.

This may sound fairly straightforward, but for websites built on React, this may not always be the case. Let’s have a look at the reasons why.


Challenges with SEO for React Websites

a. The use of React-based Single Page Applications


Since the start of the World Wide Web, websites worked in such a way that the browser needed to request each page completely. To simplify the server generates HTML and sends it back on every request. Even if the next page has a lot of the same elements (menu, sidebar, footer, ...), the browser will still ask for the entire new page and re-render everything from the ground up. This causes a redundant information flow and additional stress on the server that needs to fully render each page instead of supplying only the required information.

With the advancement in technologies, the requirement for faster loading times increased. To resolve the issue with the full page loading time, developer communities came up with JS-based Single Page Applications or SPA. These websites do not reload the whole content on the website, instead, they refresh only the content that differs from the current page. Such an application improves the performance of the website drastically as the amount of data being transacted is reduced. One good example of technology that can be used to create SPAs is ReactJS, which is as well optimizing the way the content is rendered on the user’s browser (more about this here).


b. Main SEO issues with SPA

Although SPAs improves the website performance to a considerable extent, there are certain inherent issues in this type of setup when it comes to SEO.

Lack of dynamic SEO tags

An SPA loads the data dynamically in selected segments of the web page. Hence, when a crawler tries to click a particular link, it is not able to detect the complete page load cycle. The metadata of the page which is in place for the Search engine does not get refreshed. As a result, your single page app cannot be seen by the search engine crawler and will be indexed as an empty page, which is not good for SEO purposes.

Programmers can solve this problem by creating separate pages (more often HTML pages) for the search bots, and at the same time work with the Webmaster to discuss how to get the corresponding content indexed. However, this will increase the business expenses owing to the cost of developing additional pages and also make it difficult to rank websites higher on the search engines.

Search Engines may or may not run your JavaScript

Every Single Page Application relies on JavaScript for dynamic loading of the content in different modules of a webpage. A search engine crawler or bot might avoid executing JavaScript. It directly fetches the content that is available without allowing JavaScript to run and index your website based on this content.

Google made an announcement in October 2015 mentioning that they would crawl the JS and CSS on websites as long as they allow the crawlers to access them. This announcement sounds positive but it is risky. Although Google crawlers are smarter today and they allow execution of Javascript, one cannot decide solely based on a single search engine. There are other crawlers like Yahoo, Bing, and Baidu which see these sites without JavaScript as blank pages. To resolve this, one needs to create a workaround to render the content server-side to give the crawlers something to read.


Solutions for SEO of React-based SPA websites

There are 2 major ways to resolve the SEO issues being faced in the React-based SPA websites.

1. Isomorphic React

2. Prerendering

a. How does Isomorphic React help in SEO?

An Isomorphic Javascript technology based React website automatically detects if the JavaScript is disabled on the client side. In a scenario where JavaScript is disabled, Isomorphic JavaScript runs on the server-side and sends the final content to the client. In this manner, all the necessary attributes & content are available when the page loads. However, if JavaScript is enabled, it performs as a dynamic application with multiple components. This provides faster loading than traditional websites, a wider compatibility for older browsers and different crawlers, smoother user experience and the features of Single Page Application as well.

b. Solving the problem using Prerendering


Although Isomorphic React is one of the ways for SEO of SPA websites, there are alternate approaches too. One of these approaches is to pre-render your website with a service like Prerender that uses Headless Chrome to render the page in the same way as a browser. Prerender will wait for the page to finish loading and then return the content in full HTML. Just like Isomorphic JavaScript, search engine crawlers can be targeted specifically to use Prerender while other browsers can still render the page by themselves.

This approach has the following advantages:

  • Allow the website to be correctly crawled by search engines.
  • Easier to set up because we won't need to make the codebase compatible with server-side rendering.
  • Unlike Isomorphic Javascript, Prerender has less pressure on the server as it's just a simple website rendering engine.

Additional tools to improve SEO of React Websites

React is not inherently optimized for search engines, so a set of tools can be used to create websites that are more Search Engine friendly.

React Router v4

React Router is a component to create routes between different components or pages. This makes it possible to build a website with a Search Engine friendly URL structure.

React Helmet

React Helmet is the most important component when it comes to the SEO of SPA. React Helmet is used to manage the metadata of the corresponding web document that is being served via React components. Being a library on top of React, React Helmet is also executable on the server-side as well as client-side.

The major advantage of React Helmet is the ease of integration without any major changes in the page coding.


Conclusion

Single Page Applications created using React have excellent page load times and help in easier code management due to component-based rendering. SEO of React-based SPAs takes some additional effort to configure the application. However, with the perfect tools and libraries in place, business owners and web community are rapidly shifting to Single Page Applications for outstanding load times.

More to come...

Implementing analytics systems on React is also a challenge, especially when your React website is based in China. In future articles, we will explain in details how to integrate 'react-ga' and Baidu Tongji on a React website to track page views and custom events. Stay tuned!

 

More to read

 

About the author

Thomas Guillemaud

COO and Co-Founder of IT Consultis

As the COO of ITC, Thomas manages all operations and promotes the adoption of new technologies and philosophies within the company. In addition to raising the efficiency of each project, he invests his time in coaching and mentoring the project management as well as the development team, ensuring they all have standardized knowledge and skills to successfully meet client's expectation.