React SEO

SEO (Search Engine Optimization) in React needs some extra attention. This is especially true for SPA apps (Single Page Applications), because in these apps, the content usually shows up only after JavaScript finishes loading.

The Problem with React SEO (SPA)

In most client-rendered SPAs, the first HTML page that loads is almost empty. The actual content appears only after the JavaScript runs and React builds the page.

graph TD A["Browser requests page"] --> B["Receives minimal/empty HTML"] B --> C["JavaScript loads"] C --> D["React renders content"]

How this affects SEO:

Search engines may not see all your content right away.
Pages that load content dynamically can get ranked lower or indexed poorly.

SEO Strategies for React

Proper Meta Tags

Add a title, description, and Open Graph tags on every page.

Server-Side Rendering

SSR using frameworks like Next.js or Remix sends ready-made HTML to search engines.

Pre-rendering

Create static HTML versions of your pages so they are easier to crawl.

Clean URLs

Use simple, readable URLs like /user/123 instead of long URLs full of query parameters.

Fast Performance

Use lazy loading, code splitting, and optimized images to keep your site fast.

Meta Tags and React Helmet

For meta tags, use the library that is still maintained: react-helmet-async.

Why not the old react-helmet?

It is no longer actively maintained.
It does not work safely with newer async rendering methods.

Install it:

npm install react-helmet-async

Wrap your app with it:

import { HelmetProvider } from "react-helmet-async";

function App() {
    return (
        <HelmetProvider>
            <Main />
        </HelmetProvider>
    );
}

Using Helmet in Pages

import { Helmet } from "react-helmet-async";

function Home() {
    return (
        <>
            <Helmet>
                <title>Home Page</title>
                <meta name="description" content="This is home page" />
            </Helmet>

            <h1>Home</h1>
        </>
    );
}

function User({ user }) {
    return (
        <>
            <Helmet>
                <title>{user.name}</title>
                <meta name="description" content={user.bio} />
            </Helmet>

            <h1>{user.name}</h1>
        </>
    );
}

<Helmet>
    <meta property="og:title" content="My App" />
    <meta property="og:description" content="Best app" />
    <meta property="og:image" content="/image.png" />
</Helmet>

Best Practices with Helmet

Give every page its own unique title.
Try to keep the title under about 60 characters.
Try to keep the description under about 160 characters.
Do not repeat the same meta tags on different pages.

Sitemap

What Is a Sitemap?

A sitemap is simply a list of your website’s important URLs. It helps search engines crawl your site faster and more easily.

Example sitemap.xml:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <url>
        <loc>https://example.com/</loc>
    </url>
    <url>
        <loc>https://example.com/about</loc>
    </url>
</urlset>

Install:

npm install react-router-sitemap

Example:

const Sitemap = require("react-router-sitemap").default;

function generateSitemap() {
    return new Sitemap(router).build("https://example.com").save("./public/sitemap.xml");
}

generateSitemap();

Install:

npm install sitemap

Example script:

const { SitemapStream, streamToPromise } = require("sitemap");
const fs = require("fs");

const sitemap = new SitemapStream({ hostname: "https://example.com" });

sitemap.write({ url: "/", changefreq: "daily", priority: 1.0 });
sitemap.write({ url: "/about", changefreq: "monthly", priority: 0.7 });

sitemap.end();

streamToPromise(sitemap).then((data) => {
    fs.writeFileSync("./public/sitemap.xml", data.toString());
});

Dynamic Sitemap

Example of dynamic routes:

/users/1
/users/2
/users/3

const users = [1, 2, 3];

users.forEach((id) => {
    sitemap.write({
        url: `/user/${id}`,
        changefreq: "weekly",
        priority: 0.8,
    });
});

robots.txt

User-agent: *
Allow: /

Sitemap: https://example.com/sitemap.xml

Full SEO Flow

graph TD A["User or crawler requests page"] --> B["Helmet sets metadata"] B --> C["Crawler reads sitemap"] C --> D["Search engine indexes pages"]

The Real Truth

Even if you use Helmet properly, a pure SPA still has limits when it comes to SEO.

The best way to get strong SEO is:

Use Next.js with SSR, or
Use a pre-rendering strategy.