DEV Community

Cover image for I Built a Smarter SEO Layer for React — Here’s Why
Sravesh Nandan
Sravesh Nandan

Posted on

I Built a Smarter SEO Layer for React — Here’s Why

#react #webdev #seo #javascript

If you have built a React app before, you already know this truth:

👉 SEO in React is painful.

Not because React is bad.
But because SEO is usually treated as an afterthought.

I faced this problem again and again while building React projects.
So instead of repeating the same SEO logic everywhere, I decided to fix it properly.

That’s how react-smart-seo was born.

In this blog, I’ll explain:

  • Why SEO in React feels broken
  • What existing solutions are missing
  • What I built differently
  • How you can use it in your own React app

No marketing words. Just real experience.

The Real Problem with SEO in React

Most React apps are Single Page Applications (SPA).

This causes a few problems:

  • SEO tags are added after page load
  • Developers forget to update <title> and <meta>
  • Every page handles SEO differently
  • No one checks if SEO is correct or not

Most of the time, developers do this:

<Helmet>
  <title>Home</title>
</Helmet>
Enter fullscreen mode Exit fullscreen mode

And move on.

But this creates new problems:

  • No validation
  • No defaults
  • No structure
  • Easy to forget things

SEO becomes manual and error-prone.

Why Existing React SEO Libraries Were Not Enough

I used libraries like react-helmet and similar tools.

They are useful, but they only do one thing:

👉 They set tags.

They do not:

  • Warn you if title is missing
  • Auto-generate canonical URLs
  • Handle Open Graph properly
  • Enforce consistency across pages
  • Help teams follow SEO rules

In short:

They manage the head, but they don’t manage SEO.

That’s the gap I wanted to solve.

My Thinking: SEO Should Be a System, Not Tags

Instead of writing SEO again and again, I asked myself:

What if SEO worked like a layer?

A layer that:

  • Has smart defaults
  • Knows what is required
  • Warns developers early
  • Works with any React setup

That idea became react-smart-seo.

What is react-smart-seo?

react-smart-seo is a framework-agnostic SEO orchestration layer for React.

Simple meaning:

  • You tell it what page this is
  • It handles how SEO should be done

It works with:

  • Vite
  • CRA
  • Custom SSR
  • Any React app

No Next.js required.

What Makes It “Smart”?

1. Zero Configuration SEO

Just this:

<Seo title="Home" />
Enter fullscreen mode Exit fullscreen mode

Automatically gives you:

  • <title>
  • Meta description (fallback)
  • Canonical URL
  • Open Graph tags
  • Twitter cards

No extra work.

2. Central SEO Configuration

Instead of repeating SEO config on every page, you define it once.

<SeoProvider
  config={{
    siteName: "My App",
    siteUrl: "https://myapp.com",
    titleTemplate: "%s | My App",
    defaultDescription: "We build useful software",
  }}
>
  <App />
</SeoProvider>
Enter fullscreen mode Exit fullscreen mode

Now every page:

  • Uses same title format
  • Uses same site branding
  • Looks professional and consistent

This is very useful for large apps and teams.

3. Built-in SEO Warnings (This is Important)

In development mode, the library warns you if something is wrong.

Example warnings:

Missing <title> tag
Missing canonical URL
Meta description too long
Enter fullscreen mode Exit fullscreen mode

This helps catch SEO mistakes before production.

Most libraries don’t do this.

4. Strict Mode for Teams

For serious projects, you can enable strict mode.

<Seo strict />
Enter fullscreen mode Exit fullscreen mode

Now instead of warnings, it throws errors.

This is very useful for:

  • Teams
  • CI pipelines
  • Production-grade apps

SEO rules become enforced, not optional.

5. Automatic Open Graph & Twitter Cards

You don’t need to write OG tags manually.

<Seo
  title="Blog"
  description="My blog page"
/>
Enter fullscreen mode Exit fullscreen mode

Automatically generates:

  • og:title
  • og:description
  • og:url
  • twitter:title
  • twitter:description

This improves social sharing instantly.

6. Structured Data Without Headache

JSON-LD is powerful but painful to write.

With react-smart-seo:

<Seo
  title="My Blog Post"
  schema={{
    type: "Article",
    headline: "My Blog Post",
    datePublished: "2024-01-01",
    author: "Sravesh Nandan",
  }}
/>
Enter fullscreen mode Exit fullscreen mode

It automatically injects valid structured data.

No manual JSON.
No copy-paste errors.

How to Use It in Your React App

Install 

npm install @nandansravesh/react-smart-seo
Enter fullscreen mode Exit fullscreen mode

Basic Page SEO 

import { Seo } from "@nandansravesh/react-smart-seo";

function Home() {
  return <Seo title="Home" />;
}
Enter fullscreen mode Exit fullscreen mode

Page with Description 

<Seo
  title="Pricing"
  description="Simple and transparent pricing"
/>
Enter fullscreen mode Exit fullscreen mode

Full App Setup 

import { SeoProvider } from "@nandansravesh/react-smart-seo";

<SeoProvider
  config={{
    siteName: "My App",
    siteUrl: "https://myapp.com",
    titleTemplate: "%s | My App",
    defaultDescription: "We build software",
  }}
>
  <App />
</SeoProvider>
Enter fullscreen mode Exit fullscreen mode

That’s it.

What This Library Is NOT

Let me be honest.

  • It is not magic SEO
  • It will not rank your site by itself
  • It does not replace good content

What it does:
👉 Prevents SEO mistakes
👉 Makes SEO consistent
👉 Improves developer experience

And that matters a lot.

Why I’m Sharing This

I built this because I needed it.

I’m still early in my journey, and I’m building tools I wish existed when I started.

This is v0.1.0.
There is a lot more planned.

If you:

  • Build React apps
  • Care about clean architecture
  • Want better SEO discipline

I’d love your feedback.

Try It Out 

npm install @nandansravesh/react-smart-seo
Enter fullscreen mode Exit fullscreen mode

If you use it, break it, or improve it — please share your thoughts.

That’s how good open-source grows 🙂

Thanks for reading 🙏

More improvements coming soon.

Top comments (0)