react-ssr-seo-toolkit 1.0.5 → 1.2.0

package/README.md

@@ -2,7 +2,7 @@
 
 <br />
 
-<img src="https://img.shields.io/badge/react--ssr--seo--toolkit-v1.0.5-000000?style=for-the-badge&labelColor=000000" alt="react-ssr-seo-toolkit" />
+<img src="https://img.shields.io/badge/react--ssr--seo--toolkit-v1.2.0-000000?style=for-the-badge&labelColor=000000" alt="react-ssr-seo-toolkit" />
 
 <br />
 <br />
@@ -23,7 +23,7 @@
 
 <br />
 
-**Meta Tags** &bull; **Open Graph** &bull; **Twitter Cards** &bull; **JSON-LD** &bull; **Canonical URLs** &bull; **Hreflang** &bull; **Robots**
+**Meta Tags** &bull; **Open Graph** &bull; **Twitter Cards** &bull; **JSON-LD** &bull; **Canonical URLs** &bull; **Hreflang** &bull; **Robots** &bull; **Sitemap** &bull; **SEO Validation** &bull; **OG Image**
 
 All in one package. Zero dependencies. Fully typed. SSR-safe.
 
@@ -50,8 +50,8 @@ All in one package. Zero dependencies. Fully typed. SSR-safe.
 - Most SEO packages are **locked to Next.js**
 - Many rely on **browser-only APIs** (`window`, `document`)
 - JSON-LD usually needs a **separate package**
-- Hard to get **type safety** across meta tags
-- Hydration mismatches in SSR
+- No sitemap or robots.txt generation
+- No way to validate SEO completeness at build time
 
 </td>
 <td width="50%">
@@ -60,9 +60,11 @@ All in one package. Zero dependencies. Fully typed. SSR-safe.
 
 - **Framework-agnostic** — works everywhere
 - **Zero browser globals** — fully SSR-safe
-- **JSON-LD built-in** — Article, Product, FAQ, Breadcrumb, Organization, Website
-- **Full TypeScript** — every prop, every config
-- **Deterministic output** — no hydration issues
+- **JSON-LD built-in** — 9 schema types including Person, Recipe, JobPosting
+- **Sitemap + robots.txt** generator built-in
+- **SEO validation + scoring** — catch missing tags at build time
+- **OG image SVG generator** — no external service needed
+- **Social preview component** — see how your page looks on Twitter, Facebook, etc.
 
 </td>
 </tr>
@@ -76,9 +78,9 @@ All in one package. Zero dependencies. Fully typed. SSR-safe.
 
 | | Framework | Integration |
 |:---:|---|---|
-| <img src="https://img.shields.io/badge/-Next.js-000?style=flat-square&logo=nextdotjs" /> | **Next.js App Router** | `generateMetadata()` + `safeJsonLdSerialize()` |
+| <img src="https://img.shields.io/badge/-Next.js-000?style=flat-square&logo=nextdotjs" /> | **Next.js App Router** | `toNextMetadata()` adapter → `generateMetadata()` |
 | <img src="https://img.shields.io/badge/-Next.js-000?style=flat-square&logo=nextdotjs" /> | **Next.js Pages Router** | `<SEOHead>` inside `next/head` |
-| <img src="https://img.shields.io/badge/-React_Router-CA4245?style=flat-square&logo=reactrouter&logoColor=white" /> | **React Router 7 SSR** | `<SEOHead>` in root component |
+| <img src="https://img.shields.io/badge/-React_Router-CA4245?style=flat-square&logo=reactrouter&logoColor=white" /> | **React Router 7** | `toRouterMeta()` adapter → `meta()` export |
 | <img src="https://img.shields.io/badge/-Express-000?style=flat-square&logo=express" /> | **Express + React SSR** | `<SEOHead>` in `renderToString()` |
 | <img src="https://img.shields.io/badge/-Remix-000?style=flat-square&logo=remix" /> | **Remix / Astro / Solid** | Pure utility functions (no React needed) |
 
@@ -124,14 +126,12 @@ my-app/
 
 ### 3. Create Site Config (once)
 
-This file holds defaults that every page inherits. Pages override only what they need.
-
 ```tsx
 // config/seo.ts
 import { createSEOConfig } from "react-ssr-seo-toolkit";
 
 export const siteConfig = createSEOConfig({
-  titleTemplate: "%s | MySite",              // auto-appends " | MySite" to every page title
+  titleTemplate: "%s | MySite",
   description: "Default site description for SEO.",
   openGraph: { siteName: "MySite", type: "website", locale: "en_US" },
   twitter: { card: "summary_large_image", site: "@mysite" },
@@ -140,14 +140,10 @@ export const siteConfig = createSEOConfig({
 export const SITE_URL = "https://mysite.com";
 ```
 
-> **Tip:** `titleTemplate` uses `%s` as a placeholder. Setting `title: "About"` renders as `About | MySite`.
-
 <br />
 
 ### 3.5. Create a Document Component
 
-The Document handles `<html>`, `<head>`, `<SEOHead>`, and `<body>` — so pages never have to.
-
 ```tsx
 // components/Document.tsx
 import { SEOHead, JsonLd } from "react-ssr-seo-toolkit";
@@ -179,14 +175,10 @@ export function Document({ children, seo, schemas }: DocumentProps) {
 }
 ```
 
-> This is the same pattern used by Next.js (`layout.tsx`), Remix (`root.tsx`), and React Router's root component. We call it `Document` to distinguish it from route-level layouts.
-
 <br />
 
 ### 4. Add to Any Page
 
-Merge the shared config with page-specific values. **No `<html>` or `<head>` tags needed** — the Document handles that.
-
 ```tsx
 // pages/AboutPage.tsx
 import { mergeSEOConfig, buildCanonicalUrl } from "react-ssr-seo-toolkit";
@@ -209,7 +201,7 @@ export function AboutPage() {
 }
 ```
 
-**That's it.** You now have full SEO on every page. Keep reading for structured data and framework examples.
+**That's it.** Keep reading for sitemap generation, SEO validation, OG images, and more.
 
 <br />
 
@@ -219,14 +211,316 @@ export function AboutPage() {
 
 ## Real-World Examples
 
-> Every example below is **copy-paste ready**. Just change the URLs and content.
+<br />
+
+### Sitemap Generation
+
+```ts
+// scripts/generate-sitemap.ts
+import { generateSitemap } from "react-ssr-seo-toolkit/sitemap";
+import { writeFileSync } from "fs";
+
+const sitemap = generateSitemap({
+  baseUrl: "https://trustix.uk",
+  routes: [
+    { path: "/", priority: 1.0, changefreq: "daily" },
+    { path: "/tickets", priority: 0.9, changefreq: "hourly" },
+    { path: "/about", priority: 0.5, changefreq: "monthly" },
+    "/blog",
+    "/contact",
+  ],
+  exclude: ["/dashboard/*", "/admin/*", "/login"],
+  defaultChangefreq: "weekly",
+  defaultPriority: 0.7,
+});
+
+writeFileSync("public/sitemap.xml", sitemap);
+```
+
+**Output:**
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://trustix.uk</loc>
+    <lastmod>2026-05-08</lastmod>
+    <changefreq>daily</changefreq>
+    <priority>1.0</priority>
+  </url>
+  ...
+</urlset>
+```
+
+> **Tip:** Call this in a build script or as an Express endpoint: `res.type("application/xml").send(sitemap)`.
+
+<br />
+
+---
+
+<br />
+
+### robots.txt Generation
+
+```ts
+import { generateRobots } from "react-ssr-seo-toolkit/sitemap";
+
+const robots = generateRobots({
+  rules: [
+    {
+      userAgent: "*",
+      allow: "/",
+      disallow: ["/dashboard", "/admin", "/login"],
+    },
+    {
+      userAgent: "Googlebot",
+      allow: "/",
+      crawlDelay: 2,
+    },
+  ],
+  sitemap: "https://trustix.uk/sitemap.xml",
+});
+```
+
+**Output:**
+
+```
+User-agent: *
+Allow: /
+Disallow: /dashboard
+Disallow: /admin
+Disallow: /login
+
+User-agent: Googlebot
+Allow: /
+Crawl-delay: 2
+
+Sitemap: https://trustix.uk/sitemap.xml
+```
+
+<br />
+
+---
+
+<br />
+
+### Breadcrumb Auto-Generation from URL
+
+```ts
+import { autoBreadcrumb } from "react-ssr-seo-toolkit/sitemap";
+import { createBreadcrumbSchema } from "react-ssr-seo-toolkit";
+
+// /ticket/liverpool-vs-arsenal → breadcrumb items automatically
+const items = autoBreadcrumb("/ticket/liverpool-vs-arsenal", {
+  baseUrl: "https://trustix.uk",
+  labels: { "/ticket": "Tickets" }, // optional custom label overrides
+});
+
+// Result:
+// [
+//   { name: "Home",                  url: "https://trustix.uk/" },
+//   { name: "Tickets",               url: "https://trustix.uk/ticket" },
+//   { name: "Liverpool Vs Arsenal",  url: "https://trustix.uk/ticket/liverpool-vs-arsenal" },
+// ]
+
+// Feed directly into schema:
+const schema = createBreadcrumbSchema(items);
+```
+
+<br />
+
+---
+
+<br />
+
+### SEO Validation (build-time warnings)
+
+Catch missing tags before they reach production:
+
+```ts
+import { validateSEO, printValidationReport } from "react-ssr-seo-toolkit/validation";
+
+const issues = validateSEO([
+  {
+    path: "/",
+    name: "HomePage",
+    seo: { title: "Trustix UK", description: "Buy tickets online." },
+  },
+  {
+    path: "/tickets",
+    name: "TicketListPage",
+    seo: {
+      title: "Tickets",
+      description: "Browse all tickets.",
+      canonical: "https://trustix.uk/tickets",
+      twitter: { card: "summary_large_image" },
+      // og:image missing — will warn
+    },
+  },
+]);
+
+console.log(printValidationReport(issues));
+```
+
+**Console output:**
+
+```
+HomePage:
+  ❌ [canonical] Missing canonical URL
+  ⚠️  [og:image] Missing og:image
+  ⚠️  [twitter:card] Missing twitter:card
+  ⚠️  [structured-data] No structured data (JSON-LD)
+
+TicketListPage:
+  ⚠️  [og:image] Missing og:image
+  ⚠️  [structured-data] No structured data (JSON-LD)
+```
+
+<br />
+
+---
+
+<br />
+
+### SEO Score per Page
+
+```ts
+import { getSEOScore, formatSEOScore } from "react-ssr-seo-toolkit/validation";
+
+const result = getSEOScore(
+  {
+    title: "Liverpool vs Arsenal — Premier League Tickets",
+    description: "Buy tickets for Liverpool vs Arsenal at Anfield.",
+    canonical: "https://trustix.uk/tickets/liverpool-arsenal",
+    openGraph: {
+      images: [{ url: "https://trustix.uk/og/liverpool-arsenal.jpg" }],
+    },
+    twitter: { card: "summary_large_image" },
+    jsonLd: { "@context": "https://schema.org", "@type": "Event" },
+  },
+  "TicketDetailPage"
+);
+
+console.log(formatSEOScore(result));
+```
+
+**Console output:**
+
+```
+🟢 SEO Score: TicketDetailPage  75/100 (75%)
+  ✅ Title
+  ✅ Description
+  ✅ Canonical URL
+  ✅ og:image
+  ✅ og:title
+  ✅ og:description
+  ✅ Twitter Card
+  ✅ Structured Data
+  ❌ Robots Directives (-5) — No robots directives
+  ❌ Hreflang (-5) — No hreflang alternates
+```
+
+<br />
+
+---
+
+<br />
+
+### OG Image Generation (no external service)
+
+Generate 1200×630 SVG images server-side — no Puppeteer, no Vercel Edge, no API keys:
+
+```ts
+import { createOGImageSVG } from "react-ssr-seo-toolkit/og";
+
+// Default template — dark gradient background
+const svg = createOGImageSVG({
+  title: "How to Build an SSR App",
+  description: "A complete guide to server-rendered React.",
+  brand: "My Blog",
+  accentColor: "#6366f1",
+});
+
+// Serve from an Express endpoint:
+app.get("/og/default.svg", (req, res) => {
+  res.type("image/svg+xml").send(
+    createOGImageSVG({ title: req.query.title as string, brand: "My Blog" })
+  );
+});
+```
+
+**Article template** (light background with category tag):
+
+```ts
+const svg = createOGImageSVG({
+  title: "Premier League Preview 2026",
+  description: "Everything you need to know about the upcoming season.",
+  template: "article",
+  category: "Sports",
+  author: "James Walker",
+  dateString: "May 8, 2026",
+  brand: "Trustix UK",
+  accentColor: "#e63946",
+});
+```
+
+**Sports event template** (VS layout):
+
+```ts
+const svg = createOGImageSVG({
+  title: "Liverpool vs Arsenal",
+  template: "sports-event",
+  homeTeam: "Liverpool",
+  awayTeam: "Arsenal",
+  eventDate: "Saturday, May 15, 2026 · 17:30",
+  brand: "Trustix UK",
+  accentColor: "#ffd700",
+});
+```
+
+> The SVG output can be used directly as `og:image` or converted to PNG with `sharp`:
+> ```ts
+> import sharp from "sharp";
+> const png = await sharp(Buffer.from(svg)).png().toBuffer();
+> ```
+
+<br />
+
+---
+
+<br />
+
+### Social Preview Component (dev mode)
+
+See exactly how your page will look on Twitter, Facebook, LinkedIn, and Google — without leaving the browser:
+
+```tsx
+import { SEOPreview } from "react-ssr-seo-toolkit/components";
+
+// Twitter card preview
+<SEOPreview config={seoConfig} platform="twitter" />
+
+// Facebook / Open Graph preview
+<SEOPreview config={seoConfig} platform="facebook" />
+
+// LinkedIn preview
+<SEOPreview config={seoConfig} platform="linkedin" />
+
+// Google search result preview
+<SEOPreview config={seoConfig} platform="google" />
+```
+
+> **Tip:** Wrap in `{process.env.NODE_ENV === "development" && ...}` so it never ships to production.
+
+<br />
+
+---
 
 <br />
 
 ### Blog / Article Page
 
 ```tsx
-// pages/BlogPost.tsx
 import {
   mergeSEOConfig, buildCanonicalUrl,
   createArticleSchema, createBreadcrumbSchema,
@@ -235,40 +529,25 @@ import { siteConfig, SITE_URL } from "../config/seo";
 import { Document } from "../components/Document";
 
 export function BlogPostPage() {
-  // ── Page SEO ──────────────────────────────────────────────
   const seo = mergeSEOConfig(siteConfig, {
     title: "How to Build an SSR App",
     description: "A complete guide to building server-rendered React apps with proper SEO.",
     canonical: buildCanonicalUrl(SITE_URL, "/blog/ssr-guide"),
     openGraph: {
       title: "How to Build an SSR App",
-      description: "A complete guide to SSR with React.",
       type: "article",
       url: "https://myblog.com/blog/ssr-guide",
-      images: [{
-        url: "https://myblog.com/images/ssr-guide.jpg",
-        width: 1200, height: 630,
-        alt: "SSR Guide Cover",
-      }],
-    },
-    twitter: {
-      title: "How to Build an SSR App",
-      creator: "@authorhandle",
-      image: "https://myblog.com/images/ssr-guide.jpg",
+      images: [{ url: "https://myblog.com/images/ssr-guide.jpg", width: 1200, height: 630, alt: "SSR Guide" }],
     },
+    twitter: { title: "How to Build an SSR App", creator: "@authorhandle", image: "https://myblog.com/images/ssr-guide.jpg" },
   });
 
-  // ── Structured Data ───────────────────────────────────────
   const article = createArticleSchema({
     headline: "How to Build an SSR App",
     url: "https://myblog.com/blog/ssr-guide",
-    description: "A complete guide to SSR with React.",
     datePublished: "2025-06-15",
     dateModified: "2025-07-01",
-    author: [
-      { name: "Jane Doe", url: "https://myblog.com/authors/jane" },
-      { name: "John Smith" },
-    ],
+    author: [{ name: "Jane Doe", url: "https://myblog.com/authors/jane" }],
     publisher: { name: "My Blog", logo: "https://myblog.com/logo.png" },
     images: ["https://myblog.com/images/ssr-guide.jpg"],
     section: "Technology",
@@ -281,12 +560,10 @@ export function BlogPostPage() {
     { name: "How to Build an SSR App", url: "https://myblog.com/blog/ssr-guide" },
   ]);
 
-  // ── Render — no <html> or <head> tags! ────────────────────
   return (
     <Document seo={seo} schemas={[article, breadcrumbs]}>
       <article>
         <h1>How to Build an SSR App</h1>
-        <p>Your article content here...</p>
       </article>
     </Document>
   );
@@ -295,36 +572,6 @@ export function BlogPostPage() {
 
 <br />
 
-### Generated HTML Output
-
-```html
-<head>
-  <!-- Basic -->
-  <title>How to Build an SSR App | My Blog</title>
-  <meta name="description" content="A complete guide to building server-rendered React apps..." />
-  <link rel="canonical" href="https://myblog.com/blog/ssr-guide" />
-
-  <!-- Open Graph -->
-  <meta property="og:title" content="How to Build an SSR App" />
-  <meta property="og:description" content="A complete guide to SSR with React." />
-  <meta property="og:type" content="article" />
-  <meta property="og:url" content="https://myblog.com/blog/ssr-guide" />
-  <meta property="og:site_name" content="My Blog" />
-  <meta property="og:image" content="https://myblog.com/images/ssr-guide.jpg" />
-
-  <!-- Twitter Card -->
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:site" content="@myblog" />
-  <meta name="twitter:title" content="How to Build an SSR App" />
-
-  <!-- JSON-LD -->
-  <script type="application/ld+json">{"@context":"https://schema.org","@type":"Article",...}</script>
-  <script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList",...}</script>
-</head>
-```
-
-<br />
-
 ---
 
 <br />
@@ -332,59 +579,38 @@ export function BlogPostPage() {
 ### E-Commerce Product Page
 
 ```tsx
-import {
-  mergeSEOConfig, buildCanonicalUrl,
-  createProductSchema,
-} from "react-ssr-seo-toolkit";
-import { siteConfig, SITE_URL } from "../config/seo";
-import { Document } from "../components/Document";
+import { mergeSEOConfig, buildCanonicalUrl, createProductSchema } from "react-ssr-seo-toolkit";
 
 function ProductPage() {
-  const product = {
-    name: "Ergonomic Mechanical Keyboard",
-    description: "Premium split keyboard with Cherry MX Brown switches.",
-    price: 189.99,
-    image: "https://acmestore.com/images/keyboard.jpg",
-    brand: "Acme Peripherals",
-    sku: "ACME-KB-001",
-    inStock: true,
-    rating: 4.7,
-    reviewCount: 342,
-  };
-
   const url = buildCanonicalUrl(SITE_URL, "/products/ergonomic-keyboard");
 
   const seo = mergeSEOConfig(siteConfig, {
-    title: product.name,
-    description: product.description,
+    title: "Ergonomic Mechanical Keyboard",
+    description: "Premium split keyboard with Cherry MX Brown switches.",
     canonical: url,
     openGraph: {
-      title: product.name,
-      description: product.description,
       type: "product",
       url,
-      images: [{ url: product.image, width: 800, height: 800, alt: product.name }],
+      images: [{ url: "https://acmestore.com/images/keyboard.jpg", width: 800, height: 800, alt: "Keyboard" }],
     },
   });
 
   const schema = createProductSchema({
-    name: product.name,
+    name: "Ergonomic Mechanical Keyboard",
     url,
-    description: product.description,
-    price: product.price,
+    price: 189.99,
     priceCurrency: "USD",
-    availability: product.inStock ? "InStock" : "OutOfStock",
-    brand: product.brand,
-    sku: product.sku,
-    images: [product.image],
-    ratingValue: product.rating,
-    reviewCount: product.reviewCount,
+    availability: "InStock",
+    brand: "Acme Peripherals",
+    sku: "ACME-KB-001",
+    images: ["https://acmestore.com/images/keyboard.jpg"],
+    ratingValue: 4.7,
+    reviewCount: 342,
   });
 
   return (
     <Document seo={seo} schemas={[schema]}>
-      <h1>{product.name}</h1>
-      <p>${product.price}</p>
+      <h1>Ergonomic Mechanical Keyboard</h1>
     </Document>
   );
 }
@@ -396,40 +622,62 @@ function ProductPage() {
 
 <br />
 
-### FAQ Page
+### Job Posting Schema
 
 ```tsx
-import {
-  mergeSEOConfig, buildCanonicalUrl, createFAQSchema,
-} from "react-ssr-seo-toolkit";
-import { siteConfig, SITE_URL } from "../config/seo";
-import { Document } from "../components/Document";
+import { createJobPostingSchema } from "react-ssr-seo-toolkit";
+
+const schema = createJobPostingSchema({
+  title: "Senior React Engineer",
+  description: "Build and maintain our SSR platform...",
+  datePosted: "2026-05-01",
+  validThrough: "2026-06-30",
+  employmentType: "FULL_TIME",
+  hiringOrganization: {
+    name: "Trustix UK",
+    sameAs: "https://trustix.uk",
+    logo: "https://trustix.uk/logo.png",
+  },
+  jobLocation: { addressLocality: "London", addressCountry: "GB" },
+  remote: true,
+  baseSalary: {
+    currency: "GBP",
+    value: { minValue: 70000, maxValue: 95000 },
+    unitText: "YEAR",
+  },
+});
+```
 
-function FAQPage() {
-  const faqs = [
-    { question: "What payment methods do you accept?", answer: "Visa, MasterCard, PayPal, Apple Pay." },
-    { question: "How long does shipping take?", answer: "Standard: 3-5 business days." },
-    { question: "What is your return policy?", answer: "30-day money-back guarantee." },
-  ];
+<br />
 
-  const seo = mergeSEOConfig(siteConfig, {
-    title: "FAQ",
-    description: "Frequently asked questions about our products and services.",
-    canonical: buildCanonicalUrl(SITE_URL, "/faq"),
-  });
+---
 
-  return (
-    <Document seo={seo} schemas={[createFAQSchema(faqs)]}>
-      <h1>Frequently Asked Questions</h1>
-      {faqs.map((faq, i) => (
-        <details key={i}>
-          <summary>{faq.question}</summary>
-          <p>{faq.answer}</p>
-        </details>
-      ))}
-    </Document>
-  );
-}
+<br />
+
+### Recipe Schema
+
+```tsx
+import { createRecipeSchema } from "react-ssr-seo-toolkit";
+
+const schema = createRecipeSchema({
+  name: "Chicken Biryani",
+  description: "Authentic Dhaka-style biryani with aromatic spices.",
+  images: ["https://food.com/biryani.jpg"],
+  author: { name: "Chef Rahman" },
+  prepTime: "PT30M",
+  cookTime: "PT1H",
+  totalTime: "PT1H30M",
+  recipeYield: "6 servings",
+  recipeCategory: "Main Course",
+  recipeCuisine: "Bengali",
+  recipeIngredient: ["1kg chicken", "500g basmati rice", "onions"],
+  recipeInstructions: [
+    { name: "Marinate", text: "Marinate chicken with spices for 30 minutes." },
+    { name: "Cook Rice", text: "Parboil basmati rice until 70% done." },
+  ],
+  ratingValue: 4.9,
+  reviewCount: 128,
+});
 ```
 
 <br />
@@ -438,59 +686,49 @@ function FAQPage() {
 
 <br />
 
-### Homepage (Organization + Website Schema)
+### Person Schema
 
 ```tsx
-import {
-  mergeSEOConfig,
-  createOrganizationSchema, createWebsiteSchema,
-} from "react-ssr-seo-toolkit";
-import { siteConfig } from "../config/seo";
-import { Document } from "../components/Document";
+import { createPersonSchema } from "react-ssr-seo-toolkit";
+
+const schema = createPersonSchema({
+  name: "Tonmoy Khan",
+  url: "https://tonmoykhan.site",
+  jobTitle: "Software Engineer",
+  image: "https://tonmoykhan.site/photo.jpg",
+  sameAs: [
+    "https://github.com/Tonmoy01",
+    "https://linkedin.com/in/tonmoy",
+  ],
+  worksFor: { name: "Trustix UK", url: "https://trustix.uk" },
+});
+```
 
-function HomePage() {
-  const seo = mergeSEOConfig(siteConfig, {
-    title: "Home",
-    canonical: "https://acme.com",
-    openGraph: {
-      title: "Acme — Building the future",
-      url: "https://acme.com",
-      images: [{ url: "https://acme.com/og-home.jpg", width: 1200, height: 630, alt: "Acme" }],
-    },
-  });
+<br />
 
-  const org = createOrganizationSchema({
-    name: "Acme Inc",
-    url: "https://acme.com",
-    logo: "https://acme.com/logo.png",
-    description: "Leading provider of quality products.",
-    sameAs: [
-      "https://twitter.com/acme",
-      "https://linkedin.com/company/acme",
-      "https://facebook.com/acme",
-    ],
-    contactPoint: {
-      telephone: "+1-800-555-0199",
-      contactType: "customer service",
-      email: "support@acme.com",
-      areaServed: "US",
-      availableLanguage: ["English", "Spanish"],
-    },
-  });
+---
 
-  const site = createWebsiteSchema({
-    name: "Acme Inc",
-    url: "https://acme.com",
-    description: "Leading provider of quality products.",
-    searchUrl: "https://acme.com/search",  // enables Google sitelinks searchbox
-  });
+<br />
 
-  return (
-    <Document seo={seo} schemas={[org, site]}>
-      <h1>Welcome to Acme</h1>
-    </Document>
-  );
-}
+### Event Page (Sports Match)
+
+```tsx
+import { createEventSchema } from "react-ssr-seo-toolkit";
+
+// @type auto-switches to "SportsEvent" when sport/homeTeam/awayTeam is provided
+const schema = createEventSchema({
+  name: "El Clásico",
+  startDate: "2026-04-20T21:00:00+02:00",
+  sport: "Soccer",
+  homeTeam: { name: "FC Barcelona", url: "https://fcbarcelona.com" },
+  awayTeam: { name: "Real Madrid CF", url: "https://realmadrid.com" },
+  location: {
+    name: "Camp Nou",
+    address: { addressLocality: "Barcelona", addressCountry: "ES" },
+  },
+  eventStatus: "EventScheduled",
+  eventAttendanceMode: "OfflineEventAttendanceMode",
+});
 ```
 
 <br />
@@ -512,11 +750,6 @@ const seo = mergeSEOConfig(siteConfig, {
     { hreflang: "x-default", href: "https://mysite.com/products" },
   ],
 });
-
-// Generates:
-// <link rel="alternate" hreflang="en" href="https://mysite.com/en/products" />
-// <link rel="alternate" hreflang="es" href="https://mysite.com/es/products" />
-// ...
 ```
 
 <br />
@@ -525,57 +758,20 @@ const seo = mergeSEOConfig(siteConfig, {
 
 <br />
 
-### No-Index Pages (Admin, Login, Drafts)
+### No-Index Pages
 
 ```tsx
 import { mergeSEOConfig, noIndex, noIndexNoFollow } from "react-ssr-seo-toolkit";
 
-// Login page: don't index, but follow links
 const loginSeo = mergeSEOConfig(siteConfig, {
   title: "Login",
   robots: noIndex(),            // "noindex, follow"
 });
 
-// Admin page: don't index, don't follow
 const adminSeo = mergeSEOConfig(siteConfig, {
   title: "Admin Dashboard",
   robots: noIndexNoFollow(),    // "noindex, nofollow"
 });
-
-// Fine-grained control
-const archiveSeo = mergeSEOConfig(siteConfig, {
-  title: "Archive",
-  robots: {
-    index: true,
-    follow: true,
-    noarchive: true,
-    nosnippet: true,
-    maxSnippet: 50,
-    maxImagePreview: "standard",
-  },
-});
-```
-
-<br />
-
----
-
-<br />
-
-### Combine Multiple Schemas
-
-```tsx
-import { composeSchemas, createOrganizationSchema, createWebsiteSchema, JsonLd } from "react-ssr-seo-toolkit";
-
-// Merge into a single JSON-LD block with @graph array
-const combined = composeSchemas(
-  createOrganizationSchema({ name: "Acme", url: "https://acme.com" }),
-  createWebsiteSchema({ name: "Acme", url: "https://acme.com" }),
-);
-
-<JsonLd data={combined} />
-
-// Output: single <script> tag with {"@context":"https://schema.org","@graph":[...]}
 ```
 
 <br />
@@ -590,131 +786,52 @@ const combined = composeSchemas(
 
 ```tsx
 // app/blog/[slug]/page.tsx
-import {
-  buildTitle, buildDescription, buildCanonicalUrl,
-  createArticleSchema, safeJsonLdSerialize,
-} from "react-ssr-seo-toolkit";
+import { toNextMetadata } from "react-ssr-seo-toolkit/adapters/nextjs";
+import { createArticleSchema, safeJsonLdSerialize, buildCanonicalUrl } from "react-ssr-seo-toolkit";
+import type { Metadata } from "next";
 
-export async function generateMetadata({ params }) {
+export async function generateMetadata({ params }): Promise<Metadata> {
   const post = await getPost(params.slug);
-
-  return {
-    title: buildTitle(post.title, "%s | My Blog"),
-    description: buildDescription(post.excerpt, 160),
-    alternates: {
-      canonical: buildCanonicalUrl("https://myblog.com", `/blog/${params.slug}`),
-    },
+  return toNextMetadata({
+    title: post.title,
+    titleTemplate: "%s | My Blog",
+    description: post.excerpt,
+    canonical: buildCanonicalUrl("https://myblog.com", `/blog/${params.slug}`),
     openGraph: {
       title: post.title,
       type: "article",
-      images: [{ url: post.image, width: 1200, height: 630 }],
+      images: [{ url: post.image, width: 1200, height: 630, alt: post.title }],
     },
-  };
-}
-
-export default function BlogPost({ params }) {
-  const post = getPost(params.slug);
-
-  const schema = createArticleSchema({
-    headline: post.title,
-    url: `https://myblog.com/blog/${params.slug}`,
-    datePublished: post.date,
-    author: { name: post.author },
+    twitter: { card: "summary_large_image" },
   });
-
-  return (
-    <>
-      <script
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: safeJsonLdSerialize(schema) }}
-      />
-      <article>
-        <h1>{post.title}</h1>
-        <p>{post.content}</p>
-      </article>
-    </>
-  );
 }
 ```
 
 <br />
 
-### Next.js Pages Router
+### React Router 7
 
 ```tsx
-// pages/about.tsx — no <html> tags, Next.js handles that
-import Head from "next/head";
-import { SEOHead, mergeSEOConfig } from "react-ssr-seo-toolkit";
-import { siteConfig } from "../config/seo";
-
-export default function AboutPage() {
-  const seo = mergeSEOConfig(siteConfig, {
-    title: "About Us",
-    description: "Learn about our mission.",
-    canonical: "https://mysite.com/about",
-  });
-
-  return (
-    <>
-      <Head>
-        <SEOHead {...seo} />
-      </Head>
-      <main>
-        <h1>About Us</h1>
-      </main>
-    </>
-  );
-}
-```
-
-<br />
-
-### React Router 7 SSR
-
-```tsx
-// app/root.tsx — only the root layout writes <html>
-import { Outlet, useMatches } from "react-router";
-import { SEOHead } from "react-ssr-seo-toolkit";
-
-export default function Root() {
-  const matches = useMatches();
-  const seo = matches.at(-1)?.data?.seo;
-
-  return (
-    <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        {seo && <SEOHead {...seo} />}
-      </head>
-      <body>
-        <Outlet />
-      </body>
-    </html>
-  );
-}
-```
-
-```tsx
-// app/routes/about.tsx — page just provides SEO data + content
+// app/routes/about.tsx
+import { toRouterMeta } from "react-ssr-seo-toolkit/adapters/react-router";
 import { mergeSEOConfig, buildCanonicalUrl } from "react-ssr-seo-toolkit";
 import { siteConfig, SITE_URL } from "../config/seo";
+import type { Route } from "./+types/about";
 
-export function loader() {
-  return {
-    seo: mergeSEOConfig(siteConfig, {
-      title: "About",
+export function meta({}: Route.MetaArgs) {
+  return toRouterMeta(
+    mergeSEOConfig(siteConfig, {
+      title: "About Us",
+      description: "Learn about our company.",
       canonical: buildCanonicalUrl(SITE_URL, "/about"),
-    }),
-  };
+      openGraph: { type: "website", title: "About Us" },
+      twitter: { card: "summary_large_image" },
+    })
+  );
 }
 
 export default function AboutPage() {
-  return (
-    <main>
-      <h1>About Us</h1>
-    </main>
-  );
+  return <main><h1>About Us</h1></main>;
 }
 ```
 
@@ -723,54 +840,26 @@ export default function AboutPage() {
 ### Express + React SSR
 
 ```tsx
-// server.tsx — renders page components that include Document internally
-import express from "express";
-import { renderToString } from "react-dom/server";
-import { HomePage } from "./pages/HomePage";
-import { ProductPage } from "./pages/ProductPage";
-
-const app = express();
-
-app.get("/", (req, res) => {
-  const html = renderToString(<HomePage />);
-  res.send(`<!DOCTYPE html>${html}`);
+app.get("/sitemap.xml", (req, res) => {
+  const { generateSitemap } = require("react-ssr-seo-toolkit/sitemap");
+  res.type("application/xml").send(
+    generateSitemap({ baseUrl: "https://mysite.com", routes: appRoutes, exclude: ["/admin/*"] })
+  );
 });
 
-app.get("/products/:id", (req, res) => {
-  const product = getProduct(req.params.id);
-  const html = renderToString(<ProductPage product={product} />);
-  res.send(`<!DOCTYPE html>${html}`);
+app.get("/robots.txt", (req, res) => {
+  const { generateRobots } = require("react-ssr-seo-toolkit/sitemap");
+  res.type("text/plain").send(
+    generateRobots({ rules: { disallow: ["/admin"] }, sitemap: "https://mysite.com/sitemap.xml" })
+  );
 });
 
-app.listen(3000);
-```
-
-```tsx
-// pages/ProductPage.tsx — no <html> tags, Document handles that
-import { mergeSEOConfig, createProductSchema } from "react-ssr-seo-toolkit";
-import { siteConfig } from "../config/seo";
-import { Document } from "../components/Document";
-
-export function ProductPage({ product }) {
-  const seo = mergeSEOConfig(siteConfig, {
-    title: product.name,
-    description: product.description,
-    canonical: product.url,
-  });
-
-  const schema = createProductSchema({
-    name: product.name,
-    url: product.url,
-    price: product.price,
-  });
-
-  return (
-    <Document seo={seo} schemas={[schema]}>
-      <h1>{product.name}</h1>
-      <p>${product.price}</p>
-    </Document>
+app.get("/og/:title.svg", (req, res) => {
+  const { createOGImageSVG } = require("react-ssr-seo-toolkit/og");
+  res.type("image/svg+xml").send(
+    createOGImageSVG({ title: decodeURIComponent(req.params.title), brand: "MySite" })
   );
-}
+});
 ```
 
 <br />
@@ -786,7 +875,7 @@ export function ProductPage({ product }) {
 | Function | What It Does |
 |---|---|
 | `createSEOConfig(config?)` | Create a normalized SEO config. Use for site-wide defaults. |
-| `mergeSEOConfig(base, override)` | Deep-merge site config with page-level overrides. Arrays are replaced, not concatenated. |
+| `mergeSEOConfig(base, override)` | Deep-merge site config with page-level overrides. |
 | `normalizeSEOConfig(config)` | Trim strings, normalize URLs, clean up a config object. |
 
 <br />
@@ -796,42 +885,101 @@ export function ProductPage({ product }) {
 | Function | Example | Result |
 |---|---|---|
 | `buildTitle(title, template)` | `buildTitle("About", "%s \| MySite")` | `"About \| MySite"` |
-| `buildDescription(desc, maxLen)` | `buildDescription("Long text...", 160)` | Truncated at 160 chars |
 | `buildCanonicalUrl(base, path)` | `buildCanonicalUrl("https://x.com", "/about")` | `"https://x.com/about"` |
 | `buildRobotsDirectives(config)` | `buildRobotsDirectives({ index: false })` | `"noindex, follow"` |
-| `noIndex()` | `noIndex()` | `{ index: false, follow: true }` |
-| `noIndexNoFollow()` | `noIndexNoFollow()` | `{ index: false, follow: false }` |
-| `buildOpenGraph(config)` | `buildOpenGraph({ title: "Hi" })` | `[{ property: "og:title", content: "Hi" }]` |
-| `buildTwitterMetadata(config)` | `buildTwitterMetadata({ card: "summary" })` | `[{ name: "twitter:card", content: "summary" }]` |
-| `buildAlternateLinks(alternates)` | `buildAlternateLinks([{ hreflang: "en", href: "..." }])` | `[{ rel: "alternate", hreflang: "en", href: "..." }]` |
+| `noIndex()` | — | `{ index: false, follow: true }` |
+| `noIndexNoFollow()` | — | `{ index: false, follow: false }` |
 
 <br />
 
 ### JSON-LD Schema Generators
 
-All return a plain object with `@context: "https://schema.org"` and `@type` set.
+All return `{ "@context": "https://schema.org", "@type": "...", ... }`.
 
 | Function | Schema Type | Use Case |
 |---|---|---|
 | `createOrganizationSchema(input)` | Organization | Company info, logo, social links, contact |
 | `createWebsiteSchema(input)` | WebSite | Site name, sitelinks searchbox |
-| `createArticleSchema(input)` | Article | Blog posts, news articles, authors, dates |
-| `createProductSchema(input)` | Product | E-commerce: price, brand, SKU, ratings, availability |
+| `createArticleSchema(input)` | Article | Blog posts, news articles |
+| `createProductSchema(input)` | Product | E-commerce: price, brand, SKU, ratings |
 | `createBreadcrumbSchema(items)` | BreadcrumbList | Navigation hierarchy |
-| `createFAQSchema(items)` | FAQPage | FAQ pages with question + answer pairs |
-| `composeSchemas(...schemas)` | @graph | Combine multiple schemas into one JSON-LD block |
+| `createFAQSchema(items)` | FAQPage | Question + answer pairs |
+| `createEventSchema(input)` | Event / SportsEvent | Concerts, conferences, sports — auto-switches to `SportsEvent` when `sport`/`homeTeam`/`awayTeam` is set |
+| `createPersonSchema(input)` | Person | Author bios, team pages |
+| `createRecipeSchema(input)` | Recipe | Food blogs, cooking sites |
+| `createJobPostingSchema(input)` | JobPosting | Career pages, job boards |
+| `composeSchemas(...schemas)` | @graph | Combine multiple schemas into one `<script>` |
 
 <br />
 
-### Utilities
+### Sitemap & Robots — `react-ssr-seo-toolkit/sitemap`
 
 | Function | What It Does |
 |---|---|
-| `safeJsonLdSerialize(data)` | Serialize JSON-LD safely — escapes `<`, `>`, `&` to prevent XSS |
-| `normalizeUrl(url)` | Trim whitespace, remove trailing slashes |
-| `buildFullUrl(base, path?)` | Combine base URL with path |
-| `omitEmpty(obj)` | Remove keys with `undefined`, `null`, or empty string values |
-| `deepMerge(base, override)` | Deep-merge two objects (arrays replaced, not concatenated) |
+| `generateSitemap(options)` | Generates a valid `sitemap.xml` string from a list of routes |
+| `generateRobots(options)` | Generates a `robots.txt` string with user-agent rules and sitemap links |
+| `autoBreadcrumb(path, options?)` | Auto-generates `BreadcrumbItem[]` from a URL path like `/ticket/liverpool-vs-arsenal` |
+
+**`generateSitemap` options:**
+
+| Option | Type | Description |
+|---|---|---|
+| `routes` | `string[] \| SitemapRoute[]` | Route paths or route objects with `lastmod`, `changefreq`, `priority` |
+| `baseUrl` | `string` | Base URL (e.g. `"https://mysite.com"`) |
+| `exclude` | `string[]` | Glob patterns to exclude (supports `*` wildcard and `/*` suffix) |
+| `defaultChangefreq` | `ChangeFreq` | Default change frequency for all routes |
+| `defaultPriority` | `number` | Default priority (0.0–1.0) for all routes |
+
+<br />
+
+### SEO Validation & Scoring — `react-ssr-seo-toolkit/validation`
+
+| Function | What It Does |
+|---|---|
+| `validateSEO(routes)` | Checks a list of routes for missing/invalid SEO fields, returns `SEOValidationIssue[]` |
+| `printValidationReport(issues)` | Formats issues into a human-readable string with icons |
+| `getSEOScore(config, pageName?)` | Scores a single page's SEO config out of 100 |
+| `formatSEOScore(result)` | Formats the score result as a pretty-printed string |
+
+**Scoring breakdown (100 points total):**
+
+| Check | Points |
+|---|---|
+| Title (≤60 chars) | 20 |
+| Description (≤160 chars) | 15 |
+| Canonical URL | 10 |
+| og:image | 15 |
+| og:title | 5 |
+| og:description | 5 |
+| Twitter Card | 10 |
+| Structured Data (JSON-LD) | 10 |
+| Robots Directives | 5 |
+| Hreflang | 5 |
+
+<br />
+
+### OG Image Generation — `react-ssr-seo-toolkit/og`
+
+| Function | What It Does |
+|---|---|
+| `createOGImageSVG(options)` | Returns a 1200×630 SVG string — serve as `image/svg+xml` or convert to PNG with `sharp` |
+
+**Options:**
+
+| Option | Type | Description |
+|---|---|---|
+| `title` | `string` | Main headline |
+| `description` | `string?` | Subtitle / description |
+| `template` | `"default" \| "article" \| "sports-event"` | Visual template |
+| `brand` | `string?` | Brand name shown in corner |
+| `backgroundColor` | `string?` | Override background color |
+| `textColor` | `string?` | Override text color |
+| `accentColor` | `string?` | Override accent / highlight color |
+| `category` | `string?` | Category tag (article template) |
+| `author` | `string?` | Author name (article template) |
+| `dateString` | `string?` | Display date (article template) |
+| `homeTeam` / `awayTeam` | `string?` | Team names (sports-event template) |
+| `eventDate` | `string?` | Event date display (sports-event template) |
 
 <br />
 
@@ -839,42 +987,17 @@ All return a plain object with `@context: "https://schema.org"` and `@type` set.
 
 #### `<SEOHead>`
 
-Renders all SEO tags as React elements. Place inside `<head>`.
+Renders all SEO tags inside `<head>`. Accepts the full `SEOConfig` plus an optional `nonce` for CSP.
 
 ```tsx
 <SEOHead
   title="My Page"
   titleTemplate="%s | MySite"
-  description="Page description here."
+  description="Page description."
   canonical="https://mysite.com/page"
   robots={{ index: true, follow: true }}
-  openGraph={{
-    title: "My Page",
-    description: "For social sharing.",
-    type: "website",
-    url: "https://mysite.com/page",
-    siteName: "MySite",
-    locale: "en_US",
-    images: [{ url: "https://mysite.com/og.jpg", width: 1200, height: 630, alt: "Preview" }],
-  }}
-  twitter={{
-    card: "summary_large_image",
-    site: "@mysite",
-    creator: "@author",
-    title: "My Page",
-    image: "https://mysite.com/twitter.jpg",
-  }}
-  alternates={[
-    { hreflang: "en", href: "https://mysite.com/en/page" },
-    { hreflang: "es", href: "https://mysite.com/es/page" },
-  ]}
-  additionalMetaTags={[
-    { name: "author", content: "Jane Doe" },
-  ]}
-  additionalLinkTags={[
-    { rel: "icon", href: "/favicon.ico" },
-  ]}
-  jsonLd={createArticleSchema({ headline: "...", url: "..." })}
+  openGraph={{ type: "website", images: [{ url: "...", width: 1200, height: 630 }] }}
+  twitter={{ card: "summary_large_image", site: "@mysite" }}
 />
 ```
 
@@ -886,6 +1009,53 @@ Standalone JSON-LD `<script>` tag renderer.
 <JsonLd data={createProductSchema({ name: "Widget", url: "...", price: 29.99 })} />
 ```
 
+#### `<SEOPreview>` — `react-ssr-seo-toolkit/components`
+
+Renders a visual social card preview. Useful in dev mode or a CMS preview panel.
+
+```tsx
+<SEOPreview config={seoConfig} platform="twitter" />    // Twitter card
+<SEOPreview config={seoConfig} platform="facebook" />   // Facebook / OG
+<SEOPreview config={seoConfig} platform="linkedin" />   // LinkedIn post
+<SEOPreview config={seoConfig} platform="google" />     // Google search result
+```
+
+| Prop | Type | Default |
+|---|---|---|
+| `config` | `SEOConfig` | required |
+| `platform` | `"twitter" \| "facebook" \| "linkedin" \| "google"` | `"twitter"` |
+| `style` | `React.CSSProperties` | — |
+
+<br />
+
+### Framework Adapters
+
+#### `react-ssr-seo-toolkit/adapters/nextjs`
+
+| Function | What It Does |
+|---|---|
+| `toNextMetadata(config)` | Converts `SEOConfig` → Next.js App Router `Metadata` object |
+| `buildNextTitle(config)` | Returns the resolved title string |
+
+#### `react-ssr-seo-toolkit/adapters/react-router`
+
+| Function | What It Does |
+|---|---|
+| `toRouterMeta(config)` | Converts `SEOConfig` → `MetaDescriptor[]` for a route's `meta()` export |
+| `toRouterLinks(config)` | Converts canonical + hreflang → `LinkDescriptor[]` for a route's `links()` export |
+
+<br />
+
+### Utilities
+
+| Function | What It Does |
+|---|---|
+| `safeJsonLdSerialize(data)` | Serialize JSON-LD safely — escapes `<`, `>`, `&` to prevent XSS |
+| `normalizeUrl(url)` | Trim whitespace, remove trailing slashes |
+| `buildFullUrl(base, path?)` | Combine base URL with path |
+| `omitEmpty(obj)` | Remove keys with `undefined`, `null`, or `""` values |
+| `deepMerge(base, override)` | Deep-merge two objects (arrays replaced, not concatenated) |
+
 <br />
 
 ### TypeScript Types
@@ -893,22 +1063,28 @@ Standalone JSON-LD `<script>` tag renderer.
 ```tsx
 import type {
   SEOConfig,
-  OpenGraphConfig,
-  OpenGraphImage,
-  OpenGraphType,        // "website" | "article" | "product" | "profile" | ...
-  TwitterConfig,
-  TwitterCardType,      // "summary" | "summary_large_image" | "app" | "player"
+  OpenGraphConfig, OpenGraphImage, OpenGraphType,
+  TwitterConfig, TwitterCardType,
   RobotsConfig,
   AlternateLink,
-  JSONLDBase,
-  BreadcrumbItem,
-  OrganizationSchemaInput,
-  WebsiteSchemaInput,
-  ArticleSchemaInput,
-  ProductSchemaInput,
+  JSONLDBase, BreadcrumbItem,
+  OrganizationSchemaInput, WebsiteSchemaInput,
+  ArticleSchemaInput, ProductSchemaInput,
   FAQItem,
-  SEOHeadProps,
-  JsonLdProps,
+  EventSchemaInput, EventStatus, EventAttendanceMode,
+  PersonSchemaInput,
+  RecipeSchemaInput, RecipeInstruction,
+  JobPostingSchemaInput,
+  // Sitemap
+  SitemapRoute, GenerateSitemapOptions, ChangeFreq,
+  RobotsRule, GenerateRobotsOptions,
+  // Validation
+  SEOValidationIssue, RouteWithSEO,
+  SEOScoreResult, SEOScoreCheck,
+  // OG Image
+  OGImageOptions, OGImageTemplate,
+  // Components
+  SEOHeadProps, JsonLdProps, SEOPreviewProps,
 } from "react-ssr-seo-toolkit";
 ```
 
@@ -918,9 +1094,28 @@ import type {
 
 <br />
 
-## Live Demo
+## Entry Points
+
+The package ships separate entry points so you only import what you need:
+
+| Import | Contents |
+|---|---|
+| `react-ssr-seo-toolkit` | Everything — core, schema, utils, components |
+| `react-ssr-seo-toolkit/schema` | Schema generators only (no React) |
+| `react-ssr-seo-toolkit/sitemap` | `generateSitemap`, `generateRobots`, `autoBreadcrumb` |
+| `react-ssr-seo-toolkit/validation` | `validateSEO`, `getSEOScore`, `formatSEOScore` |
+| `react-ssr-seo-toolkit/og` | `createOGImageSVG` |
+| `react-ssr-seo-toolkit/components` | React components — `SEOHead`, `JsonLd`, `SEOPreview` |
+| `react-ssr-seo-toolkit/adapters/nextjs` | Next.js adapter |
+| `react-ssr-seo-toolkit/adapters/react-router` | React Router 7 adapter |
+
+<br />
+
+---
 
-The repo includes a **working Express SSR demo** with every feature:
+<br />
+
+## Live Demo
 
 ```bash
 git clone https://github.com/Tonmoy01/react-ssr-seo-toolkit.git
@@ -929,19 +1124,7 @@ npm install
 npm run demo
 ```
 
-Then visit [http://localhost:3000](http://localhost:3000):
-
-| URL | Page | SEO Features |
-|---|---|---|
-| `/` | Home | Organization + Website schema, hreflang, OG images |
-| `/getting-started` | Getting Started | Installation guide with copy-paste examples |
-| `/article` | Article | Article schema, breadcrumbs, multiple authors, Twitter cards |
-| `/product` | Product | Product schema, pricing, ratings, availability |
-| `/faq` | FAQ | FAQPage schema with Q&A pairs |
-| `/noindex` | No-Index | Robots noindex directive |
-| `/api` | API Reference | Complete function and type documentation |
-
-> **Tip:** Right-click any page and **View Page Source** to see all SEO tags in the raw HTML.
+Then visit [http://localhost:3000](http://localhost:3000).
 
 <br />
 
@@ -956,9 +1139,7 @@ npm install          # install dependencies
 npm run build        # build the library
 npm run dev          # watch mode (auto-rebuild)
 npm test             # run tests
-npm run test:watch   # tests in watch mode
 npm run lint         # type check
-npm run clean        # clean build output
 npm run demo         # run demo server
 ```
 
@@ -972,24 +1153,16 @@ npm run demo         # run demo server
 
 ### "Cannot find module 'react-ssr-seo-toolkit'"
 
-Ensure the package is installed and your bundler supports the `exports` field in `package.json`. If using an older bundler, try importing from `react-ssr-seo-toolkit/dist/index.js` directly.
+Ensure the package is installed and your bundler supports the `exports` field in `package.json`.
 
 ### Hydration mismatch warnings
 
-`<SEOHead>` produces deterministic output. If you see hydration warnings, ensure the same config object is used on both server and client. Avoid using `Date.now()` or random values in your SEO config.
+`<SEOHead>` produces deterministic output. Ensure the same config object is used on both server and client. Avoid using `Date.now()` or random values in your SEO config.
 
 ### JSON-LD not appearing in page source
 
 Make sure `<JsonLd>` is inside `<head>` and rendered during SSR — not in a client-only `useEffect`.
 
-### TypeScript errors
-
-All types are exported. Import them directly:
-
-```tsx
-import type { SEOConfig, OpenGraphConfig } from "react-ssr-seo-toolkit";
-```
-
 <br />
 
 ---