Build SEO friendly website with React

The primary intention of developing any website, irrespective of the framework you use, is to be “findable” on search engines. Search engines crawl through the applications and rely on the content put inside the application. And hence it is extremely important to have understandable and structured app content. But, React-based websites face their biggest challenge when it comes to Search Engine Optimization. And hence many developers are still hesitant about using React for their website development. But the good news is, you can make react SEO-friendly. This blog shares the ways in which you can build an SEO friendly site with React. Keep reading further.

React-based websites are gaining much more traction than ever before. Facebook, Twitter, & Google have set the benchmarks for React-driven Single Page Applications (SPA). However, the only limitation they faced is in their SEO capabilities. Search engines have a different approach to React. This blog will discuss the SEO problems with React and how you can deal with them and build a single page React app SEO-friendly.

SEO for React-driven websites is important because 95% of web traffic goes to websites visible on the first page of search engines. Not just that, almost 65% of web traffic goes to the top 5 ranked websites. Well, now you decide, can you afford to lose the attention you will get if you are on the first page of the results?

You are reading this blog for two reasons: first, you already have a React-driven website or second, are planning to develop one. For both scenarios, it is important for you to understand how Google crawlers work?

The primary task of a search engine, be it Google, Bing, or Yahoo, is to show results relevant to the keyword query made by the target audience. And to do this, search engines use web crawlers, also called bots.

Bots regularly visit the website and analyze the content on every web page for better understanding. It regularly checks for new content updates on the web pages based on its various algorithms, number of backlinks, and more.

It downloads the HTML and CSS files and sends it to the respective servers. This is further analyzed and indexed by the search engines. And the most relevant search results are shown to us. As simple as it may sound, dealing with React-driven websites is a real hassle. Why? Read the next section.

Build Single Page React App with SEO-Friendly

What is a Single Page App, and Why does it face problems for search engine optimization?


A SPA is a web application or a website that dynamically interacts with the web browsers. The app creates a virtual DOM in which the static HTML file is inserted. Hence, when a user interacts with the app, the app doesn’t reload the whole new page or the content; instead, it only updates the required data for the specific query.

It is very easy and effortless to develop a SPA from a developer’s perspective. The reason being, you can keep the front-end and back-end separate and work upon it. Additionally, SPAs ensure better performance and improved user experience. React-based SPA works across all modern browsers, which is a blessing in disguise.

But the real problem starts when the SPA has to be optimized for search engines.

As mentioned above, in Single Page Application, the page first loads on the client-side, and this acts as an empty container. And step by step, Javascript integrates content into this empty container. Additionally, you need a browser to run the script put into a SPA, then only it will dynamically load the web pages.

Hence, when search engine bots visit the SPA website, it would not be able to crawl a page unless the complete content is updated in the user’s browsers. Bots will only be able to see the HTML code, which is visible on the client-side.

On and all, the bots will find your website is blank or poorly constructed if they do not find any relevant content. And as a result, the website is not indexed by the search engine. If you do not believe this news, here are a few announcements made by Google:

Times have changed. Today, as long as you’re not blocking Googlebot from crawling your JavaScript or CSS files, we are generally able to render and understand your web pages like modern browsers. To reflect this improvement, we recently updated our technical Webmaster Guidelines to recommend against disallowing Googlebot from crawling your site’s CSS or JS files.

Another update made by Search Engine Land from May 2015 confirms the same:

We ran a series of tests that verified Google is able to execute and index JavaScript with a multitude of implementations. We also confirmed Google is able to render the entire page and read the DOM, thereby indexing dynamically generated content.

SEO signals in the DOM (page titles, meta descriptions, canonical tags, meta robots tags, etc.) are respected. Content dynamically inserted in the DOM is also crawlable and indexable. Furthermore, in certain cases, the DOM signals may even take precedence over contradictory statements in the HTML source code. This will need more work but was the case for several of our tests.

We hope you are clear with the reasons why React development faces SEO problems. But that’s not it, few other issues related to this are:

Long Delays in fetching content:

The web crawlers visit the website regularly, not daily. And hence, if the content on the page is updated with each query, then it is missed by search engines for indexing. Once the HTML, CSS, and Javascript files are downloaded, the data is fetched from the API and then only sent to the server.

Restricted Crawling budget:

No matter how many pages your website has, a search engine bot will crawl through it for a limited period of time. In this limited time, it will analyze as many pages as it can, but once the time is up, it will leave the website. Hence, if Google has to wait too long for your website to load, parse, and execute the code, it will leave the site as soon as it has exhausted the crawling budget.

Errors in the Javascript code:

We know that the website is developed after writing heavy lines of codes. And, a single error in the Javascript code can make it difficult for search engines to index the page. The JavaScript parser can not process the error and instantly shows SyntaxError. And hence, you need to double-check the JavaScript code before submitting it to Google.

Single URL for all pages:

This is one of the major drawbacks of Single Page Applications, one URL for all pages. If there is only one web page on the website, one URL is acceptable. But for multi-pages within the website, if the URL is not updated, it becomes almost terrible for the search engine to index the page. This is one big issue React-based SPA faces quite often.

Meta tags:

To acknowledge Google about our web page content, we need unique page titles and descriptions for each page. If not done so, Google will have the same description for all the pages. However, this practice is causing trouble for Single Page Application with React Native because you cannot change these tags in React.

Build Single Page React App with SEO-Friendly

How do you combat these SEO-related React challenges?


There are two major ways of optimizing single-page applications (SPA) for search engines,

1. Isomorphic React

2. Prerendering

Let’s first understand the first approach,

Isomorphic React apps:

In layman words, an isomorphic application is one that can run on both sides, the client as well as the server-side. This means, if the JavaScript on the client-side is disabled, the JavaScript on the server-side is executed, and the response is sent to the user.

This way, you can run and showcase the HTML file, and all the other components are loaded. An isomorphic app is dynamic, which means all the attributes and content made available when the page loads. It defines if the client-side is able to execute the JavaScript or not.

If it doesn’t, the query is passed to the server, and the server renders all the required tags, content, and attributes.

This way, the website loads faster than the traditional ones, and the app shows wider compatibility with the older browsers. Isomorphic React apps also ensure a smooth and seamless user experience. But, but… it is really a time-consuming process. However, you can use Next.js and Gatsby frameworks to carry out the process.

Prerendering:

An alternative approach to the isomorphic React app is, prerendering the website. This can be further elaborated as all the HTML elements are preloaded and cached using Headless Chrome. The pages are rendered in a similar way as a browser. The prerendering service, like prerender.io, collects all the requests and waits for the whole page to finish loading.

The user-agent identifies if the bot or user is viewing the website. If it is a bot, the cached HTML version of the page is displayed, and if it is a user, the SPA loads normally. Prerendering benefits in a number of ways,

It allows the website to be rightly crawled by the search engines;

It is easy to set up an SEO-friendly SPA because you do not need to make the codebase compatible with the server-side rendering;

It puts less pressure on the server as compared to the isomorphic approach.

If you already have an existing app and wish to improve the search engine rankings, then there are tools available using which you can make your website SEO friendly. Have a look...

React Router V4:

React Router is a library used for creating routing of a React app. It helps in creating routing between different components or pages, making the website structure more SEO friendly.

React Helmet:

Less known to the React developers, React Helmet is also a library that allows developers to set HTML metadata in the header of the component. Surprisingly, this tool is executable on both the client as well as the server-side. React Helmet allows easy integration into the website without making any significant changes in the page coding.

Fetch as Google:

It helps in troubleshooting the problems related to Google’s crawling on our website.

Conclusion:


While developing a website with React, you need to be very careful with the website structure, what pages are loading, when it is loading, and how long it will take the search engine bots to crawl and analyze the pages. Single Page Applications offer seamless user experience, native-like feel, and improved performance, and it should not be disregarded just because of the SEO challenges.

The steps and the tools mentioned above will help you to overcome the SEO issues with React. You can hire web developers who would assist you with the process of React web development. It is indeed challenging to cover up the SEO challenges, but you will get the results eventually.


ABOUT THE AUTHOR
blog Author - kodytechnolab

Jigar Shah

Java Developer


RELATED POSTS