React SEO

Search engine optimization in React needs extra care, especially for SPA apps where content is often rendered after JavaScript loads.

Problem with React SEO (SPA)

In many client-rendered SPAs, the first HTML response can be minimal, and actual page content appears only after JS runs.

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

Common SEO impact:

Search engines may not see full content immediately.
Dynamic pages can get weaker indexing.

SEO Strategies for React

Proper Meta Tags

Use title, description, and Open Graph tags per page.

Server-Side Rendering

SSR with frameworks like Next.js or Remix gives search engines ready HTML.

Pre-rendering

Generate static HTML snapshots for better crawlability.

Clean URLs

Prefer readable paths like /user/123 over query-heavy URLs.

Fast Performance

Use lazy loading, code splitting, and optimized images.

Meta Tags and React Helmet

Use the maintained library: react-helmet-async.

Why not old react-helmet?

Not actively maintained.
Not safe enough for modern async rendering scenarios.

Install:

npm install react-helmet-async

Wrap app:

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

Use a unique title for each page.
Keep title under about 60 characters.
Keep description under about 160 characters.
Avoid duplicate meta tags.

Sitemap

What Is a Sitemap?

A sitemap is a list of important URLs that helps search engines crawl your site efficiently.

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

Dynamic routes example:

/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"]

Important Reality

Even with Helmet, pure SPA SEO has limits.

Best approach for strong SEO:

Next.js with SSR.
Or pre-rendering strategy.