react-seo-optimize 1.0.0 → 2.0.0

package/README.md

@@ -1,14 +1,25 @@
 # react-seo-optimize
 
+[![Tests](https://github.com/liljemery/react-seo-optimize/workflows/Tests/badge.svg)](https://github.com/liljemery/react-seo-optimize/actions)
+[![npm version](https://img.shields.io/npm/v/react-seo-optimize.svg)](https://www.npmjs.com/package/react-seo-optimize)
+[![npm downloads](https://img.shields.io/npm/dm/react-seo-optimize.svg)](https://www.npmjs.com/package/react-seo-optimize)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
+
 Simple and intuitive SEO component for React with JSON-LD schema generation and HTML injection.
 
+<img width="694" height="568" alt="Screenshot 2026-01-18 at 6 29 22 PM" src="https://github.com/user-attachments/assets/7e430f06-d0da-489c-af4e-7275fd0d9506" />
+
 ## Features
 
 - 🚀 Simple React component for SEO meta tags
-- 📊 JSON-LD schema generators (Organization, ProfessionalService, Breadcrumb, WebPage)
-- 🔧 CLI tool to inject schemas into HTML files
-- 🎯 Open Graph and Twitter Card support
+- 📊 JSON-LD schema generators (9 types: Organization, Article, Product, FAQ, HowTo, LocalBusiness, and more)
+- 🔧 CLI tool to inject schemas into HTML files (with dry-run and backup support)
+- 🎯 Open Graph and Twitter Card support (with secure URLs and article tags)
 - 💡 Intuitive API with smart defaults
+- ✅ SSR/SSG ready with native DOM manipulation (no dependencies)
+- 🔒 Type-safe with full TypeScript support
+- 🎨 Multiple schema composition support
 
 ## Installation
 
@@ -23,9 +34,11 @@ yarn add react-seo-optimize
 **Peer Dependencies:**
 
 ```bash
-npm install react react-helmet
+npm install react
 ```
 
+> **⚠️ Breaking Change in v2.0:** The library no longer requires `react-helmet` or `react-helmet-async`. It now uses native DOM manipulation for better performance and SSR compatibility. See [Migration Guide](./MIGRATION_GUIDE.md) for details.
+
 ## Quick Start
 
 ### 1. Install Dependencies
@@ -35,7 +48,7 @@ npm install react react-helmet
 npm install react-seo-optimize
 
 # Install peer dependencies
-npm install react react-helmet
+npm install react
 ```
 
 ### 2. Basic Usage in Your React Component
@@ -91,6 +104,8 @@ const AboutPage = () => {
 
 ### Step 2: Add Open Graph Tags for Social Media
 
+![unnamed](https://github.com/user-attachments/assets/de7a3720-ed5f-489b-8437-48ee758aa095)
+
 Enhance your social media sharing with Open Graph tags:
 
 ```jsx
@@ -107,6 +122,8 @@ Enhance your social media sharing with Open Graph tags:
 
 ### Step 3: Add Twitter Card Tags
 
+<img width="585" height="537" alt="card tag" src="https://github.com/user-attachments/assets/7481749a-9a95-4f25-8236-99fcca0a9734" />
+
 Optimize how your links appear on Twitter:
 
 ```jsx
@@ -239,7 +256,20 @@ For static HTML files or global organization schema, use the CLI tool:
 2. Run the CLI command:
 
 ```bash
+# Basic usage
 npx react-seo-generate-schema
+
+# Preview changes without modifying files
+npx react-seo-generate-schema --dry-run
+
+# Create backup before modifying
+npx react-seo-generate-schema --backup
+
+# Custom paths
+npx react-seo-generate-schema --config ./config.json --html ./public/index.html
+
+# Help
+npx react-seo-generate-schema --help
 ```
 
 Or add to your `package.json` scripts:
@@ -292,7 +322,17 @@ const ArticlePage = ({ article }) => {
         twitterImage={article.featuredImage}
         robots={article.published ? 'index, follow' : 'noindex, nofollow'}
         author={article.author.name}
-        schema={orgSchema}
+        htmlLang="en"
+        themeColor="#ffffff"
+        twitterSite="@mycompany"
+        twitterCreator={article.author.twitter}
+        ogImageSecureUrl={article.featuredImage}
+        articlePublishedTime={article.publishedAt}
+        articleModifiedTime={article.updatedAt}
+        articleAuthor={article.author.name}
+        articleSection="Technology"
+        articleTag={article.tags}
+        structuredData={orgSchema}
       />
       
       <article>
@@ -306,6 +346,43 @@ const ArticlePage = ({ article }) => {
 
 ## Advanced Usage
 
+### Multiple Schema Support
+
+You can now combine multiple schemas on a single page:
+
+```jsx
+import { SEOptimize, generateOrganizationSchema, generateBreadcrumbSchema, generateArticleSchema } from 'react-seo-optimize';
+
+const ArticlePage = ({ article }) => {
+  const orgSchema = generateOrganizationSchema({
+    name: 'My Company',
+    url: 'https://example.com',
+  });
+
+  const breadcrumbSchema = generateBreadcrumbSchema([
+    { name: 'Home', url: 'https://example.com' },
+    { name: 'Blog', url: 'https://example.com/blog' },
+    { name: article.title, url: `https://example.com/blog/${article.slug}` },
+  ]);
+
+  const articleSchema = generateArticleSchema({
+    headline: article.title,
+    description: article.excerpt,
+    datePublished: article.publishedAt,
+    author: { '@type': 'Person', name: article.author.name },
+  });
+
+  return (
+    <SEOptimize
+      title={`${article.title} | My Company`}
+      description={article.excerpt}
+      canonical={`https://example.com/blog/${article.slug}`}
+      structuredData={[orgSchema, breadcrumbSchema, articleSchema]}
+    />
+  );
+};
+```
+
 ### Schema Generators Reference
 
 All available schema generators:
@@ -315,7 +392,12 @@ import {
   generateOrganizationSchema,
   generateProfessionalServiceSchema,
   generateBreadcrumbSchema,
-  generateWebPageSchema
+  generateWebPageSchema,
+  generateArticleSchema,
+  generateProductSchema,
+  generateFAQPageSchema,
+  generateHowToSchema,
+  generateLocalBusinessSchema,
 } from 'react-seo-optimize';
 
 // Organization schema
@@ -330,12 +412,61 @@ const orgSchema = generateOrganizationSchema({
   ],
 });
 
-// WebPage schema
-const webPageSchema = generateWebPageSchema({
-  name: 'Page Title',
-  description: 'Page description',
-  url: 'https://example.com/page',
-  inLanguage: 'en',
+// Article schema
+const articleSchema = generateArticleSchema({
+  headline: 'Article Title',
+  description: 'Article description',
+  datePublished: '2024-01-01T00:00:00Z',
+  author: { '@type': 'Person', name: 'John Doe' },
+});
+
+// Product schema
+const productSchema = generateProductSchema({
+  name: 'Product Name',
+  description: 'Product description',
+  image: 'https://example.com/product.jpg',
+  offers: {
+    '@type': 'Offer',
+    price: '99.99',
+    priceCurrency: 'USD',
+  },
+});
+
+// FAQ schema
+const faqSchema = generateFAQPageSchema({
+  mainEntity: [
+    {
+      '@type': 'Question',
+      name: 'What is this?',
+      acceptedAnswer: {
+        '@type': 'Answer',
+        text: 'This is an answer.',
+      },
+    },
+  ],
+});
+
+// HowTo schema
+const howToSchema = generateHowToSchema({
+  name: 'How to Do Something',
+  step: [
+    {
+      '@type': 'HowToStep',
+      name: 'Step 1',
+      text: 'First, do this',
+    },
+  ],
+});
+
+// LocalBusiness schema
+const localBusinessSchema = generateLocalBusinessSchema({
+  name: 'My Business',
+  address: {
+    '@type': 'PostalAddress',
+    streetAddress: '123 Main St',
+    addressLocality: 'City',
+    addressCountry: 'US',
+  },
 });
 ```
 
@@ -345,26 +476,72 @@ const webPageSchema = generateWebPageSchema({
 |------|------|---------|-------------|
 | `title` | string | - | Page title |
 | `description` | string | - | Meta description |
-| `keywords` | string | - | Meta keywords |
-| `canonical` | string | - | Canonical URL |
+| `keywords` | string | - | Meta keywords (deprecated by search engines) |
+| `canonical` | string | - | Canonical URL (must be absolute) |
 | `ogTitle` | string | `title` | Open Graph title |
 | `ogDescription` | string | `description` | Open Graph description |
 | `ogUrl` | string | `canonical` | Open Graph URL |
 | `ogImage` | string | - | Open Graph image |
+| `ogImageSecureUrl` | string | - | Open Graph secure image URL |
 | `ogType` | string | `'website'` | Open Graph type |
 | `ogImageWidth` | string | - | Open Graph image width |
 | `ogImageHeight` | string | - | Open Graph image height |
 | `ogImageAlt` | string | - | Open Graph image alt |
 | `ogSiteName` | string | - | Open Graph site name |
 | `ogLocale` | string | - | Open Graph locale |
+| `articlePublishedTime` | string | - | Article published time (ISO 8601) |
+| `articleModifiedTime` | string | - | Article modified time (ISO 8601) |
+| `articleAuthor` | string | - | Article author |
+| `articleSection` | string | - | Article section |
+| `articleTag` | string[] | - | Article tags |
 | `twitterCard` | string | `'summary_large_image'` | Twitter card type |
 | `twitterTitle` | string | `title` | Twitter title |
 | `twitterDescription` | string | `description` | Twitter description |
 | `twitterImage` | string | `ogImage` | Twitter image |
-| `schema` | object | - | JSON-LD schema object |
-| `robots` | string | `'index, follow'` | Robots meta tag |
+| `twitterImageAlt` | string | - | Twitter image alt |
+| `twitterSite` | string | - | Twitter site (@username) |
+| `twitterCreator` | string | - | Twitter creator (@username) |
+| `schema` | object \| object[] | - | JSON-LD schema object(s) (deprecated, use `structuredData`) |
+| `structuredData` | object \| object[] | - | JSON-LD schema object(s) |
+| `robots` | string | - | Robots meta tag (no default in v2.0) |
 | `author` | string | - | Author meta tag |
-| `...extraMeta` | object | - | Additional meta tags |
+| `htmlLang` | string | - | HTML lang attribute |
+| `themeColor` | string | - | Theme color for mobile browsers |
+| `viewport` | string | - | Viewport meta tag |
+| `charset` | string | `'UTF-8'` | Charset meta tag |
+| `customMeta` | Record<string, string> | - | Additional meta tags |
+
+> **Note:** The `schema` prop is still supported for backward compatibility, but `structuredData` is preferred. Both support single objects or arrays for multiple schemas.
+
+## SSR Support
+
+For server-side rendering, use the `renderSEOTags` utility:
+
+```jsx
+import { renderSEOTags } from 'react-seo-optimize';
+
+// In your SSR function
+const seoTags = renderSEOTags({
+  title: 'Page Title',
+  description: 'Page description',
+  canonical: 'https://example.com/page',
+});
+
+// Inject into your HTML template
+const html = `
+<!DOCTYPE html>
+<html>
+<head>
+  ${seoTags}
+</head>
+<body>...</body>
+</html>
+`;
+```
+
+## Migration from v1.x
+
+If you're upgrading from v1.x, please see the [Migration Guide](./MIGRATION_GUIDE.md) for breaking changes and upgrade instructions.
 
 ## Examples
 
@@ -373,3 +550,24 @@ See `EXAMPLE_USAGE.jsx` in the package for more examples.
 ## License
 
 MIT
+
+## Changelog
+
+### v2.0.0
+
+**Breaking Changes:**
+- Removed `react-helmet` and `react-helmet-async` dependencies (now uses native DOM manipulation)
+- Removed default value for `robots` prop (must be explicit)
+- `canonical` URLs must now be absolute (relative URLs rejected)
+- Changed `extraMeta` to `customMeta` (object instead of spread props)
+
+**New Features:**
+- Added 5 new schema generators: Article, Product, FAQPage, HowTo, LocalBusiness
+- Support for multiple schemas via `structuredData` prop (array)
+- Added `ogImageSecureUrl` for HTTPS images
+- Added `twitterSite` and `twitterCreator` props
+- Added `htmlLang`, `themeColor`, `viewport`, `charset` props
+- Added article-specific meta tags (`articlePublishedTime`, `articleModifiedTime`, etc.)
+- CLI now supports `--dry-run` and `--backup` flags
+- Improved TypeScript types (removed `any`, added proper types)
+- Better validation for canonical URLs and image dimensions

package/bin/generate-schema.js

@@ -38,8 +38,87 @@ const getProjectRoot = () => {
   return fs.existsSync(indexHtmlPath) ? currentDir : process.cwd();
 };
 
-const configPath = process.argv[2] || path.join(getProjectRoot(), 'schema.config.json');
-const indexHtmlPath = process.argv[3] || path.join(getProjectRoot(), 'index.html');
+const parseArgs = () => {
+  const args = process.argv.slice(2);
+  const options = {
+    config: null,
+    html: null,
+    dryRun: false,
+    backup: false,
+  };
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (arg === '--dry-run' || arg === '-d') {
+      options.dryRun = true;
+    } else if (arg === '--backup' || arg === '-b') {
+      options.backup = true;
+    } else if (arg === '--config' || arg === '-c') {
+      options.config = args[++i];
+    } else if (arg === '--html' || arg === '-h') {
+      options.html = args[++i];
+    } else if (arg === '--help') {
+      console.log(`
+Usage: react-seo-generate-schema [options]
+
+Options:
+  --config, -c <path>    Path to schema.config.json (default: ./schema.config.json)
+  --html, -h <path>      Path to index.html (default: ./index.html)
+  --dry-run, -d          Preview changes without modifying files
+  --backup, -b           Create backup before modifying index.html
+  --help                 Show this help message
+
+Examples:
+  react-seo-generate-schema
+  react-seo-generate-schema --dry-run
+  react-seo-generate-schema --backup
+  react-seo-generate-schema --config ./config.json --html ./public/index.html
+`);
+      process.exit(0);
+    } else if (!arg.startsWith('-') && !options.config) {
+      options.config = arg;
+    } else if (!arg.startsWith('-') && options.config && !options.html) {
+      options.html = arg;
+    }
+  }
+
+  return options;
+};
+
+const validateConfig = (config) => {
+  const errors = [];
+  
+  if (!config.name) {
+    errors.push('"name" is required');
+  }
+  
+  if (config.url && !config.url.startsWith('http://') && !config.url.startsWith('https://')) {
+    errors.push('"url" must be an absolute URL');
+  }
+  
+  if (config.logo && !config.logo.startsWith('http://') && !config.logo.startsWith('https://')) {
+    errors.push('"logo" must be an absolute URL');
+  }
+  
+  if (config.sameAs && !Array.isArray(config.sameAs)) {
+    errors.push('"sameAs" must be an array');
+  }
+  
+  if (config.sameAs && Array.isArray(config.sameAs)) {
+    config.sameAs.forEach((url, index) => {
+      if (!url.startsWith('http://') && !url.startsWith('https://')) {
+        errors.push(`"sameAs[${index}]" must be an absolute URL`);
+      }
+    });
+  }
+  
+  return errors;
+};
+
+const options = parseArgs();
+const projectRoot = getProjectRoot();
+const configPath = options.config || path.join(projectRoot, 'schema.config.json');
+const indexHtmlPath = options.html || path.join(projectRoot, 'index.html');
 
 let config = {};
 
@@ -62,8 +141,10 @@ if (fs.existsSync(configPath)) {
   process.exit(1);
 }
 
-if (!config.name) {
-  console.error('❌ "name" is required in schema.config.json');
+const validationErrors = validateConfig(config);
+if (validationErrors.length > 0) {
+  console.error('❌ Config validation errors:');
+  validationErrors.forEach(error => console.error(`  - ${error}`));
   process.exit(1);
 }
 
@@ -76,6 +157,7 @@ try {
   }
 
   let htmlContent = fs.readFileSync(indexHtmlPath, 'utf-8');
+  const originalContent = htmlContent;
 
   const schemaJsonString = JSON.stringify(schema, null, 2);
   const indentedSchema = schemaJsonString
@@ -90,22 +172,50 @@ ${indentedSchema}
 
   const scriptRegex = /    <!-- Structured Data for Search Engines -->\s*<script type="application\/ld\+json">[\s\S]*?<\/script>/;
   
+  let action = 'unchanged';
   if (scriptRegex.test(htmlContent)) {
     htmlContent = htmlContent.replace(scriptRegex, schemaScript);
-    console.log('✅ Schema updated in index.html');
+    action = 'updated';
   } else {
     const headEndRegex = /(<\/head>)/;
     if (headEndRegex.test(htmlContent)) {
       htmlContent = htmlContent.replace(headEndRegex, `${schemaScript}\n  $1`);
-      console.log('✅ Schema added to index.html');
+      action = 'added';
     } else {
       console.error('❌ Could not find </head> tag in index.html');
       process.exit(1);
     }
   }
 
-  fs.writeFileSync(indexHtmlPath, htmlContent, 'utf-8');
-  console.log(`✅ Schema successfully written to ${indexHtmlPath}`);
+  if (options.dryRun) {
+    console.log('🔍 DRY RUN MODE - No files will be modified\n');
+    console.log('Schema that would be generated:');
+    console.log(JSON.stringify(schema, null, 2));
+    console.log('\nAction:', action === 'unchanged' ? 'No changes needed' : `Schema would be ${action}`);
+    if (action !== 'unchanged') {
+      console.log('\nDiff preview:');
+      const diffStart = htmlContent.indexOf('<!-- Structured Data');
+      const diffEnd = htmlContent.indexOf('</script>', diffStart) + 8;
+      if (diffStart !== -1) {
+        console.log(htmlContent.substring(diffStart, diffEnd));
+      }
+    }
+    process.exit(0);
+  }
+
+  if (options.backup && action !== 'unchanged') {
+    const backupPath = `${indexHtmlPath}.backup.${Date.now()}`;
+    fs.copyFileSync(indexHtmlPath, backupPath);
+    console.log(`📦 Backup created: ${backupPath}`);
+  }
+
+  if (action !== 'unchanged') {
+    fs.writeFileSync(indexHtmlPath, htmlContent, 'utf-8');
+    console.log(`✅ Schema ${action} in index.html`);
+    console.log(`✅ Schema successfully written to ${indexHtmlPath}`);
+  } else {
+    console.log('✅ Schema already exists and is up to date');
+  }
   
 } catch (error) {
   console.error(`❌ Error updating index.html: ${error.message}`);

package/package.json

@@ -1,16 +1,10 @@
 {
   "name": "react-seo-optimize",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Simple and intuitive SEO component for React with JSON-LD schema generation and HTML injection",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "type": "module",
-  "scripts": {
-    "generate:schema": "node bin/generate-schema.js",
-    "test": "vitest",
-    "test:ui": "vitest --ui",
-    "test:coverage": "vitest --coverage"
-  },
   "bin": {
     "react-seo-generate-schema": "./bin/generate-schema.js"
   },
@@ -21,8 +15,7 @@
     "json-ld",
     "meta-tags",
     "open-graph",
-    "twitter-cards",
-    "react-helmet"
+    "twitter-cards"
   ],
   "author": "Jeremy Inoa Fortuna",
   "email": "",
@@ -30,16 +23,14 @@
   "homepage": "https://github.com/liljemery/react-seo-optimize.git",
   "license": "MIT",
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-helmet": "^6.0.0"
+    "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@testing-library/react": "^14.1.2",
     "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
     "@vitest/ui": "^1.1.3",
     "jsdom": "^23.0.1",
     "react": "^18.2.0",
-    "react-helmet": "^6.1.0",
     "vitest": "^1.1.3"
   },
   "files": [
@@ -51,5 +42,12 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/liljemery/react-seo-optimize.git"
+  },
+  "scripts": {
+    "generate:schema": "node bin/generate-schema.js",
+    "test": "vitest",
+    "test:run": "vitest --run",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage"
   }
-}
+}