SEO DevTools

A React component that provides real-time SEO auditing during development. Get instant feedback on common SEO issues like missing metadata, images without alt text, heading hierarchy problems, and more.

Features

• Real-time SEO checks on any page
• Categorized issues (Metadata, Images, Headings, Links, etc.)
• Visual indicators for errors, warnings, and passing checks
• Developer-friendly interface inspired by Chrome DevTools
• Zero configuration required
• Works with Next.js, React, and any React framework

Installation

```bash npm install @seodevtools/react

or

yarn add @seodevtools/react

or

pnpm add @seodevtools/react ```

Usage

Simply import and add the component to any page:

```tsx import { SeoDevtools } from '@seodevtools/react'

export default function Page() { return ( My Page Content goes here...

  {/* Add SEO DevTools */}
  <SeoDevtools />
</div>

) } ```

What It Checks

Metadata

• Title tag presence and length (50-60 chars optimal)
• Meta description presence and length (150-160 chars optimal)
• Open Graph tags (og:title, og:description, og:image)
• Canonical URL
• Robots meta tags

Images

• Alt text presence on all images
• Images without alt attributes

Headings

• Single H1 tag per page
• Proper heading hierarchy (no skipped levels)
• Heading order validation

Links

• Empty or placeholder href attributes
• Broken link detection

Structured Data

• JSON-LD structured data presence

Indexing

• Robots meta configuration
• Indexability status

Development Mode Only

It's recommended to only include this component in development:

```tsx import { SeoDevtools } from '@seodevtools/react'

export default function Page() { return ( My Page

  {process.env.NODE_ENV === 'development' && <SeoDevtools />}
</div>

) } ```

UI Overview

The component appears as a floating "SEO DEV" button in the bottom right corner. Click it to see a categorized breakdown of all SEO issues on the current page, with clear visual indicators:

• Red badges indicate errors that should be fixed
• Amber badges indicate warnings to review
• Green badges indicate passing checks

TypeScript Support

Full TypeScript support with exported types:

```tsx import type { SeoIssue, IssueType } from '@seodevtools/react' ```

Contributing

Contributions are welcome! Please see CONTRIBUTING.md for details.

Publishing

For maintainers: See PUBLISHING.md for the publishing workflow.

Development

```bash

Install dependencies

npm install

Start development server

npm run dev

Run tests

npm test

Build package

npm run build:package ```

License

MIT - See LICENSE for details.

Roadmap

• CLI tool for CI/CD integration
• Custom check configuration
• Export reports to JSON/HTML
• Performance metrics (Core Web Vitals)
• Accessibility checks

Links

• Documentation
• GitHub
• NPM
• Issues