One lightweight package that handles meta tags, Open Graph, JSON-LD schema, and smart image SEO — no configuration, no bloat.
npm install smart-seo-liteyarn add smart-seo-litepnpm add smart-seo-liteThree focused APIs that cover the SEO needs of 90% of React applications.
Drop one hook into any component. Automatically manages your page's title, all meta tags, Open Graph, Twitter Cards, and canonical URL.
Generate perfectly valid JSON-LD structured data with zero manual writing. Supports 7 schema types with type-safe data props.
Smart image component that auto-generates alt text, applies lazy loading, and gives helpful dev console warnings for CLS issues.
import { useSEO } from 'smart-seo-lite'; function HomePage() { // ✅ One hook → full SEO coverage useSEO({ title: "Best Running Shoes | My Shop", description: "Top-rated running shoes for every runner", image: "/og-banner.png", type: "website", keywords: ["running shoes", "athletics"], }); return <main>...</main>; } // Automatically sets: // ✅ <title>Best Running Shoes | My Shop</title> // ✅ <meta name="description" content="..." /> // ✅ <meta property="og:title" content="..." /> // ✅ <meta property="og:image" content="..." /> // ✅ <meta name="twitter:card" content="summary_large_image" /> // ✅ <link rel="canonical" href="..." />
import { Schema } from 'smart-seo-lite'; // Article Schema <Schema type="article" data={{ title: "How to Train for a Marathon", author: "Virendra", datePublished: "2025-01-15", description: "Complete 16-week training guide", }} /> // Product Schema <Schema type="product" data={{ name: "Pro Running Shoes X2", price: 99.99, currency: "USD", availability: "InStock", brand: "SpeedBrand", }} /> // FAQ Schema — great for voice search <Schema type="faq" data={{ questions: [ { question: "Free shipping?", answer: "Yes, orders over $50" }, ] }} />
import { SEOImg } from 'smart-seo-lite'; // Auto-generates alt from title <SEOImg src="/products/shoe-x2.jpg" title="Pro Running Shoes X2" width={600} height={400} /> // ✅ Renders as: // <img // src="/products/shoe-x2.jpg" // alt="Pro Running Shoes X2" // loading="lazy" // width="600" // height="400" // /> // In development: warns if alt/title missing // ⚠️ [smart-seo-lite] <SEOImg> has no explicit 'alt' // Auto-generated: "shoe x2". Consider explicit alt.
| Feature | react-helmet | next-seo | smart-seo-lite |
|---|---|---|---|
| Bundle size | ~11KB | ~22KB | <3KB ✓ |
| Zero dependencies | ✗ | ✗ | ✓ |
| JSON-LD Schema | ✗ | ✓ | ✓ |
| Smart Image SEO | ✗ | ✗ | ✓ |
| Works with React + Next.js | Partial | Next.js only | Both ✓ |
| Dev warnings | ✗ | ✗ | ✓ |
| TypeScript support | Partial | ✓ | ✓ |
One install. Three APIs. Covers 80% of what your React app needs.