@masters-ws/react-seo

Professional high-performance SEO package for React and Next.js. 1:1 Feature Parity with the powerful Laravel SEO package. Designed for high-traffic news sites, e-marketplaces, and professional blog platforms where speed and indexing are critical.

Key Features

• ✅ Hybrid Implementation - Works with react-helmet-async for Client/Pages Router and native Metadata API for Next.js App Router.
• ✅ Full Metadata Support - Title, Description, Keywords, Robots, Canonical.
• ✅ Intelligent Pagination - Automatic rel="prev" and rel="next" handling with clean URL logic.
• ✅ Advanced Social Meta - OpenGraph (Facebook/LinkedIn), Twitter Cards, and WhatsApp/Telegram optimization.
• ✅ JSON-LD Schema.org (25+ Types) - Dedicated components for NewsArticle, Product, FAQPage, BreadcrumbList, Organization, WebSite, Event, HowTo, Recipe, etc.
• ✅ Performance & Security - Support for DNS Prefetch, Preconnect, Preload, and CSP.
• ✅ Multilingual Support - Easy hreflang management.
• ✅ Mobile Optimized - Theme color, Apple mobile web app capability, and manifest support.
• ✅ Analytics Integration - Built-in hooks for GA4, GTM, and Facebook Pixel.

Installation

npm install @masters-ws/react-seo react-helmet-async

Next.js App Router (SSR - Recommended for News/Malls)

For the best performance and 100% server-side rendering, use the toNextMetadata adapter in your layout.tsx or page.tsx.

// page.tsx (Server Component)
import { toNextMetadata } from '@shammaa/react-seo';

const config = { name: "My News", url: "https://site.com" };

export async function generateMetadata({ params }) {
  const post = await getPost(params.id);
  
  return toNextMetadata({
    title: post.title,
    description: post.excerpt,
    type: 'article',
    canonical: `https://site.com/news/${post.slug}`,
    ogImage: post.image,
    publishedTime: post.date,
    readingTime: 5 // Optional: shows in Twitter preview
  }, config);
}

export default function Page() {
  return <article>...</article>;
}

React / Next.js Pages Router (Client/SSR)

1. Provider Setup

Wrap your application in App.tsx or _app.tsx:

import { SEOProvider } from '@shammaa/react-seo';

const siteConfig = {
  name: "My Site",
  url: "https://mysite.com",
  googleAnalyticsId: "G-XXXXXXXXXX",
  themeColor: "#007bff"
};

function App({ children }) {
  return (
    <SEOProvider config={siteConfig}>
      {children}
    </SEOProvider>
  );
}

2. Specialized Components

News Article

import { SeoArticle } from '@shammaa/react-seo';

<SeoArticle 
  article={{
    title: "Article Title",
    description: "Short excerpt...",
    image: "/cover.jpg",
    publishedAt: "2024-02-01T10:00:00Z",
    author: { name: "John Doe" },
    category: "Tech"
  }}
/>

FAQ Page

import { SeoFAQ } from '@shammaa/react-seo';

<SeoFAQ 
  questions={[
    { q: "Is it free?", a: "Yes, it is!" },
    { q: "How to install?", a: "Use npm install." }
  ]}
/>

Detailed Configuration Reference

SiteConfig Props

SEOData Props (Common)

Advanced Schemas List

Use these components for specific SEO needs:

• <SeoVideo /> - For video content.
• <SeoEvent /> - For conferences/events.
• <SeoLocalBusiness /> - For physical stores.
• <SeoHowTo /> - For tutorials.
• <SeoReview /> - For product ratings.
• <SeoJobPosting /> - For hiring.
• <SeoRecipe /> - For cooking sites.

License

MIT