I Built a Real-Time SEO Linter That Lives Inside Your React App 🔍

#react #webdev #javascript #seo

If you've ever deployed a React app only to realize you forgot a meta description, had duplicate <h1> tags, or were missing Open Graph images — this post is for you.

I just shipped a major update to react-seo-analyzer — a dev-mode SEO overlay that runs inside your browser as you build. No CLI, no external service, no manual audits.

The Problem

Lighthouse is great — but you only run it after you're done building. By then, SEO mistakes are already baked in across multiple components.

What I wanted was something that behaved more like ESLint for SEO: instant, inline feedback while I'm coding.

What it does

Drop one component into your app:

import SEOAnalyzer from 'react-seo-analyzer';

function App() {
  return (
    <>
      <SEOAnalyzer />
      {/* your app */}
    </>
  );
}

A floating panel appears in the corner of your browser with:

📊 An SEO score out of 100
🔴 Errors — things that will hurt your rankings
🟡 Warnings — things you should fix
🔵 Info — nice-to-haves

And it automatically disappears in production (NODE_ENV === 'production'), so you never ship it accidentally.

The 20+ checks it runs

Errors (–15 pts each)

Missing <title> tag
Missing meta description
No <h1> on the page
Images without alt attributes
Missing viewport meta tag
Page set to noindex

Warnings (–5 pts each)

Title too short or too long (ideal: 30–60 chars)
Meta description out of range (ideal: 120–160 chars)
Multiple <h1> tags
Missing canonical link
No lang attribute on <html>
Missing Open Graph tags (og:title, og:description, og:image)
External links missing rel="noopener noreferrer"
Heading hierarchy skips levels

Info (–1 pt each)

Missing og:url
Missing twitter:card / twitter:title
No JSON-LD structured data
No favicon

It's fully configurable

You can disable specific rules, turn off the overlay (console-only mode), or hook into the results with a callback:

// Only console output, no visual overlay
<SEOAnalyzer overlay={false} />

// Skip rules you don't care about
<SEOAnalyzer disableRules={['missingStructuredData', 'missingTwitterCard']} />

// Pipe results to your own monitoring / reporting
<SEOAnalyzer onIssues={(issues, score) => analytics.track('seo_score', { score })} />

Zero dependencies

The whole thing is a single React component with no external dependencies. It works by querying the live DOM after React renders — so it catches dynamic issues too, not just static HTML.

Installation

npm install react-seo-analyzer

Why I built this

I kept making the same SEO mistakes on client projects — forgetting og:image, having <h2> jump straight to <h4>, images without alt text. Lighthouse was always an afterthought.

Having a live badge in the corner of my dev environment that turns green when everything is right changed how I think about SEO. It's now part of my build process, not a post-launch checklist.