Optimise React Apps for SEO; Google, Twitter, LinkedIn, and Facebook

7 min readJul 8, 2021

Best place to hide a body is `Page 2 of Google`. I help you not to get there.

Are React Apps SEO Friendly?

The short answer is, Yes!, and Google supports React Single Page Applications. They didn’t support it a few years ago, but they do now. However I still need to optimise my application for the best possible SEO result. In this post, we will go through different aspects of SEO and how to configure my pages to achieve the best result.

Also I will cover how to optimise my different platforms such as LinkedIn or Twitter for to look good on social media when someone shares my links. If you want to have pages with high impact, people need to click on them first, and that means your link previews need to look good. As an example, when you send a link to someone, would you like it to look like the below image (figure 1), or just a dry line of words like https://pellerex.com?

In this post, I will go through all those topics.

By the way, this topic belongs to the series to set up a Single Page Application using React, Redux and Asp.NET 5.0.

End Result

By the end of this post, you will have a React component, which would apply the majority of SEO elements to every page you would like. Here is the signature of that React component:

Libraries

To inject meta attributes in my React pages, I am using a react-helmet.

react-helmet

1. How Search Engines Work?

Search engines scan your page, try to understand it, assess it, categorise it, and finally rate it based on a bunch of criteria. These ratings then will be used to decide where my website will end up (first page, or last), when someone searches for a keyword that my website contains.

1.1. The Most Critical SEO Factor

If I wanted to name the most critical factor in SEO optimisation, I would say, Make It Useful for humans. It is amazing we are living in a time, that the best way to perform at your peak, is to help other people. Those who do that at best, win.

Making it closer to reality, when you visit a page on your phone, what makes you like the page, and hence stay on it for longer? Speed, Content, Navigation, Usefulness? I’d say all of the above, and these are the factors search engines take into account these days to rank our pages.

If you asked me how a search engine would take into account Usefulness, I’d say, you won’t stay on a page if you didn’t like the page, would you? and the time spent on the page, perhaps is the easiest thing to measure for search engines, now that everyone have Google Analytics enabled.

1.2. Schema Structured Data

These days AI play a key role for search engines to understand your content. However if there was an easier way to help that process, it would be Structured Data.

Structured Data is an agreement between search engines and a contract for web developers to explain what their pages are about.

Depending on what your page is about, an article, a meal recipe, product, movie, event, etc, you provide a specific markup with relevant values for the search engines to pick up. As an example if you have a recipe with 50 * 5 star reviews, and you want people to see that on Google when they search, this is how you communicate it to Google.

Below you find an example from Google, that includes a result and a corresponding markup.

And here is the markup to achieve it:

If you liked to know more about this, visit Structured Data. Later on, the component we create will support all of that, so stay with me.

1.3. Test Structured Data

After I applied the Structured Test Data to my pages, there is tool which I can use to verify if we have done it correctly.

Simply go to Rich Results Test, enter the URL and run a test. A valid Structured Data markup will look like below.

2. Link Preview (Google, Facebook, Twitter, LinkedIn)

The second part I will need to implement is to provide enough information along with the links for platforms such as Facebook or LinkedIn to show and understand the links in a presentable fashion such as Figure 1.

In order to get such rich details about my pages, I need to provide meta data for each page. However as each platform treat the meta data slightly differently, we need to support some of them one by one.

2.1 Test Meta Tags

To test how your meta tags look like, refer to MetaTags.io, and it shows you how all these platforms will preview your links, and if you have done properly.

3. Implementation

Now it’s time for us to implement all that. To support everything we talked about, I have coded the below SEO component, which you could use for your React pages, that will take care of the below elements for you:

Structured Data: It generates the structured data used by search engines for different types of pages (2 types at the moment, but you can extend it as you like simply).
Meta Tags: It constructs all the meta tags you need for different social platforms, so they are able to extract rich information from your links like Figure 1.

Note
Configuration, plumbing and troubleshooting your software foundation take a considerable amount of time in your product development. Consider using Pellerex which is a complete foundation for your enterprise software products, providing source-included Identity and Payment functions across UI (React), API (.NET), Pipeline (Azure DevOps) and Infrastructure (Kubernetes).

3.1 Open Graph

Facebook and LinkedIn use Open Graph (OG) standard for injecting meta data, which you can read more about here. I mentioned it so you would know what it is about when you read them below.

And here is the full code:

3.2 Notes

3.2.1 Config Values

Some of the values you see in the above snippet, are repeated across all your pages, I have extracted them, and put them in a central config file, so when you read config.seo.domain, just simply replace them with your own config values, or however you wish to manage them. To read more about it, refer to Config Management for React Single Page Apps.

3.2.2 Structured Data Types

There are many types of structured data such as articles, movies, products, recipes, etc. Here I have only included 2, and you can simply add what you need for your website.

Article
Website

Some of the structured data that are valid for an article, won’t be valid for a website. That is why I have made some of those elements conditional.

3.2.3 Client Side Rendering

Although Google support Client and Server Side Rendering, right now some of the platforms like Twitter don’t like React apps that render on the client size, and hence the meta tags injected dynamically don’t work. What I suggest to do here is to include some static meta tags for all your pages in your Index.html page, which will be rendered as the plan B in those cases. Here is what I have in my Index.html:

Pellerex Foundation: For Your Next Enterprise Software

How are you building your current software today? Build everything from scratch or use a foundation to save on development time, budget and resources? For an enterprise software MVP, which might take 8–12 months with a small team, you might indeed spend 6 months on your foundation. Things like Identity, Payment, Infrastructure, DevOps, etc. they all take time, while contributing not much to your actual product. These features are needed, but they are not your differentiators.

Pellerex does just that. It provides a foundation that save you a lot development time and effort at a fraction of the cost. It gives you source-included Identity, Payment, Infrastructure, and DevOps to build Web, Api and Mobile apps all-integrated and ready-to-go on day 1.

Check out Pellerex and talk to our team today to start building your next enterprise software fast.