smart-seo-lite 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 virendra2902
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,174 @@
+# 🚀 smart-seo-lite
+
+> **"Add SEO to your React/Next.js app in 3 lines of code."**
+
+[![npm version](https://img.shields.io/npm/v/smart-seo-lite)](https://npmjs.com/package/smart-seo-lite)
+[![license](https://img.shields.io/npm/l/smart-seo-lite)](LICENSE)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/smart-seo-lite)](https://bundlephobia.com/package/smart-seo-lite)
+
+A lightweight SEO utility for React + Next.js that covers **80% of SEO needs** with zero configuration.
+
+---
+
+## ✨ Features
+
+| Feature | What it does |
+|---|---|
+| `useSEO()` | Auto meta tags, Open Graph, Twitter Cards, canonical URL |
+| `<Schema />` | JSON-LD structured data for articles, products, FAQs & more |
+| `<SEOImg />` | Smart image SEO with auto-alt, lazy loading & dev warnings |
+
+---
+
+## 📦 Installation
+
+```bash
+npm install smart-seo-lite
+# or
+yarn add smart-seo-lite
+# or
+pnpm add smart-seo-lite
+```
+
+---
+
+## 🔧 Usage
+
+### 1. `useSEO` Hook
+
+```tsx
+import { useSEO } from "smart-seo-lite";
+
+function HomePage() {
+  useSEO({
+    title: "Home Page | My Shop",
+    description: "Best products online",
+    image: "/banner.png",
+    type: "website",
+  });
+
+  return <main>...</main>;
+}
+```
+
+**What it sets automatically:**
+- `<title>` tag
+- `<meta name="description">`
+- Open Graph: `og:title`, `og:description`, `og:image`, `og:url`, `og:type`
+- Twitter: `twitter:card`, `twitter:title`, `twitter:description`, `twitter:image`
+- `<link rel="canonical">`
+- `<meta name="robots">`
+
+**All options:**
+```ts
+useSEO({
+  title?: string;           // Page title
+  description?: string;     // Meta description
+  image?: string;           // OG/Twitter image URL
+  url?: string;             // Canonical URL (auto-detects if not set)
+  siteName?: string;        // OG site name
+  type?: "website" | "article" | "product";
+  twitterHandle?: string;   // e.g. "@myapp"
+  noIndex?: boolean;        // Set true to noindex
+  canonical?: string;       // Override canonical URL
+  keywords?: string[];      // Meta keywords array
+});
+```
+
+---
+
+### 2. `<Schema />` Component
+
+```tsx
+import { Schema } from "smart-seo-lite";
+
+// Article
+<Schema type="article" data={{
+  title: "My Blog Post",
+  author: "Virendra",
+  datePublished: "2025-01-01",
+  description: "An amazing post",
+}} />
+
+// Product
+<Schema type="product" data={{
+  name: "Running Shoes",
+  price: 99.99,
+  currency: "USD",
+  availability: "InStock",
+  brand: "Nike",
+}} />
+
+// FAQ
+<Schema type="faq" data={{
+  questions: [
+    { question: "What is this?", answer: "A great SEO library." },
+    { question: "Is it free?", answer: "Yes, MIT licensed!" },
+  ]
+}} />
+
+// Breadcrumb
+<Schema type="breadcrumb" data={{
+  items: [
+    { name: "Home", url: "https://myapp.com" },
+    { name: "Blog", url: "https://myapp.com/blog" },
+    { name: "Post Title", url: "https://myapp.com/blog/post" },
+  ]
+}} />
+```
+
+**Supported schema types:** `article`, `product`, `organization`, `breadcrumb`, `faq`, `person`, `website`
+
+---
+
+### 3. `<SEOImg />` Component
+
+```tsx
+import { SEOImg } from "smart-seo-lite";
+
+// Auto-generates alt from title
+<SEOImg src="/product.jpg" title="Running Shoes" />
+
+// Or provide explicit alt
+<SEOImg src="/hero.jpg" alt="Hero banner for summer sale" width={1200} height={600} />
+```
+
+**What it does automatically:**
+- Generates `alt` from `title` or filename if not provided
+- Adds `loading="lazy"` by default
+- Warns in development if `src` is missing
+- Warns in development if no `alt`/`title` provided
+- Warns if `width`/`height` missing (CLS prevention)
+
+---
+
+## ⚙️ Next.js Usage
+
+Works with both App Router and Pages Router. For SSR with `next/head`, use the `useSEO` hook inside your page components — it runs on the client side and updates the head.
+
+For SSR-first meta tags in Next.js App Router, combine with `generateMetadata()`:
+
+```ts
+// app/page.tsx
+export const metadata = {
+  title: "My Page",
+  description: "My description",
+};
+```
+
+And use `useSEO` for dynamic updates (after user interactions, filtering, etc.).
+
+---
+
+## 🎯 Philosophy
+
+- **Zero dependencies** (just React as a peer dep)
+- **Tiny bundle** — < 3KB gzipped
+- **Drop-in** — no providers, no wrappers
+- **Dev-friendly** — helpful console warnings during development
+
+---
+
+## 📄 License
+
+MIT © Virendra

package/dist/SEOImg.d.ts

@@ -0,0 +1,23 @@
+import React, { ImgHTMLAttributes } from "react";
+interface SEOImgProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "alt" | "loading"> {
+    src: string;
+    title?: string;
+    alt?: string;
+    loading?: "lazy" | "eager" | "auto";
+    width?: number;
+    height?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * SEOImg - Smart image component for SEO
+ * ✅ Auto-generates alt text from title or filename
+ * ✅ Adds loading="lazy" by default
+ * ✅ Warns in development if src is missing
+ * ✅ Adds width/height to prevent CLS
+ *
+ * @example
+ * <SEOImg src="/product.jpg" title="Running Shoes" />
+ */
+export declare function SEOImg({ src, title, alt, loading, width, height, className, style, ...rest }: SEOImgProps): React.JSX.Element | null;
+export {};

package/dist/Schema.d.ts

@@ -0,0 +1,71 @@
+import React from "react";
+type SchemaType = "article" | "product" | "organization" | "breadcrumb" | "faq" | "person" | "website";
+interface ArticleData {
+    title: string;
+    author?: string;
+    datePublished?: string;
+    dateModified?: string;
+    description?: string;
+    image?: string;
+    url?: string;
+}
+interface ProductData {
+    name: string;
+    description?: string;
+    image?: string;
+    price?: number;
+    currency?: string;
+    availability?: "InStock" | "OutOfStock" | "PreOrder";
+    brand?: string;
+    sku?: string;
+}
+interface OrganizationData {
+    name: string;
+    url?: string;
+    logo?: string;
+    description?: string;
+    email?: string;
+    phone?: string;
+    address?: string;
+}
+interface BreadcrumbData {
+    items: Array<{
+        name: string;
+        url: string;
+    }>;
+}
+interface FAQData {
+    questions: Array<{
+        question: string;
+        answer: string;
+    }>;
+}
+interface PersonData {
+    name: string;
+    url?: string;
+    image?: string;
+    jobTitle?: string;
+    description?: string;
+}
+interface WebsiteData {
+    name: string;
+    url?: string;
+    description?: string;
+}
+type SchemaData = ArticleData | ProductData | OrganizationData | BreadcrumbData | FAQData | PersonData | WebsiteData;
+interface SchemaProps {
+    type: SchemaType;
+    data: SchemaData;
+}
+/**
+ * Schema - Generates structured JSON-LD data for SEO
+ * Supports: article, product, organization, breadcrumb, faq, person, website
+ *
+ * @example
+ * <Schema type="article" data={{
+ *   title: "Blog Title",
+ *   author: "Virendra"
+ * }} />
+ */
+export declare function Schema({ type, data }: SchemaProps): React.JSX.Element;
+export {};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { useSEO } from "./useSEO";
+export type { SEOProps } from "./useSEO";
+export { Schema } from "./Schema";
+export { SEOImg } from "./SEOImg";

package/dist/index.esm.js

@@ -0,0 +1,276 @@
+import React, { useEffect } from 'react';
+
+function setMeta(name, content, attr = "name") {
+    if (typeof document === "undefined")
+        return;
+    let el = document.querySelector(`meta[${attr}="${name}"]`);
+    if (!el) {
+        el = document.createElement("meta");
+        el.setAttribute(attr, name);
+        document.head.appendChild(el);
+    }
+    el.setAttribute("content", content);
+}
+function setLink(rel, href) {
+    if (typeof document === "undefined")
+        return;
+    let el = document.querySelector(`link[rel="${rel}"]`);
+    if (!el) {
+        el = document.createElement("link");
+        el.setAttribute("rel", rel);
+        document.head.appendChild(el);
+    }
+    el.setAttribute("href", href);
+}
+/**
+ * useSEO - Automatically handles:
+ * ✅ title, description
+ * ✅ Open Graph tags
+ * ✅ Twitter Card tags
+ * ✅ Canonical URL
+ * ✅ Keywords, robots
+ *
+ * @example
+ * useSEO({
+ *   title: "Home Page",
+ *   description: "Best products online",
+ *   image: "/banner.png"
+ * });
+ */
+function useSEO({ title, description, image, url, siteName = "My App", type = "website", twitterHandle, noIndex = false, canonical, keywords = [], }) {
+    useEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        const resolvedURL = url || (typeof window !== "undefined" ? window.location.href : "");
+        const canonicalURL = canonical || resolvedURL;
+        // --- Basic Meta ---
+        if (title)
+            document.title = title;
+        if (description)
+            setMeta("description", description);
+        if (keywords.length > 0)
+            setMeta("keywords", keywords.join(", "));
+        setMeta("robots", noIndex ? "noindex,nofollow" : "index,follow");
+        // --- Open Graph ---
+        if (title)
+            setMeta("og:title", title, "property");
+        if (description)
+            setMeta("og:description", description, "property");
+        if (image)
+            setMeta("og:image", image, "property");
+        if (resolvedURL)
+            setMeta("og:url", resolvedURL, "property");
+        setMeta("og:type", type, "property");
+        setMeta("og:site_name", siteName, "property");
+        // --- Twitter Card ---
+        setMeta("twitter:card", image ? "summary_large_image" : "summary");
+        if (title)
+            setMeta("twitter:title", title);
+        if (description)
+            setMeta("twitter:description", description);
+        if (image)
+            setMeta("twitter:image", image);
+        if (twitterHandle)
+            setMeta("twitter:site", twitterHandle);
+        // --- Canonical ---
+        if (canonicalURL)
+            setLink("canonical", canonicalURL);
+    }, [title, description, image, url, siteName, type, twitterHandle, noIndex, canonical, keywords]);
+}
+
+function buildSchema(type, data) {
+    switch (type) {
+        case "article": {
+            const d = data;
+            return {
+                "@context": "https://schema.org",
+                "@type": "Article",
+                headline: d.title,
+                author: d.author ? { "@type": "Person", name: d.author } : undefined,
+                datePublished: d.datePublished,
+                dateModified: d.dateModified || d.datePublished,
+                description: d.description,
+                image: d.image,
+                url: d.url,
+            };
+        }
+        case "product": {
+            const d = data;
+            return {
+                "@context": "https://schema.org",
+                "@type": "Product",
+                name: d.name,
+                description: d.description,
+                image: d.image,
+                sku: d.sku,
+                brand: d.brand ? { "@type": "Brand", name: d.brand } : undefined,
+                offers: {
+                    "@type": "Offer",
+                    price: d.price,
+                    priceCurrency: d.currency || "USD",
+                    availability: d.availability
+                        ? `https://schema.org/${d.availability}`
+                        : "https://schema.org/InStock",
+                },
+            };
+        }
+        case "organization": {
+            const d = data;
+            return {
+                "@context": "https://schema.org",
+                "@type": "Organization",
+                name: d.name,
+                url: d.url,
+                logo: d.logo,
+                description: d.description,
+                email: d.email,
+                telephone: d.phone,
+                address: d.address,
+            };
+        }
+        case "breadcrumb": {
+            const d = data;
+            return {
+                "@context": "https://schema.org",
+                "@type": "BreadcrumbList",
+                itemListElement: d.items.map((item, i) => ({
+                    "@type": "ListItem",
+                    position: i + 1,
+                    name: item.name,
+                    item: item.url,
+                })),
+            };
+        }
+        case "faq": {
+            const d = data;
+            return {
+                "@context": "https://schema.org",
+                "@type": "FAQPage",
+                mainEntity: d.questions.map((q) => ({
+                    "@type": "Question",
+                    name: q.question,
+                    acceptedAnswer: { "@type": "Answer", text: q.answer },
+                })),
+            };
+        }
+        case "person": {
+            const d = data;
+            return {
+                "@context": "https://schema.org",
+                "@type": "Person",
+                name: d.name,
+                url: d.url,
+                image: d.image,
+                jobTitle: d.jobTitle,
+                description: d.description,
+            };
+        }
+        case "website": {
+            const d = data;
+            return {
+                "@context": "https://schema.org",
+                "@type": "WebSite",
+                name: d.name,
+                url: d.url,
+                description: d.description,
+            };
+        }
+        default:
+            return { "@context": "https://schema.org" };
+    }
+}
+/**
+ * Schema - Generates structured JSON-LD data for SEO
+ * Supports: article, product, organization, breadcrumb, faq, person, website
+ *
+ * @example
+ * <Schema type="article" data={{
+ *   title: "Blog Title",
+ *   author: "Virendra"
+ * }} />
+ */
+function Schema({ type, data }) {
+    const schema = buildSchema(type, data);
+    return (React.createElement("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(schema, null, 2) } }));
+}
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+function generateAlt(src, title) {
+    var _a;
+    if (title)
+        return title;
+    // Extract filename from src, clean it up
+    const filename = ((_a = src.split("/").pop()) === null || _a === void 0 ? void 0 : _a.split("?")[0]) || "";
+    const withoutExt = filename.replace(/\.[^.]+$/, "");
+    const humanized = withoutExt
+        .replace(/[-_]/g, " ")
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .toLowerCase()
+        .trim();
+    return humanized || "image";
+}
+/**
+ * SEOImg - Smart image component for SEO
+ * ✅ Auto-generates alt text from title or filename
+ * ✅ Adds loading="lazy" by default
+ * ✅ Warns in development if src is missing
+ * ✅ Adds width/height to prevent CLS
+ *
+ * @example
+ * <SEOImg src="/product.jpg" title="Running Shoes" />
+ */
+function SEOImg(_a) {
+    var { src, title, alt, loading = "lazy", width, height, className, style } = _a, rest = __rest(_a, ["src", "title", "alt", "loading", "width", "height", "className", "style"]);
+    const resolvedAlt = alt || generateAlt(src, title);
+    useEffect(() => {
+        if (process.env.NODE_ENV === "development") {
+            if (!src) {
+                console.warn("[smart-seo-lite] <SEOImg> is missing the `src` prop.");
+            }
+            if (!alt && !title) {
+                console.warn(`[smart-seo-lite] <SEOImg src="${src}"> has no explicit 'alt' or 'title'. Auto-generated: "${resolvedAlt}". Consider providing explicit alt text for better SEO.`);
+            }
+            if (!width || !height) {
+                console.warn(`[smart-seo-lite] <SEOImg src="${src}"> is missing width/height props. This may cause Cumulative Layout Shift (CLS).`);
+            }
+        }
+    }, [src, alt, title, resolvedAlt, width, height]);
+    if (!src)
+        return null;
+    return (React.createElement("img", Object.assign({ src: src, alt: resolvedAlt, loading: loading === "auto" ? undefined : loading, width: width, height: height, className: className, style: style }, rest)));
+}
+
+export { SEOImg, Schema, useSEO };

package/dist/index.js

@@ -0,0 +1,280 @@
+'use strict';
+
+var React = require('react');
+
+function setMeta(name, content, attr = "name") {
+    if (typeof document === "undefined")
+        return;
+    let el = document.querySelector(`meta[${attr}="${name}"]`);
+    if (!el) {
+        el = document.createElement("meta");
+        el.setAttribute(attr, name);
+        document.head.appendChild(el);
+    }
+    el.setAttribute("content", content);
+}
+function setLink(rel, href) {
+    if (typeof document === "undefined")
+        return;
+    let el = document.querySelector(`link[rel="${rel}"]`);
+    if (!el) {
+        el = document.createElement("link");
+        el.setAttribute("rel", rel);
+        document.head.appendChild(el);
+    }
+    el.setAttribute("href", href);
+}
+/**
+ * useSEO - Automatically handles:
+ * ✅ title, description
+ * ✅ Open Graph tags
+ * ✅ Twitter Card tags
+ * ✅ Canonical URL
+ * ✅ Keywords, robots
+ *
+ * @example
+ * useSEO({
+ *   title: "Home Page",
+ *   description: "Best products online",
+ *   image: "/banner.png"
+ * });
+ */
+function useSEO({ title, description, image, url, siteName = "My App", type = "website", twitterHandle, noIndex = false, canonical, keywords = [], }) {
+    React.useEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        const resolvedURL = url || (typeof window !== "undefined" ? window.location.href : "");
+        const canonicalURL = canonical || resolvedURL;
+        // --- Basic Meta ---
+        if (title)
+            document.title = title;
+        if (description)
+            setMeta("description", description);
+        if (keywords.length > 0)
+            setMeta("keywords", keywords.join(", "));
+        setMeta("robots", noIndex ? "noindex,nofollow" : "index,follow");
+        // --- Open Graph ---
+        if (title)
+            setMeta("og:title", title, "property");
+        if (description)
+            setMeta("og:description", description, "property");
+        if (image)
+            setMeta("og:image", image, "property");
+        if (resolvedURL)
+            setMeta("og:url", resolvedURL, "property");
+        setMeta("og:type", type, "property");
+        setMeta("og:site_name", siteName, "property");
+        // --- Twitter Card ---
+        setMeta("twitter:card", image ? "summary_large_image" : "summary");
+        if (title)
+            setMeta("twitter:title", title);
+        if (description)
+            setMeta("twitter:description", description);
+        if (image)
+            setMeta("twitter:image", image);
+        if (twitterHandle)
+            setMeta("twitter:site", twitterHandle);
+        // --- Canonical ---
+        if (canonicalURL)
+            setLink("canonical", canonicalURL);
+    }, [title, description, image, url, siteName, type, twitterHandle, noIndex, canonical, keywords]);
+}
+
+function buildSchema(type, data) {
+    switch (type) {
+        case "article": {
+            const d = data;
+            return {
+                "@context": "https://schema.org",
+                "@type": "Article",
+                headline: d.title,
+                author: d.author ? { "@type": "Person", name: d.author } : undefined,
+                datePublished: d.datePublished,
+                dateModified: d.dateModified || d.datePublished,
+                description: d.description,
+                image: d.image,
+                url: d.url,
+            };
+        }
+        case "product": {
+            const d = data;
+            return {
+                "@context": "https://schema.org",
+                "@type": "Product",
+                name: d.name,
+                description: d.description,
+                image: d.image,
+                sku: d.sku,
+                brand: d.brand ? { "@type": "Brand", name: d.brand } : undefined,
+                offers: {
+                    "@type": "Offer",
+                    price: d.price,
+                    priceCurrency: d.currency || "USD",
+                    availability: d.availability
+                        ? `https://schema.org/${d.availability}`
+                        : "https://schema.org/InStock",
+                },
+            };
+        }
+        case "organization": {
+            const d = data;
+            return {
+                "@context": "https://schema.org",
+                "@type": "Organization",
+                name: d.name,
+                url: d.url,
+                logo: d.logo,
+                description: d.description,
+                email: d.email,
+                telephone: d.phone,
+                address: d.address,
+            };
+        }
+        case "breadcrumb": {
+            const d = data;
+            return {
+                "@context": "https://schema.org",
+                "@type": "BreadcrumbList",
+                itemListElement: d.items.map((item, i) => ({
+                    "@type": "ListItem",
+                    position: i + 1,
+                    name: item.name,
+                    item: item.url,
+                })),
+            };
+        }
+        case "faq": {
+            const d = data;
+            return {
+                "@context": "https://schema.org",
+                "@type": "FAQPage",
+                mainEntity: d.questions.map((q) => ({
+                    "@type": "Question",
+                    name: q.question,
+                    acceptedAnswer: { "@type": "Answer", text: q.answer },
+                })),
+            };
+        }
+        case "person": {
+            const d = data;
+            return {
+                "@context": "https://schema.org",
+                "@type": "Person",
+                name: d.name,
+                url: d.url,
+                image: d.image,
+                jobTitle: d.jobTitle,
+                description: d.description,
+            };
+        }
+        case "website": {
+            const d = data;
+            return {
+                "@context": "https://schema.org",
+                "@type": "WebSite",
+                name: d.name,
+                url: d.url,
+                description: d.description,
+            };
+        }
+        default:
+            return { "@context": "https://schema.org" };
+    }
+}
+/**
+ * Schema - Generates structured JSON-LD data for SEO
+ * Supports: article, product, organization, breadcrumb, faq, person, website
+ *
+ * @example
+ * <Schema type="article" data={{
+ *   title: "Blog Title",
+ *   author: "Virendra"
+ * }} />
+ */
+function Schema({ type, data }) {
+    const schema = buildSchema(type, data);
+    return (React.createElement("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(schema, null, 2) } }));
+}
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+function generateAlt(src, title) {
+    var _a;
+    if (title)
+        return title;
+    // Extract filename from src, clean it up
+    const filename = ((_a = src.split("/").pop()) === null || _a === void 0 ? void 0 : _a.split("?")[0]) || "";
+    const withoutExt = filename.replace(/\.[^.]+$/, "");
+    const humanized = withoutExt
+        .replace(/[-_]/g, " ")
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .toLowerCase()
+        .trim();
+    return humanized || "image";
+}
+/**
+ * SEOImg - Smart image component for SEO
+ * ✅ Auto-generates alt text from title or filename
+ * ✅ Adds loading="lazy" by default
+ * ✅ Warns in development if src is missing
+ * ✅ Adds width/height to prevent CLS
+ *
+ * @example
+ * <SEOImg src="/product.jpg" title="Running Shoes" />
+ */
+function SEOImg(_a) {
+    var { src, title, alt, loading = "lazy", width, height, className, style } = _a, rest = __rest(_a, ["src", "title", "alt", "loading", "width", "height", "className", "style"]);
+    const resolvedAlt = alt || generateAlt(src, title);
+    React.useEffect(() => {
+        if (process.env.NODE_ENV === "development") {
+            if (!src) {
+                console.warn("[smart-seo-lite] <SEOImg> is missing the `src` prop.");
+            }
+            if (!alt && !title) {
+                console.warn(`[smart-seo-lite] <SEOImg src="${src}"> has no explicit 'alt' or 'title'. Auto-generated: "${resolvedAlt}". Consider providing explicit alt text for better SEO.`);
+            }
+            if (!width || !height) {
+                console.warn(`[smart-seo-lite] <SEOImg src="${src}"> is missing width/height props. This may cause Cumulative Layout Shift (CLS).`);
+            }
+        }
+    }, [src, alt, title, resolvedAlt, width, height]);
+    if (!src)
+        return null;
+    return (React.createElement("img", Object.assign({ src: src, alt: resolvedAlt, loading: loading === "auto" ? undefined : loading, width: width, height: height, className: className, style: style }, rest)));
+}
+
+exports.SEOImg = SEOImg;
+exports.Schema = Schema;
+exports.useSEO = useSEO;

package/dist/useSEO.d.ts

@@ -0,0 +1,28 @@
+export interface SEOProps {
+    title?: string;
+    description?: string;
+    image?: string;
+    url?: string;
+    siteName?: string;
+    type?: "website" | "article" | "product";
+    twitterHandle?: string;
+    noIndex?: boolean;
+    canonical?: string;
+    keywords?: string[];
+}
+/**
+ * useSEO - Automatically handles:
+ * ✅ title, description
+ * ✅ Open Graph tags
+ * ✅ Twitter Card tags
+ * ✅ Canonical URL
+ * ✅ Keywords, robots
+ *
+ * @example
+ * useSEO({
+ *   title: "Home Page",
+ *   description: "Best products online",
+ *   image: "/banner.png"
+ * });
+ */
+export declare function useSEO({ title, description, image, url, siteName, type, twitterHandle, noIndex, canonical, keywords, }: SEOProps): void;

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "smart-seo-lite",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Add SEO to your React/Next.js app in 3 lines of code. Auto meta tags, JSON-LD schema, and smart image SEO.",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "lint": "eslint src --ext .ts,.tsx"
+  },
+  "keywords": [
+    "seo",
+    "react",
+    "nextjs",
+    "meta-tags",
+    "open-graph",
+    "schema",
+    "json-ld",
+    "twitter-card",
+    "canonical",
+    "image-seo"
+  ],
+  "author": "Virendra",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@types/node": "^25.6.0",
+    "@types/react": "^19.2.14",
+    "rollup": "^3.0.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/virendra2902/smart-seo-lite"
+  },
+  "homepage": "https://virendra2902.github.io/smart-seo-lite",
+  "bugs": {
+    "url": "https://github.com/virendra2902/smart-seo-lite/issues"
+  }
+}