React applications tend to be not SEO-friendly by default because search engines historically had trouble with content generated by JavaScript. The solutions we’ve discussed (helmet, sitemap and avoiding hash URLs) are all very helpful, but the remainder comes down to data controlling how search engines crawl your site, making your pages fast, using proper HTML tags, and picking the best way to showcase your application. Perform all of these and your single page application has a shot on appearing in search results. Don’t do them and you’re just hoping for the best.
- 1 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.
- 2 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.
- 3 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.
- 4 Mobile isn't a secondary experience anymore: Google ranks you based on your mobile site, full stop. If that's broken, nothing else on this list can save you, you're being judged on your weakest version.
- 5 Robots.txt mistakes are silent until they're not: This is the one that causes the most damage for the least reason, a single leftover line can deindex your entire production site, and you often won't notice until traffic has already cratered.
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.” />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”;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>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************.html4. React SNAP
"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",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>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
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.
8. Structured Data (Schema Markup / JSON-LD)
Previously, I would have skipped this section for smaller projects because it felt like “extra credit.” Well, it isn’t. The structured data is what makes a regular blue link into a rich result in Google search that contains ratings, price, FAQ questions, breadcrumbs, etc. And those rich results are clicked way more frequently than regular links.
In a React application, the most elegant way to do that is to simply inject JSON-LD code right inside your Helmet tag rather than using raw HTML scripts.
<Helmet>
<script type="application/ld+json">
{JSON.stringify({
"@context": "https://schema.org",
"@type": "Organization",
"name": "Your Company Name",
"url": "https://yourdomain.com",
"logo": "https://yourdomain.com/logo.png"
})}
</script>
</Helmet>Start with Organization or WebSite schema on your homepage, then add Product, Article, or BreadcrumbList schema on the pages where it actually applies. Don’t just copy-paste generic schema everywhere — Google’s Rich Results Test will flag mismatched or missing required fields, and a rejected schema is worse than no schema at all.
9. Robots.txt and Crawl Budget
While the sitemap file acts as a roadmap for Google to crawl your site, the robots.txt file will act as the antithesis of that and will tell Google not to crawl some elements of your site. It is one file that is easy to ignore, but for React based SPA, it could very well be essential to save Google from spending its crawl budget on unnecessary JS rendering.
It must be located in your public folder and available at the root of your domain:
User-agent:
Disallow: /admin
Disallow: /cart
Disallow: /checkout
Sitemap: https://yourdomain.com/sitemap.xmlA common anti-pattern I’ve witnessed multiple times in the wild is developers forgetting to remove Disallow: / from a staging environment. This will cause the production instance to be excluded from Google’s index with potentially devastating consequences for organic traffic. This is why I personally review this file in any project with more than a handful of pages after every deployment and not just during initial setup.
10. Core Web Vitals and Page Speed Optimization
No matter how well you optimize your SEO, having a slow website will certainly harm your rankings in Google. As Google focuses on Core Web Vitals as a ranking factor recently, optimizing page speed is more critical now than ever.
Two areas where React applications can struggle with speed are:
- Largest Contentful Paint: Due to React’s nature of shipping JS to the client to render elements, your application’s bundle size will directly contribute to how fast your pages can load. Where possible, employ code-splitting to reduce the size of your JavaScript payloads, especially for marketing pages. You may want to consider
React.lazy()+Suspensefor components that aren’t immediately needed after page load. - Layout Change: In particular, any image and advertising material can shift your content further down the page if its size is not specified. You always need to add width and height attributes to your elements even if you manage the size using CSS.
Each time you create a new feature in your app, you need to test the page speed with the help of PageSpeed Insights. The information obtained from the tests should guide your SEO technical optimization efforts rather than an initial audit before the launch. It’s incredibly easy to negatively impact performance between the launches by mistake.
11. Semantic HTML5, Not Just Divs
This one isn’t so much about a specific tool but rather a pattern I’ve seen repeatedly in React projects. Due to the default <div>-heavy rendering in most component libraries, developers can fall into the habit of sprinkling <div>s willy nilly across their JSX. This can hamper both the accessibility and SEO of your application.
HTML5 introduced a set of semantic elements to help categorize different parts of a page:
<nav>for your navigation<main>for your primary content area<article>for blog posts or other self-contained content<header>and<footer>for your page headers and footers
Using these elements wherever appropriate allows both search engines and screen readers to better understand the contents and structure of your page. There’s no downside to using them (aside from potential extra HTML weight) since most styling can be accomplished through CSS or inline styles on the elements themselves.
12. Rendering Strategy: when using react-snap is not enough
React-snap is perfect for small-scale projects, where you can afford rebuilding the entire project every single time you want to change something with texts or images on your landing page. But I had lots of troubles working with react-snap on the larger application, where there was a need for continuous updates to the content. React-snap renders all of your routes at build time, so any data that wasn’t known at the build time is not included into snapshots.
In case you develop some application where content gets updated regularly, you can think about using server-side rendering or static site generator with its deployment via server. This way you’ll have to build a totally new project (next.js, for instance), but it will definitely help you save much time and effort. However, if you do not plan to update your content regularly or it is not going to contain any user-generated content, then you should use react-snap.
13. Mobile Responsiveness and Viewport Meta Tag
Google has adopted a mobile-first indexing strategy for quite some time now. It implies that they mostly depend on the mobile version of your website for indexing and ranking. Thus, if your React app is looking fine on your computer screen but terrible on the mobile phone screen where users have to zoom in and out, you’ll be penalized by Google.
The most basic requirement, and one I still see missing occasionally, is the viewport meta tag in your index.html:
<meta name="viewport" content="width=device-width, initial-scale=1" />
</meta>Beyond that single tag, actually test your components at real mobile breakpoints, not just by shrinking your browser window. Things like tap target size (buttons too close together), font sizes that become unreadable, and horizontal scroll caused by a fixed-width element are all common in component libraries that were designed with desktop layouts in mind first.
14. Internal Linking Strategy
This is the part that many developers would leave completely to the person who writes the content, but the technical implementation may be of equal importance. Internal links tell Google what pages are the most important and how they are related — a page with more internal links pointing to it is usually considered more important than the one without any.
<Link to="/blog/react-seo-guide">Read our full React SEO guide</Link>The trap to avoid is using or even a with styling that looks like a link — while it may work for users, Google will not follow it. Use (or if you use React Router, which has a special rendering for tags inside) for internal links, and Google will correctly follow them and see the linking pattern in your site.
15. Canonical Tags and Duplicate Content
This bit me hard early on in my career, and I had no idea. React apps with query params, trailing slashes, or multiple routes containing similar content can accidentally generate a ton of URLs with slightly varying paths that Google will penalize for containing similar content. Google will either choose one of the similar URLs to rank or dilute the ranking potential between them both.
<Helmet>
<link rel="canonical" href="https://yourdomain.com/products/blue-shoes" />
</Helmet>This tells Google exactly which URL is the “real” one, regardless of how the user actually arrived at the page (through a filter, a query string, or a tracking parameter). I make it a rule now on every dynamic route: if there’s any chance the same content is reachable through more than one URL, that page gets a canonical tag, no exceptions.
15. Image Optimization: Alt Text and Lazy Loading
Images usually form the largest files on any page, and they are one of the most ignored SEO optimization opportunities on React applications. First of all, there are two criteria for optimizing images on React websites in regard to SEO, and both can easily be taken care of if known.
The first criterion is alt text. Google cannot read images; hence, it will depend on the alt tag of the picture for understanding its relevance to the contents of the page. The right use of alt tags (not stuffed with keywords, though), will ensure the better ranking of your images on Google Images, an often-ignored source of traffic.
<img src="/blue-running-shoes.jpg" alt="Blue running shoes with white sole, side view" />The second one is lazy loading. When images that aren’t on the initial part of the webpage are present on the page, it makes no sense to load them until users scroll to the bottom of the fold. This is because the LCP score would be affected. The use of the loading=”lazy” attribute normally does not need an extra library:
<img src="/blue-running-shoes.jpg" alt="Blue running shoes" loading="lazy" />Just don’t lazy-load your hero image or anything visible above the fold — that defeats the purpose and can actually hurt your load time metrics.
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.
