How to make React App SEO Friendly

Unlock the secrets to optimizing your React app for search engines. Explore key strategies to boost SEO, improve rankings.

Himanshu Pant

Published: December 13, 2023

Key takeaways

SEO Integration in React: When it comes to application of SEO in the use of React apps, the use of meta tags in index is recommended. html and then, for changing meta tags, the append package react-helmet is used, and adding Google site verification improves the position in search results.
Enhancing SPA SEO: When it comes to SEO of single-page applications remember to use react-snap for pre-crawling, create a sitemap to make it easier for Google bot to crawl through your site and do not use hashed URLs because they complicate the Google bot’s work.
SEO Best Practices: Do not use <a> tags so that the URL is not skipped by the Google bots, include proper keywords in meta tags, and use SEO placement and implementation of SEO elements in the constructed React app according to the proper placement and correct implementation of the elements of SEO for further optimization of the content of the work.

What’s the role of SEO Awareness during development?

Stay SEO-aware! Consider key points when developing your React app to ensure optimal visibility and performance for your website. It is not just a myth like we have to use keywords and some other major points because it is important to increase the website performance.

But here the main concern is to know the placement and implementation knowledge of all awareness points to make a good website with more readable content for search engines to crawl, rank and index the website.

So without wasting time on just theoretical things, let’s see some implementations.

Here are some steps you will have to follow:

1. Create react app:

Let’s create a React app and put any name as per your choice. After creating the React App, see what files are created into your directory. Why you need to see the directory structure of your app is because you should have the knowledge about the placement of files. Now you have to navigate to the “index.html” file under the public folder and explore the HTML tags into that file.

Add these tags into this file “index.html” under the “<head>” tag.

<title>Title of your site</title> 
<meta name="description" content=”Add content about your site here.” />
<meta name="keywords" content=”Add your keywords here.” />

<title>Title of your site</title>

Never underestimate the use of keywords when you are planning to build a website to capture the online market. We all know the role of SEO well when we are targeting the online market.

When you are trying to search any service online, you will type in the google search box. Yes, that’s the point we need to keep in mind while adding the keywords for our site.

Okay fine, now “index.html” file changes are done.

2. HELMET

Yes, now we need to install the “react-helmet” npm package.
Why?
Because we are using the modularization approach in our react app and creating the separate components for each page or large functionalities.What do you have to do here?
After installing the “react-helmet” package, We need to inject the code.
Import the package into your component/module.

Import { Helmet } from “react-helmet”;

1	Import { Helmet } from “react-helmet”;

And then use the “<Helmet>” tag under root tag or fragment.

<Helmet>  
    <title>Page Title</title>
    <meta name="description" content="Page Description" />
    <meta property="og:site_name" content="site url" />
    <meta name="keywords" content=”List of keyword” />
</Helmet>

<title>Page Title</title>

</Helmet>

3. Google Site Verification Code

You will have to follow some articles to generate the Google site verification code and after generating the code you will need to inject that html file into the directory of your react app.

google-site-verification: googlecd************.html

1	google-site-verification: googlecd************.html

4. React SNAP

"react-snap": "^1.23.0",

1	"react-snap": "^1.23.0",

This NPM package is used to enable the SEO for SPA.

After installing the above npm package need to add the script

"postbuild": "react-snap",

1	"postbuild": "react-snap",

5. Sitemap

If you want to Google crawl your SPA properly then you need to add the sitemap file. In this sitemap file we need to mention details about the site and web pages in that site.

<?xml version="1.0" encoding="UTF-8"?>
<urlset
  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
  http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<url>
<loc>you site url</loc>
<lastmod>2023-12-02T20:57:42+00:00</lastmod>
</url>
</urlset>

<?xml version="1.0" encoding="UTF-8"?>

<urlset

xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9

http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">

<url>

</url>

</urlset>

6. Avoid hashed URLs

We need to avoid the hashed URLs because it causes issues in the SEO of the webpage. Because of hashed urls Google bot will not see anything after hash in the URL.

https://domain.com/#/shop
https://domain.com/#/about
https://domain.com/#/contact

https://domain.com/#/shop

https://domain.com/#/about

https://domain.com/#/contact

7. Avoid use of <a> tag

Yes, we need to avoid the use of anchor tags but don’t consider it a react problem because Google bot process URLs and search for more URLs to crawl.

When Google bot will not find the anchor tag then Google bot will not crawl the URLs and pass the page rank.

Conclusion

Finally we can conclude this blog here because a lot of things are defined and we tried to cover as much as techniques to crawl, index, and rank the website to get the best Google Search Result.