🔍 A zero-dependency SEO linter for React apps — with a live visual overlay, 20+ checks, and an SEO score — all only in development mode.
Most React SEO tools require server-side rendering or manual auditing. react-seo-analyzer runs right inside your browser during development — giving you instant, inline feedback as you build.
| Feature | react-seo-analyzer | Lighthouse | Other libs |
|---|---|---|---|
| Dev-mode overlay | ✅ | ❌ | ❌ |
| SEO score | ✅ | ✅ | ❌ |
| 20+ checks | ✅ | ✅ | |
| Zero config | ✅ | ❌ | |
| Zero dependencies | ✅ | ❌ | ❌ |
| Auto-disabled in prod | ✅ | N/A | ❌ |
npm install react-seo-analyzer
# or
yarn add react-seo-analyzerDrop <SEOAnalyzer /> anywhere in your app. It renders nothing in production.
import SEOAnalyzer from 'react-seo-analyzer';
function App() {
return (
<>
<SEOAnalyzer />
{/* your app */}
</>
);
}A floating panel will appear in the bottom-right corner showing your SEO score and all issues, grouped by category. Click the badge to collapse it.
The panel automatically re-checks the page when your app navigates client-side (React Router, Next.js, etc.) or when title/meta tags change — no full reload needed. For issues tied to specific elements (missing alt text, duplicate <h1>s, unsafe external links), click an item to scroll to and highlight it on the page. Your collapsed/open state and last filter are remembered between reloads, and a Recheck button is always available in the panel footer.
| Prop | Type | Default | Description |
|---|---|---|---|
devOnly |
boolean |
true |
Only run in NODE_ENV !== 'production' |
overlay |
boolean |
true |
Show the floating UI panel |
console |
boolean |
true |
Also log issues to the browser console |
disableRules |
string[] |
[] |
Rule IDs to skip (see list below) |
position |
string |
'bottom-right' |
Panel corner: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' |
onIssues |
function |
— | Callback (issues, score) => void |
// Disable the overlay, use console output only
<SEOAnalyzer overlay={false} />
// Disable specific rules
<SEOAnalyzer disableRules={['missingStructuredData', 'missingTwitterCard']} />
// Use a callback for custom reporting
<SEOAnalyzer onIssues={(issues, score) => myReporter.send({ issues, score })} />
// Anchor the panel somewhere that won't collide with other dev tools
<SEOAnalyzer position="top-left" />| Rule ID | Description |
|---|---|
missingTitle |
No <title> tag found |
missingDescription |
No meta description |
missingH1 |
No <h1> on the page |
imagesWithoutAlt |
Images missing alt attribute |
missingViewport |
No viewport meta tag |
robotsNoIndex |
Page is set to noindex |
| Rule ID | Description |
|---|---|
titleLength |
Title outside 30–60 character range |
descriptionLength |
Description outside 50–160 character range |
multipleH1 |
More than one <h1> tag |
missingCanonical |
No canonical link tag |
missingLang |
No lang attribute on <html> |
missingOgTitle |
No og:title Open Graph tag |
missingOgDescription |
No og:description Open Graph tag |
missingOgImage |
No og:image Open Graph tag |
externalLinksNoRel |
External links missing rel="noopener noreferrer" |
headingHierarchy |
Heading levels are skipped |
| Rule ID | Description |
|---|---|
missingOgUrl |
No og:url tag |
missingTwitterCard |
No twitter:card tag |
missingTwitterTitle |
No twitter:title tag |
missingStructuredData |
No JSON-LD structured data |
missingFavicon |
No favicon link tag |
Your SEO score starts at 100 and points are deducted per issue:
Errors → –15 pts each
Warnings → –5 pts each
Info → –1 pt each
| Score | Status |
|---|---|
| 80–100 | 🟢 Good |
| 50–79 | 🟡 Needs work |
| 0–49 | 🔴 Critical |
Contributions are welcome!
- Fork the repo
- Create a feature branch
- Run tests:
npm test - Submit a PR
Have a rule idea? Open an issue.
MIT © Artak Harutyunyan