3 Easy Ways to Solve SEO Problems in React Applications

We all love React. It’s incredible for its performance and simplicity. However, we’re often told that React is not SEO-friendly.

Is this really the case?

Today, we will take a deep dive into this topic and see how we can tackle the problems and boost the SEO performance of our React applications.

What is SEO?

SEO means search engine optimization. It basically indexes your website for search engines like Google.

The better your website ranks, the higher it appears on the search result page.

Why Should You Care?

According to Staskshare, Google has around a 92.4% share of the search engine market. According to Backlinko, the top three results get 75% of the clicks from users.

So if you are building something and want users to find your application through Google search, then you should care about SEO.

OK, But How Does it Work?

To index web pages, Google uses web crawlers. These are bots that regularly visit web pages to analyze the content of the page based on some specific criterion.

Generally, the bots download the HTML and CSS files, run the analysis, and send back the result.

However, for single-page applications, the process is a little different. In order to render anything, the JavaScript on the browser needs to run first before the actual UI is built.

The Problems With React

React is awesome for its speed and component-based architecture, but it has some drawbacks in terms of SEO. Let’s discuss them.

Problem 1: Single URL for all pages

React applications are built with a single HTML file. Using the concept of conditional rendering, we can decide what to show inside our JavaScript code. Technically, we don’t need a dynamic URL.

But according to the Google SEO Starter Guide, having relevant information in the URL is very helpful for SEO.

This is the biggest problem of SPAs. This is not an issue if the website has only a single page, but for multi-page applications, it becomes impossible for the crawler to index all the pages if the URL does not change.

Problem 2: Single meta tag

Meta tags help to describe the content of your page to the bot. According to Google SEO Starter Guide:

“A page’s description meta tag gives Google and other search engines a summary of what the page is about.”

Unfortunately, React generates a single-page application that provides only one place to put our meta tags — and that is the index.html file under the public folder.

Problem 3: All is JavaScript

As we discussed earlier, the crawling process for a normal website is a little different than for a SPA.

When a crawler visits the website, the content is not there. So the crawler has to wait for the JavaScript to be loaded on the client-side.

If your website is heavy and the first render takes some time to render, then the crawler thinks that it’s an empty page and leaves without indexing. This causes a horrible SEO ranking for your website.

So Are You Telling Me Not To Use React?

Well, the answer is yes and no. React was built for fast performance. It was not built for solving your SEO problems.

If you really care about SEO, then you should consider building an isomorphic application.

Next.js and Gatsby are two great options to consider for this purpose.

But I Don’t Want to Use Anything Else

In that case, I have some good news for you.

It is still possible to improve the SEO performance of a React application without building an isomorphic application.

And today, I am going to show you how.

Step 1: Solving the single-URL problem

There is an awesome library named react-router that helps us to render content based on a URL.

Basically, what happens is we declare some routes inside our code and render content based on the route change instead of conditional rendering.

<Switch>
  <Route path="/about"> 
      <About />
  </Route>
  <Route path="/users">
    <Users />
  </Route>
</Switch>
 

So this solves our first problem.

Step 2: Solving the meta tag problem

Now we will use another great library named react-helmet.

The React helmet provides us with a Helmet component that takes the plain HTML meta tags and adds them inside the head tag of React pages.

import React from "react";
import {Helmet} from "react-helmet";
 
class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="http://mysite.com/example" />
            </Helmet>
            ...
        </div>
    );
  }
};
 

Step 3: Solving the JavaScript problem

For this, we can use a service named Prerender.io.

This service caches our webpage so that when the Googlebot comes to index, it doesn’t need to wait for the page to be rendered because it’s already cached. Therefore, it becomes easier for Googlebot to index our page.

But remember, although this service is free, you have to pay after a certain limit.

Conclusion

There you have it. I am not an SEO expert or anything, so if you find anything wrong, please let me know in the comments.

I hope you enjoyed reading this article as much as I enjoyed writing it.

Have a great day!

Resources

• Backlinko: https://backlinko.com/google-ctr-stats

• Google SEO Guide: https://developers.google.com/search/docs/beginner/get-started?hl=en

More content at plainenglish.io

Get in touch with me via LinkedIn