How to Make a React Web App SEO-Friendly

Over 9 million websites are built with React. Facebook, Instagram, Netflix, Airbnb, and more world-known sites are among them. And while there are concerns about React’s compatibility with search engine optimization (SEO) practices, if you google “watch series online” or “book apartments,” Netflix and Airbnb will appear at the very top of the search results. So what’s the secret? What’s difficult about combining JavaScript and SEO, and how can you build SEO-friendly React applications? Read on to find out the answers.

Why is SEO important and how does a search engine work?

Search engine optimization is the practice of increasing quality traffic to your website by employing practices that generate organic clicks from search results. Once you’ve decided to build a web app, you’ll definitely want it to be discoverable on Google. That’s why you need to decide how to ensure search engine optimization of your website before you start developing it. And to make your web app SEO-friendly, you need to know how Google examines website pages and decides on their priority. Roughly speaking, you can divide this process into three steps: crawling, indexing, and ranking.

Step #1. Crawling

Crawlers like Googlebot search the internet for new and updated websites with the purpose of identifying their contents. Crawlers find new pages when they follow links from sites they already know. They also crawl sitemaps and web pages offered by managed web hosts.

Step #2. Indexing

Once Googlebot finds new pages, Google tries to understand what these pages are about. While Google can understand the contents of images and videos, it understands text best. Take advantage of meaningful titles, headings, proper meta descriptions, and topical content so that Google sees what you want it to see on a particular web page.

Step #3. Ranking

The last step Google takes when working with new pages is ranking them to determine how relevant they are to users’ requests. When a user types in a search query, Google provides a list of results ranked from the most to the least relevant.

As you can see, it’s important that your website includes pages with content your users are looking for. And the higher the quality of the content, the better it is for your site’s position in Google search results.

But what’s the problem with React and SEO, and why does the question of their compatibility frequently arise? Let’s dive a bit deeper into the technology to understand how React and SEO are connected.

React and SEO: What’s the trouble?

React is an open-source JavaScript library used to create fast and responsive user interfaces (UIs). It’s a popular choice for building static apps, dynamic web apps, and single-page apps (SPAs). It’s interesting that websites built with the same technology stack can show different levels of SEO-friendliness. Let’s see how and why different types of React apps differ in terms of search engine optimization.

Static web apps are websites with information that doesn’t frequently change. Landing pages and blogs are examples of static websites. The information on these websites is kept in the form of HTML files that are generated on the server during the development process. When a user makes a request on a static site, the request instantly goes to the server, which gets a ready file and returns it to the user’s browser.

Static web apps are great in terms of SEO, as they provide an HTML file with necessary content fast, allowing Google to effortlessly index and rank pages.

Dynamic apps have dynamic content that often changes and that you can’t predict. For example, if you build an online shop or marketplace, you can’t know in advance what the shopping cart will look like for each buyer. To generate a shopping cart page, requests with user-specific data are sent to the server, the server gets necessary information from databases, an HTML file is generated on the server, and this HTML file is sent to the client’s browser. Because of this, Google crawlers can understand and rank dynamic pages fast.

Single-page apps, or SPAs, have all their content on one page. SPAs are famous for the great user experience they provide. This experience is possible because, unlike traditional multi-page websites, SPAs are rendered in the browser (on the client side) and don’t send requests to the server every time a user interacts with the application. This prolongs the initial loading time, but during further interactions, new content is loaded instantly.

At the same time, SPAs have some drawbacks, one of which is client-side rendering that can affect search engine optimization. Let’s see what we mean by this.

The first thing you should understand is that there’s a difference in the content that different types of websites provide to browsers for rendering. While static and dynamic websites generate files with HTML content that Google easily understands, SPAs provide JavaScript files that are tricky to interpret.

During client-side rendering of SPAs, when user makes a request in a browser, an HTML file with several lines of code is sent back to the browser. This code isn’t enough for Google to understand the website’s contents and index the page. Consequently, Google has to wait until the browser downloads JavaScript content. As JavaScript takes some time to load, Google crawlers can simply fail to wait long enough to receive it. As a result, they can skip a page that loads for a long time and move to the next page.

What does all this mean for React and SEO as well as your React application? There are two main conclusions:

1. Not all React applications are prone to difficulties with search engine optimization.
2. It’s usually difficult for Google crawlers to index and rank SPAs.

However, it’s possible to build an SEO-friendly React app, even a single-page one. How can you do it? Find out in the following section.

Practical approaches to building an SEO-friendly React app

Knowing that React applications can have some difficulties with search engine optimization shouldn’t stop you from developing a React app. Considering that since 2015, Google has been rendering JavaScript much better than it used to, SEO-related issues are easy to prevent. Let’s have a look at what you can do so that React and your SEO don’t conflict.

Build static or dynamic web apps

We’ve already mentioned that single-page React applications are prone to having trouble with SEO. Static and dynamic apps use server-side rendering that helps web crawlers access their pages effortlessly. The good news is that you don’t always need to choose an SPA. It all depends on the online business you want to build.

For example, for a marketplace, you’ll need a dynamic website. If you build a landing page to promote your business, a static web page will be your best choice. In turn, SPAs are preferable for developing social networking sites, task management apps, or Google-like services.

Use server-side rendering

If you do decide to build a single-page application, there are two ways you can ensure its visibility in search engine results. Using server-side rendering is one of them.

As you already know, Googlebot better indexes and ranks pages rendered on the server. To ensure server-side rendering (SSR) for your SPA, you should apply Next.js, a React framework specifically aimed at enabling SSR. With Next.js, the rendering process looks as follows:

1. A request is sent to the Next.js server, where it is matched with a React component.
2. The React component requests data from a database or API. The data is then sent back to the server.
3. An HTML and CSS file are generated on the Next.js server and sent to the browser.

With an experienced React developer and a bit of effort, making a single-page React application SEO-friendly isn’t impossible. Moreover, there’s a second way to achieve SEO-friendliness with a React app.

Apply pre-rendering

Another popular option to make an SPA visible for crawlers is to use so-called pre-renderers: programs that can detect Googlebot requests. Once a pre-renderer understands that a bot is crawling your site, it provides the bot with a static HTML version of your SPA from the server so the bot can index it. But how does an HTML page appear on the server? In the case of pre-rendering, all HTML pages are preloaded and cached in advance with Headless Chrome, a tool that helps software engineers effortlessly work with server environments.

You might want to opt for pre-rendering because it’s easy to implement. You generally don’t need to make any changes to the existing codebase, or if the need does arise, the changes will be minimal. Finally, pre-renderers can transform any JavaScript code into static HTML files.

However, you should keep in mind that pre-renderers are paid tools and might not work well with websites whose data frequently changes.

Conclusion

Successfully combining SEO with React isn’t as acute a problem as it was several years ago. However, ensuring the SEO-friendliness of single-page applications — the type of websites most commonly built with React — is still a challenge.

To make an SPA visible for Google crawlers and available for indexing, you might opt for pre-rendering or server-side rendering. Both approaches require you to spend more time, money, and effort to ensure SEO-friendliness, but you definitely should take advantage of them if you want your website to rank high in Google search results.