npm - react-ssr-seo-toolkit - Versions diffs - 1.0.2 → 1.0.3 - Mend

react-ssr-seo-toolkit 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/README.md +117 -324
package/package.json +3 -3

package/README.md CHANGED Viewed

@@ -2,12 +2,12 @@
 <br />
-<img src="https://img.shields.io/badge/react--ssr--seo-v1.0.1-000000?style=for-the-badge&labelColor=000000" alt="react-ssr-seo" />
+<img src="https://img.shields.io/badge/react--ssr--seo--toolkit-v1.0.3-000000?style=for-the-badge&labelColor=000000" alt="react-ssr-seo-toolkit" />
 <br />
 <br />
-# `react-ssr-seo`
+# `react-ssr-seo-toolkit`
 ### The Complete SEO Toolkit for React SSR Applications
@@ -19,7 +19,7 @@
 &nbsp;
 [![License](https://img.shields.io/npm/l/react-ssr-seo-toolkit?style=for-the-badge&color=blue)](./LICENSE)
 &nbsp;
-[![Bundle](https://img.shields.io/bundlephobia/minzip/react-ssr-seo?style=for-the-badge&label=size&color=success)](https://bundlephobia.com/package/react-ssr-seo-toolkit)
+[![Bundle](https://img.shields.io/bundlephobia/minzip/react-ssr-seo-toolkit?style=for-the-badge&label=size&color=success)](https://bundlephobia.com/package/react-ssr-seo-toolkit)
 <br />
@@ -98,46 +98,72 @@ All in one package. Zero dependencies. Fully typed. SSR-safe.
 npm install react-ssr-seo-toolkit
 ```
-```bash
-# or
-pnpm add react-ssr-seo-toolkit    # yarn add react-ssr-seo-toolkit    # bun add react-ssr-seo-toolkit
-```
+> **Requires:** `react >= 18.0.0` as a peer dependency. Zero other dependencies.
+<br />
+### 2. Project Structure
-> **Requires:** `react >= 18.0.0` as peer dependency
+You only need **two new files** — a shared SEO config and your page components:
+```
+my-app/
+├── config/
+│   └── seo.ts              ← shared SEO defaults (Step 3)
+├── pages/
+│   ├── HomePage.tsx         ← each page merges its own SEO
+│   ├── AboutPage.tsx
+│   └── BlogPost.tsx
+├── components/
+│   └── Layout.tsx           ← wraps <SEOHead> + <JsonLd>
+├── server.tsx               ← Express / SSR entry point
+└── package.json
+```
 <br />
-### 2. Create Site Config (once)
+### 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";
-const siteConfig = createSEOConfig({
+export const siteConfig = createSEOConfig({
   titleTemplate: "%s | MySite",              // auto-appends " | MySite" to every page title
-  openGraph: { siteName: "MySite", type: "website" },
+  description: "Default site description for SEO.",
+  openGraph: { siteName: "MySite", type: "website", locale: "en_US" },
   twitter: { card: "summary_large_image", site: "@mysite" },
 });
+export const SITE_URL = "https://mysite.com";
 ```
+> **Tip:** `titleTemplate` uses `%s` as a placeholder. Setting `title: "About"` renders as `About | MySite`.
 <br />
-### 3. Add to Any Page
+### 4. Add to Any Page
+Merge the shared config with page-specific values, then render with `<SEOHead>`.
 ```tsx
+// pages/AboutPage.tsx
 import { SEOHead, mergeSEOConfig, buildCanonicalUrl } from "react-ssr-seo-toolkit";
+import { siteConfig, SITE_URL } from "../config/seo";
-function AboutPage() {
+export function AboutPage() {
   const seo = mergeSEOConfig(siteConfig, {
     title: "About Us",
     description: "Learn about our company and mission.",
-    canonical: buildCanonicalUrl("https://mysite.com", "/about"),
+    canonical: buildCanonicalUrl(SITE_URL, "/about"),
   });
   return (
     <html>
       <head>
         <SEOHead {...seo} />
-        {/* Renders: <title>, <meta>, <link>, <script type="application/ld+json"> */}
       </head>
       <body>
         <h1>About Us</h1>
@@ -147,7 +173,7 @@ function AboutPage() {
 }
 ```
-**Done.** That's all you need for basic SEO. Keep reading for real-world examples.
+**That's it.** You now have full SEO on every page. Keep reading for structured data and framework examples.
 <br />
@@ -163,29 +189,21 @@ function AboutPage() {
 ### Blog / Article Page
-<details open>
-<summary><strong>Click to expand full example</strong></summary>
 ```tsx
+// pages/BlogPost.tsx
 import {
   SEOHead, JsonLd,
-  createSEOConfig, mergeSEOConfig, buildCanonicalUrl,
+  mergeSEOConfig, buildCanonicalUrl,
   createArticleSchema, createBreadcrumbSchema,
 } from "react-ssr-seo-toolkit";
+import { siteConfig, SITE_URL } from "../config/seo";
-// Site config (create once, reuse everywhere)
-const siteConfig = createSEOConfig({
-  titleTemplate: "%s | My Blog",
-  openGraph: { siteName: "My Blog", type: "website" },
-  twitter: { card: "summary_large_image", site: "@myblog" },
-});
-function BlogPostPage() {
+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("https://myblog.com", "/blog/ssr-guide"),
+    canonical: buildCanonicalUrl(SITE_URL, "/blog/ssr-guide"),
     openGraph: {
       title: "How to Build an SSR App",
       description: "A complete guide to SSR with React.",
@@ -246,10 +264,9 @@ function BlogPostPage() {
 }
 ```
-</details>
+<br />
-<details>
-<summary><strong>See the HTML output this generates</strong></summary>
+### Generated HTML Output
 ```html
 <head>
@@ -257,40 +274,26 @@ function BlogPostPage() {
   <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" />
-  <meta name="robots" content="index, follow" />
-  <!-- Open Graph (Facebook, LinkedIn, etc.) -->
+  <!-- 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" />
-  <meta property="og:image:width" content="1200" />
-  <meta property="og:image:height" content="630" />
-  <meta property="og:image:alt" content="SSR Guide Cover" />
   <!-- Twitter Card -->
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:site" content="@myblog" />
-  <meta name="twitter:creator" content="@authorhandle" />
   <meta name="twitter:title" content="How to Build an SSR App" />
-  <meta name="twitter:image" content="https://myblog.com/images/ssr-guide.jpg" />
-  <!-- JSON-LD: Article -->
-  <script type="application/ld+json">
-    {"@context":"https://schema.org","@type":"Article","headline":"How to Build an SSR App",...}
-  </script>
-  <!-- JSON-LD: Breadcrumbs -->
-  <script type="application/ld+json">
-    {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[...]}
-  </script>
+  <!-- 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>
 ```
-</details>
 <br />
 ---
@@ -299,21 +302,13 @@ function BlogPostPage() {
 ### E-Commerce Product Page
-<details open>
-<summary><strong>Click to expand full example</strong></summary>
 ```tsx
 import {
   SEOHead, JsonLd,
-  createSEOConfig, mergeSEOConfig, buildCanonicalUrl,
+  mergeSEOConfig, buildCanonicalUrl,
   createProductSchema, createBreadcrumbSchema,
 } from "react-ssr-seo-toolkit";
-const siteConfig = createSEOConfig({
-  titleTemplate: "%s | Acme Store",
-  openGraph: { siteName: "Acme Store", type: "website" },
-  twitter: { card: "summary_large_image", site: "@acmestore" },
-});
+import { siteConfig, SITE_URL } from "../config/seo";
 function ProductPage() {
   const product = {
@@ -328,9 +323,8 @@ function ProductPage() {
     reviewCount: 342,
   };
-  const url = buildCanonicalUrl("https://acmestore.com", "/products/ergonomic-keyboard");
+  const url = buildCanonicalUrl(SITE_URL, "/products/ergonomic-keyboard");
-  // ── Page SEO ──────────────────────────────────────────────
   const seo = mergeSEOConfig(siteConfig, {
     title: product.name,
     description: product.description,
@@ -344,7 +338,6 @@ function ProductPage() {
     },
   });
-  // ── Structured Data ───────────────────────────────────────
   const schema = createProductSchema({
     name: product.name,
     url,
@@ -359,31 +352,21 @@ function ProductPage() {
     reviewCount: product.reviewCount,
   });
-  const breadcrumbs = createBreadcrumbSchema([
-    { name: "Home", url: "https://acmestore.com" },
-    { name: "Products", url: "https://acmestore.com/products" },
-    { name: product.name, url },
-  ]);
   return (
     <html>
       <head>
         <SEOHead {...seo} />
         <JsonLd data={schema} />
-        <JsonLd data={breadcrumbs} />
       </head>
       <body>
         <h1>{product.name}</h1>
-        <p>{product.description}</p>
-        <p>${product.price} — {product.inStock ? "In Stock" : "Out of Stock"}</p>
+        <p>${product.price}</p>
       </body>
     </html>
   );
 }
 ```
-</details>
 <br />
 ---
@@ -392,14 +375,12 @@ function ProductPage() {
 ### FAQ Page
-<details open>
-<summary><strong>Click to expand full example</strong></summary>
 ```tsx
 import {
   SEOHead, JsonLd,
   mergeSEOConfig, buildCanonicalUrl, createFAQSchema,
 } from "react-ssr-seo-toolkit";
+import { siteConfig, SITE_URL } from "../config/seo";
 function FAQPage() {
   const faqs = [
@@ -411,7 +392,7 @@ function FAQPage() {
   const seo = mergeSEOConfig(siteConfig, {
     title: "FAQ",
     description: "Frequently asked questions about our products and services.",
-    canonical: buildCanonicalUrl("https://mysite.com", "/faq"),
+    canonical: buildCanonicalUrl(SITE_URL, "/faq"),
   });
   return (
@@ -434,8 +415,6 @@ function FAQPage() {
 }
 ```
-</details>
 <br />
 ---
@@ -444,15 +423,13 @@ function FAQPage() {
 ### Homepage (Organization + Website Schema)
-<details>
-<summary><strong>Click to expand full example</strong></summary>
 ```tsx
 import {
   SEOHead, JsonLd,
   mergeSEOConfig,
   createOrganizationSchema, createWebsiteSchema,
 } from "react-ssr-seo-toolkit";
+import { siteConfig } from "../config/seo";
 function HomePage() {
   const seo = mergeSEOConfig(siteConfig, {
@@ -506,8 +483,6 @@ function HomePage() {
 }
 ```
-</details>
 <br />
 ---
@@ -524,7 +499,6 @@ const seo = mergeSEOConfig(siteConfig, {
     { hreflang: "en",        href: "https://mysite.com/en/products" },
     { hreflang: "es",        href: "https://mysite.com/es/products" },
     { hreflang: "fr",        href: "https://mysite.com/fr/products" },
-    { hreflang: "de",        href: "https://mysite.com/de/products" },
     { hreflang: "x-default", href: "https://mysite.com/products" },
   ],
 });
@@ -532,7 +506,6 @@ const seo = mergeSEOConfig(siteConfig, {
 // Generates:
 // <link rel="alternate" hreflang="en" href="https://mysite.com/en/products" />
 // <link rel="alternate" hreflang="es" href="https://mysite.com/es/products" />
-// <link rel="alternate" hreflang="fr" href="https://mysite.com/fr/products" />
 // ...
 ```
@@ -605,9 +578,6 @@ const combined = composeSchemas(
 ### Next.js App Router
-<details open>
-<summary><strong>Using with <code>generateMetadata()</code></strong></summary>
 ```tsx
 // app/blog/[slug]/page.tsx
 import {
@@ -657,15 +627,10 @@ export default function BlogPost({ params }) {
 }
 ```
-</details>
 <br />
 ### Next.js Pages Router
-<details>
-<summary><strong>Using with <code>next/head</code></strong></summary>
 ```tsx
 // pages/about.tsx
 import Head from "next/head";
@@ -691,34 +656,19 @@ export default function AboutPage() {
 }
 ```
-</details>
 <br />
 ### React Router 7 SSR
-<details>
-<summary><strong>Using in root document</strong></summary>
 ```tsx
 // app/root.tsx
-import { SEOHead, JsonLd, createSEOConfig, mergeSEOConfig, createOrganizationSchema } from "react-ssr-seo-toolkit";
-const siteConfig = createSEOConfig({
-  titleTemplate: "%s — Acme",
-  openGraph: { siteName: "Acme", type: "website", locale: "en_US" },
-  twitter: { card: "summary_large_image", site: "@acme" },
-});
+import { SEOHead, mergeSEOConfig, createOrganizationSchema, JsonLd } from "react-ssr-seo-toolkit";
+import { siteConfig } from "./config/seo";
 export function HomePage() {
   const seo = mergeSEOConfig(siteConfig, {
     title: "Home",
     canonical: "https://acme.com",
-    jsonLd: createOrganizationSchema({
-      name: "Acme",
-      url: "https://acme.com",
-      logo: "https://acme.com/logo.png",
-    }),
   });
   return (
@@ -736,27 +686,19 @@ export function HomePage() {
 }
 ```
-</details>
 <br />
 ### Express + React SSR
-<details>
-<summary><strong>Using with <code>renderToString()</code></strong></summary>
 ```tsx
+// server.tsx
 import express from "express";
 import { renderToString } from "react-dom/server";
-import { SEOHead, JsonLd, createSEOConfig, mergeSEOConfig, createProductSchema } from "react-ssr-seo-toolkit";
+import { SEOHead, JsonLd, mergeSEOConfig, createProductSchema } from "react-ssr-seo-toolkit";
+import { siteConfig } from "./config/seo";
 const app = express();
-const siteConfig = createSEOConfig({
-  titleTemplate: "%s | My Store",
-  openGraph: { siteName: "My Store" },
-});
 function ProductPage({ product }) {
   const seo = mergeSEOConfig(siteConfig, {
     title: product.name,
@@ -791,8 +733,6 @@ app.get("/products/:id", (req, res) => {
 app.listen(3000);
 ```
-</details>
 <br />
 ---
@@ -803,161 +743,55 @@ app.listen(3000);
 ### Config Builders
-<table>
-<tr>
-<th>Function</th>
-<th>What It Does</th>
-</tr>
-<tr>
-<td><code>createSEOConfig(config?)</code></td>
-<td>Create a normalized SEO config. Use for site-wide defaults.</td>
-</tr>
-<tr>
-<td><code>mergeSEOConfig(base, override)</code></td>
-<td>Deep-merge site config with page-level overrides. Arrays are replaced, not concatenated.</td>
-</tr>
-<tr>
-<td><code>normalizeSEOConfig(config)</code></td>
-<td>Trim strings, normalize URLs, clean up a config object.</td>
-</tr>
-</table>
+| 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. |
+| `normalizeSEOConfig(config)` | Trim strings, normalize URLs, clean up a config object. |
 <br />
 ### Metadata Helpers
-<table>
-<tr>
-<th>Function</th>
-<th>Example</th>
-<th>Result</th>
-</tr>
-<tr>
-<td><code>buildTitle(title, template)</code></td>
-<td><code>buildTitle("About", "%s | MySite")</code></td>
-<td><code>"About | MySite"</code></td>
-</tr>
-<tr>
-<td><code>buildDescription(desc, maxLen)</code></td>
-<td><code>buildDescription("Long text...", 160)</code></td>
-<td>Truncated at 160 chars with ellipsis</td>
-</tr>
-<tr>
-<td><code>buildCanonicalUrl(base, path)</code></td>
-<td><code>buildCanonicalUrl("https://x.com", "/about")</code></td>
-<td><code>"https://x.com/about"</code></td>
-</tr>
-<tr>
-<td><code>buildRobotsDirectives(config)</code></td>
-<td><code>buildRobotsDirectives({ index: false, follow: true })</code></td>
-<td><code>"noindex, follow"</code></td>
-</tr>
-<tr>
-<td><code>noIndex()</code></td>
-<td><code>noIndex()</code></td>
-<td><code>{ index: false, follow: true }</code></td>
-</tr>
-<tr>
-<td><code>noIndexNoFollow()</code></td>
-<td><code>noIndexNoFollow()</code></td>
-<td><code>{ index: false, follow: false }</code></td>
-</tr>
-<tr>
-<td><code>buildOpenGraph(config)</code></td>
-<td><code>buildOpenGraph({ title: "Hi" })</code></td>
-<td><code>[{ property: "og:title", content: "Hi" }]</code></td>
-</tr>
-<tr>
-<td><code>buildTwitterMetadata(config)</code></td>
-<td><code>buildTwitterMetadata({ card: "summary" })</code></td>
-<td><code>[{ name: "twitter:card", content: "summary" }]</code></td>
-</tr>
-<tr>
-<td><code>buildAlternateLinks(alternates)</code></td>
-<td><code>buildAlternateLinks([{ hreflang: "en", href: "..." }])</code></td>
-<td><code>[{ rel: "alternate", hreflang: "en", href: "..." }]</code></td>
-</tr>
-</table>
+| 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: "..." }]` |
 <br />
 ### JSON-LD Schema Generators
-> All return a plain object with `@context: "https://schema.org"` and `@type` set.
+All return a plain object with `@context: "https://schema.org"` and `@type` set.
-<table>
-<tr>
-<th>Function</th>
-<th>Schema Type</th>
-<th>Use Case</th>
-</tr>
-<tr>
-<td><code>createOrganizationSchema(input)</code></td>
-<td>Organization</td>
-<td>Company info, logo, social links, contact</td>
-</tr>
-<tr>
-<td><code>createWebsiteSchema(input)</code></td>
-<td>WebSite</td>
-<td>Site name, sitelinks searchbox</td>
-</tr>
-<tr>
-<td><code>createArticleSchema(input)</code></td>
-<td>Article</td>
-<td>Blog posts, news articles, authors, dates</td>
-</tr>
-<tr>
-<td><code>createProductSchema(input)</code></td>
-<td>Product</td>
-<td>E-commerce: price, brand, SKU, ratings, availability</td>
-</tr>
-<tr>
-<td><code>createBreadcrumbSchema(items)</code></td>
-<td>BreadcrumbList</td>
-<td>Navigation hierarchy</td>
-</tr>
-<tr>
-<td><code>createFAQSchema(items)</code></td>
-<td>FAQPage</td>
-<td>FAQ pages with question + answer pairs</td>
-</tr>
-<tr>
-<td><code>composeSchemas(...schemas)</code></td>
-<td>@graph</td>
-<td>Combine multiple schemas into one JSON-LD block</td>
-</tr>
-</table>
+| 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 |
+| `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 |
 <br />
 ### Utilities
-<table>
-<tr>
-<th>Function</th>
-<th>What It Does</th>
-</tr>
-<tr>
-<td><code>safeJsonLdSerialize(data)</code></td>
-<td>Serialize JSON-LD safely for <code>&lt;script&gt;</code> tags — escapes <code>&lt;</code>, <code>&gt;</code>, <code>&amp;</code> to prevent XSS</td>
-</tr>
-<tr>
-<td><code>normalizeUrl(url)</code></td>
-<td>Trim whitespace, remove trailing slashes</td>
-</tr>
-<tr>
-<td><code>buildFullUrl(base, path?)</code></td>
-<td>Combine base URL with path</td>
-</tr>
-<tr>
-<td><code>omitEmpty(obj)</code></td>
-<td>Remove keys with <code>undefined</code>, <code>null</code>, or empty string values</td>
-</tr>
-<tr>
-<td><code>deepMerge(base, override)</code></td>
-<td>Deep-merge two objects (arrays replaced, not concatenated)</td>
-</tr>
-</table>
+| 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) |
 <br />
@@ -996,11 +830,9 @@ Renders all SEO tags as React elements. Place inside `<head>`.
   ]}
   additionalMetaTags={[
     { name: "author", content: "Jane Doe" },
-    { property: "article:published_time", content: "2025-06-15" },
   ]}
   additionalLinkTags={[
     { rel: "icon", href: "/favicon.ico" },
-    { rel: "apple-touch-icon", href: "/apple-touch-icon.png", sizes: "180x180" },
   ]}
   jsonLd={createArticleSchema({ headline: "...", url: "..." })}
 />
@@ -1048,49 +880,26 @@ import type {
 ## Live Demo
-Try it locally — the repo includes a **working Express SSR demo** with 5 pages:
+The repo includes a **working Express SSR demo** with every feature:
 ```bash
-git clone https://github.com/Tonmoy01/react-ssr-seo.git
-cd react-ssr-seo
+git clone https://github.com/Tonmoy01/react-ssr-seo-toolkit.git
+cd react-ssr-seo-toolkit
 npm install
 npm run demo
 ```
-Then open your browser:
+Then visit [http://localhost:3000](http://localhost:3000):
-<table>
-<tr>
-<th>URL</th>
-<th>Page</th>
-<th>SEO Features Demonstrated</th>
-</tr>
-<tr>
-<td><code>localhost:3000</code></td>
-<td>Home</td>
-<td>Organization + Website schema, hreflang, OG images</td>
-</tr>
-<tr>
-<td><code>localhost:3000/article</code></td>
-<td>Article</td>
-<td>Article schema, breadcrumbs, multiple authors, Twitter cards</td>
-</tr>
-<tr>
-<td><code>localhost:3000/product</code></td>
-<td>Product</td>
-<td>Product schema, pricing, ratings, availability, breadcrumbs</td>
-</tr>
-<tr>
-<td><code>localhost:3000/faq</code></td>
-<td>FAQ</td>
-<td>FAQPage schema with Q&A pairs</td>
-</tr>
-<tr>
-<td><code>localhost:3000/noindex</code></td>
-<td>No-Index</td>
-<td>Robots noindex directive</td>
-</tr>
-</table>
+| 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.
@@ -1121,41 +930,25 @@ npm run demo         # run demo server
 ## Troubleshooting
-<details>
-<summary><strong>"Cannot find module 'react-ssr-seo'"</strong></summary>
+### "Cannot find module 'react-ssr-seo-toolkit'"
-<br />
-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/dist/index.js` directly.
-</details>
+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.
-<details>
-<summary><strong>Hydration mismatch warnings</strong></summary>
-<br />
+### 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.
-</details>
-<details>
-<summary><strong>JSON-LD not appearing in page source</strong></summary>
+### JSON-LD not appearing in page source
-<br />
-Make sure `<JsonLd>` or `<script type="application/ld+json">` is inside `<head>` and rendered during SSR — not in a client-only `useEffect`.
-</details>
+Make sure `<JsonLd>` is inside `<head>` and rendered during SSR — not in a client-only `useEffect`.
-<details>
-<summary><strong>TypeScript errors</strong></summary>
-<br />
+### TypeScript errors
 All types are exported. Import them directly:
 ```tsx
 import type { SEOConfig, OpenGraphConfig } from "react-ssr-seo-toolkit";
 ```
-</details>
 <br />

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "react-ssr-seo-toolkit",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Framework-agnostic SEO utilities, metadata builders, structured data helpers, and React components for SSR applications",
   "keywords": [
     "seo",
@@ -24,11 +24,11 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/Tonmoy01/react-ssr-seo.git"
+    "url": "https://github.com/Tonmoy01/react-ssr-seo-toolkit.git"
   },
   "homepage": "https://react-ssr-seo.tonmoykhan.site/",
   "bugs": {
-    "url": "https://github.com/Tonmoy01/react-ssr-seo/issues"
+    "url": "https://github.com/Tonmoy01/react-ssr-seo-toolkit/issues"
   },
   "type": "module",
   "main": "./dist/index.cjs",