Blog Articles
How to make React App SEO Friendly
Table of Contents
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.
|
1 2 3 |
<title>Title of your site</title> <meta name="description" content=”Add content about your site here.” /> <meta name="keywords" content=”Add your keywords here.” /> |
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.
|
1 |
Import { Helmet } from “react-helmet”; |
And then use the “<Helmet>” tag under root tag or fragment.
|
1 2 3 4 5 6 |
<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> |
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.
|
1 |
google-site-verification: googlecd************.html |
4. React SNAP
|
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
|
1 |
"postbuild": "react-snap", |
4. 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.
|
1 2 3 4 5 6 7 8 9 10 11 |
<?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> |
5. 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.
|
1 2 3 |
https://domain.com/#/shop https://domain.com/#/about https://domain.com/#/contact |
6. 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.
Get a Fast Estimate on Your Software Development Project
We are committed to delivering high-quality IT solutions tailored to meet the unique needs of our clients. As part of our commitment to transparency and excellence, we provide detailed project estimations to help our clients understand the scope, timeline, and budget associated with their IT initiatives.
Share
Related Posts
