npm package: @seodevtools/react
Description: A React component for real-time SEO auditing during development
Latest version: 0.1.0

# 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 (
    <div>
      <h1>My Page</h1>
      <p>Content goes here...</p>
      
      {/* 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 (
    <div>
      <h1>My Page</h1>
      
      {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](CONTRIBUTING.md) for details.

## Publishing

For maintainers: See [PUBLISHING.md](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](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](https://your-docs-url.com)
- [GitHub](https://github.com/username/seo-devtools)
- [NPM](https://www.npmjs.com/package/@seodevtools/react)
- [Issues](https://github.com/username/seo-devtools/issues)