How to succeed on Google Search with your React SPA - My personal thoughts and how to use ReactHelmet and Google search console as our wingmen

Now I am going to share my thoughts on a touchy subject, where there are a lot of opionions and experts telling people how to do things to succeed - SEO ladies and gentlemen.

I will first say that I am not on of those experts in SEO, and what I will share here today is my own opinions and experience within the field. So if you don't agree with that I will write, please know that I am not telling you how you should do things, more of how I am doing it and how it might help you.

Background

I have worked in several projects, big and small - where most of them has been Single Page Applications (SPA). SPAs is probably one of the more popular ways of creating web applications today, especially when libraries and frameworks like React are dominating the world of web development. One of the bigger drawbacks has been the lack of proper SEO since the only thing you will get back from the web server is a very slim index.html page, regardless of the url path we feed the browser with, since all of the content is loaded with JavaScript after the page has been loaded into the browser.

On old school websites, the html were loaded from a server, and came with full content and everything when it was requested - in this way, a search engine could much easier index the content and store it for later when people are searching for related stuff on the google search for example.

Regardless of the way the website is built, SEO is a very important player when it comes to brining traffic to the website. In below sections, I will share how I think we should optimize our application to succeed on Google Search.

Best practices

Some best practices today are probably not unfamiliar to you, since they are quite well known. More on best practices can be found here.

• Title and description should be relevant to the context of your website
• Keywords
• The content on the page should be well written
• Descriptive urls
• Page load
• Cross device support
• Usage of <h1>, <h2> and so on

How to optimize our React application for Google Search

So, we now know what our website should contain to get a good score on Google. But how can we do that in our React application?

React helmet

React helmet is a way of dynamically add title, descriptions and other meta data to our page. And that is a very powerful way of telling Googles crawler what our page is containing, besides the great content on the page :)

I will share an example of how it can be used

Download

It can be downloaded from npm where there also is much more examples than I will show here.

npm i react-helmet

Use it on a React page

And on every page that we want to change the meta data, we should include ReactHelmet, otherwise it will get the meta data that we provide in the index.html file, which in some cases might be exactly what we want.

import { Helmet } from "react-helmet";

const Page = () => {
  return (
    <>
      <div className={style.content}>
        <Helmet title="My dynamic page title">
          <meta
            content="Algobook provides tutorials and articles for common problems in the software industry. We also offer free open source and APIs"
            name="description"
          ></meta>
        </Helmet>
        <h1>My page headline</h1>
        <span>On this page we will show how to do some cool stuff</span>
        <h2>Let't begin</h2>
        ...
      </div>
    </>
  );
};

And now, when the content is loaded, the title and description will be updated so that when the crawler comes to index the page, it will get the correct meta data for the page.

Google search console

It is no lie, that Google will index a SPA much less frequent than a server side rendered website, and maybe even skip some pages, who knows? That is because it will take much more time and resources for the crawlers to sit and wait on every page for the content to load, instead of just getting everything on the initial request.

A great way of getting your pages indexed, is to go in to Google seach console and register your website, and then ask google to crawl the pages on your site. More info here. I have found that to be extremely helpful, and my pages here on Algobook is getting indexed very smoothly and I feel very confident that even though it is an SPA I've created, in a quite competitive area - that I am getting quite a good score even though I just begun my journey (1.5 months since I created this page as I'm writing this article).

Note that you will only get like 10 pages per day for manual crawls.

Time before results

And if you, like me, just started your journey with your React SPA, and you feel like things are moving slow and are frustrated - remember that getting SEO results is a slow process, and you will probably not find yourself (depends on your area of course) on the first page for months, some say 12, others say 6 - but regardless of the exact months, there will be some time before our pages will reach a good score. But if we follow key principles, it will get there.

My strategy

I will list my strategy of how I work towards my SEO goals

• Good titles and descriptions on each page
• Cross device support
• Usage of <h1>, <h2> and <h3> to highlight the content on the page
• Well written pages
• Manual crawls on Google Search Console
• Continuously update the website
• Try to keep the load time low
• alt text on images
• Good url names
• Sitemap with all our urls

If above is continuously being worked on, I personally think that good results will come.

Lighthouse and other SEO tools

There are a lot of free tools that we can use to check our score and see if we follow best practices. One of my faviourites is the Lighthouse tool that we can use directly in our Chrome browser.

• Right click and click on inspect
• Click on Lighthouse on the inspector

And then tick in what you want to test on your page and it will analyze and give you scores on the respective areas.

Summary

I will end this article here. And I hope I could shed some light about how we can optimize SEO for our React SPA.

There are a lot of negativity and dark reading when it comes to SEO for single page applications, but I personally think that it doesn't need to be that bad as long as key principles are being followed and that some more manual work is being done with the crawling requests to Google and so on.

I hope you got something out of this article, and that it could give you some more hope that you will succeed with your SEO - and if you have other things that you think is important and should be considered, please give me an email with your thoughts - becuase as I said at the beginning, I am not an expert in SEO, and I do still learn everyday when it comes to this area.

Thanks for reading, and have a great day!