React SEO: Tips for building an SEO-friendly app

You’ll learn the challenges that React applications face when it comes to SEO (Search Engine Optimization). To be more specific, you will see how React combines with search engine optimization techniques.

Introduction

Entrepreneurs rely on the most popular framework for developing web applications, React. And they are interested in the SEO side. When we talk about SEO websites on React face big problems. One of the main reasons is that developers mostly focus on the client-side rendering, whereas Google focuses on the server-side. And this creates huge problems for both React and SEO.

In this article, we’re going to talk about the basics of React SEO-friendly websites. In this guide, you’ll find a list of problems that prevent React from being search engine optimized. Also, we’ll see best practices that will help your app appear higher in Google search results.

How does Google bot scan web pages?

Of all search engines, Google gets about 90% of all queries when it comes to SEO. Before we delve into how SEO works for React, let’s take a look at how Google crawls and indexes.

The image below is taken from the Google Documentation.

Note: this is an example block diagram. Google bot itself is quite complex.

Points to remember:

• Google bot keeps track of a queue containing all the URLs it needs to crawl and index later.
• When the search bot becomes idle, it selects further URLs from the queue, queries them, and collects the HTML code.
• The bot decides whether to collect and execute the JavaScript code after analyzing the HTML. When necessary, the URL is added to the render queue.
• Subsequently, the renderer collects and executes the JavaScript to produce the HTML code, which is sent to the bot.
• The processing unit retrieves all the URL tags mentioned on the page and adds them back to the render queue.
• The content is added to Google’s index.

Have you noticed the difference between the rendering, JavaScript execution and HTML processing stages? The difference is the cost of resources. JavaScript execution is expensive, especially when you have 130 trillion web pages to crawl (note this is why Google bot often doesn’t execute JavaScript code, which is necessary for SEO in React).

General SEO problems

SEO for React sites is extremely important. Below are a few SEO problems that developers can fix.

1. Blank page on first view
React applications are known to depend on JavaScript. And as a result, they run into search engine problems. This happens because of the application model used by React. Initially, the HTML does not contain any important content, so the bot or user needs to download and execute JavaScript code to view the page content. This approach indicates that the Google bot sees a blank page the first time it passes through. Thus, the content will only be seen by Google after the page is rendered. This ends up leading to indexing delays within thousands of pages.

2. Page metadata
Meta tags are great because they allow social networks and google to display icons, titles and descriptions of a particular page. But social networks depend on the page tag for information. They don’t do JavaScript for the page to load. React displays any content, even meta tags. Since the application model remains the same for the entire application/site, it becomes difficult to tailor the metadata for each page.

3. Sitemap
A Sitemap is a file that contains all the details about videos, pages, and other sections of your site, as well as the relationship between them. Being a smart search engine, Google looks at this file to make it easier to read your site’s information. React doesn’t have built-in methods for creating sitemaps. If you use the React Router to navigate, you need to find ways to create a sitemap. Although it will take some effort.

4. User experience and load time
Regardless of the task, getting, processing, or executing JavaScript all takes a lot of time. In addition, JavaScript can make network requests to retrieve content, at which time the user has to wait a bit before viewing the requested data. And as for the search engine results bar, Google has developed a set of vital web features based on the user experience. Increased load time affects the user experience, making Google aware of a lower ranking site.

5. Other SEO Considerations.
Here are a few practices for building great SEO.

• Use CDNs to serve every static resource like JS, CSS, fonts, etc., and use adaptive images to reduce load times.
• Improving your robots.txt file can help search bots in the way they crawl your site.

If you want to improve the performance of your React application, React.memo is a great solution to achieve that.

Challenges of React SEO

Let’s see what problems React developers have to face when developing SEO-friendly sites.

1. Using a single-page application (SPA)

To reduce load time, developers create JS-based SPAs. This is the main SEO problem with React sites. Sites do not reload all content. Instead, these pages are updated. With the help of this is realized increased performance applications.

2. No dynamic SEO tags

SPAs load data in the process. Thus, when the site scanner clicks on a particular link, it makes it difficult to complete the page load cycle. The metadata cannot be updated. And this is the main reason why the bot scanner can’t show the SPA, eventually indexing a blank page. In the end, it all worsens the position of search results. However, there is a way to solve this problem, the developers need to create separate pages for Google bot. But this raises a new problem. Creating separate pages entails a business cost over and above the difficulties of ranking on the first page of results in Google.

3. SEO problems with the SPA

As you know, single-page applications are created to optimize site performance. There are several problems associated with SEO.

How to make React applications SEO-friendly

Below are approaches for improving SEO in React.

1. isomorphic React

Isomorphic JavaScript technology has the ability to automatically detect on the server side whether JavaScript is enabled on the client. At times when JavaScript is disabled, isomorphic JavaScript runs on the server side and provides the finished content to the client. All of the necessary content and attributes are immediately available as soon as the page begins to load. However, when JavaScript is enabled, everything works like a dynamic application with multiple components. This adds a faster loading time compared to conventional sites, thereby leaving the user with a more enjoyable SPA experience.

2. Prendering

As one of the best choices for creating single- and multi-page SEO-friendly applications, pre-rendering is commonly used when crawlers or search bots do not display web pages effectively. Prerenderers, are unique programs that limit queries to a site. In a situation where the request comes from a search robot, prerender sends a static HTML version. If there is a standard request, the page loads as usual.

Advantages:

• These programs are efficient enough to execute modern JavaScript and convert it to static HTML
• Easy to connect
• Support for the latest web standards

Disadvantages:

• It’s not free.
• Not suitable for pages whose data changes frequently
• Takes a long time to load if the site is too big

3. Server-side rendering: Getting HTML files with all the content

If you want to build a React application, you need to have a precise idea between client-side and server-side rendering. When rendering on the client side, Google bot and browser get empty HTML files with less or no content.

The JavaScript code then loads the data from the server and allows users to view it on their screens. However, the client-side renderer runs into a number of SEO problems. This is because the Google scanner cannot see any content or sees less than necessary, which prevents the page from being indexed properly. On the other hand, when rendered on the server side, the browser and Google robots get the HTML file with all the content. This helps the bots do the indexing and improves the ranking of the output without any hassle.

React SEO Best Practices

These practices will give you answers to the question of how to make your React app SEO-friendly:

1. Using React Router

You probably know that React uses SPA (single-page application). However, you can use the SPA model more optimally if you describe SEO elements and rules in a certain way on your pages. The guideline is to open the page as a separate URL without the hashtag (#).

(According to Google, it can’t read URLs with a hashtag, and therefore can’t index any URLs created by React).

Consequently, we create URLs so that they open on separate pages. We must use React Router hooks in the URLs. Below is a sample:

When creating content, we recommend that you refrain from using setTimeout. Because of this Google bot may leave the page and site without reading the data.

2. URL register

Google counts certain pages as individual pages when the URL contains lowercase or uppercase letters.

For example:
/vendi
/Vendi

Google will treat these two addresses as two separate pages. To avoid this duplication, always write the addresses in lower case.

3. Using “href” in links

Make sure that you set the “href” of the links. Unfortunately, Google bot cannot track onClick conversions. Consequently, it becomes important to specify an href in links to make it easier for Google bot to detect and visit other pages.

4. React Helmet

One important component of SEO is metadata. Thus, they should appear in the source code, even when using React. Using the same description and title on all pages may not be enough for CTR (click through rate) and other SEO indicators.

This is when React Helmet comes into play. Below is a sample code structure along with metadata:

If you can’t universalize the item description, try filling the description with the first 160 characters of the page content.

Make sure that the element’s data structure is preserved in the source code along with the metadata. (Organization schema, product, etc.)

For example, the raw and rendered versions of yolcu360.com are shown below. Structured data is displayed in protected form in both versions. Ideally, we should see no such difference.

Raw:

Rendered:

When we check a page with the Rich Results tool, it shows us whether the data on your page is structured and whether Google bot can easily view it.

You can display metadata or content and items in Google using Helmet and server-side rendering together. Any flaw or potential metadata errors can negatively impact each of the metrics presented in the search results.

5. Error code 404

All defective pages have a 404 error code. Consequently, this is a reminder to configure files such as server.js and route.js.

6. Images

You must point images to pages using “img src”. According to the study, although images appear in page elements without difficulty, the scanner cannot index them.

Correct usage:

Using anything as a CSS background in conjunction with React can lead to difficulties in indexing images.

Incorrect usage:

7. React.Lazy

Implementing lazyload will help users browse your site faster and will have a positive impact on Google’s download speed ratings.

You can find this package on npm.

You can use React-Snap to optimize site performance. Below is an example:

Compared to other JavaScript frameworks such as Vue or Angular, React can make do with smaller files. It does not publish unwanted and inapplicable code. Consequently, it helps increase page speed considerably. To be clear, you can split your 2MB JS file into several 60-70KB files and run them in separate processes.

Conclusion

Although React and SEO 2022 are widely used these days, there are several important terms associated with them. Which include React Helmet, React Router and React-snap. However, when using JavaScript, keep in mind that Google calculates and crawls HTML sites faster and better than JavaScript sites. But that doesn’t mean Google can’t crawl JS sites. The only thing you need to pay attention to is the need to be careful and know exactly what difficulties may arise along the way.