Professional high-performance SEO package for React/Next.js. Zero-dependency core for Next.js App Router, optional Helmet components for React.
npm install @masters-ws/react-seorel="prev" and rel="next" handling
hreflang management
bash
npm install @masters-ws/react-seo
`
$3
`bash
npm install @masters-ws/react-seo react-helmet-async
`
---
Usage: Next.js App Router (Recommended)
Use the core functions directly in your Server Components. No Helmet needed!
`tsx
// app/news/[slug]/page.tsx
import { toNextMetadata, generateArticleSchema } from '@masters-ws/react-seo';
const siteConfig = {
name: "My News Site",
url: "https://mysite.com"
};
// This runs on the server - instant SEO!
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
return toNextMetadata({
title: post.title,
description: post.excerpt,
image: post.cover,
type: 'article',
publishedTime: post.date
}, siteConfig);
}
export default function ArticlePage({ params }) {
const post = await getPost(params.slug);
// Add JSON-LD Schema using core function
const articleSchema = generateArticleSchema({
title: post.title,
description: post.excerpt,
publishedTime: post.date,
author: { name: post.author }
}, siteConfig);
return (
<>
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(articleSchema) }}
/>
...
);
}
`
---
Usage: React / Pages Router (With Components)
If you prefer the component approach or are using React without Next.js:
`tsx
// _app.tsx
import { SEOProvider } from '@masters-ws/react-seo';
const config = { name: "My Site", url: "https://mysite.com" };
export default function App({ Component, pageProps }) {
return (
);
}
`
`tsx
// pages/article.tsx
import { SeoArticle } from '@masters-ws/react-seo';
export default function ArticlePage({ post }) {
return (
<>
description: post.excerpt,
image: post.cover,
publishedAt: post.date
}} />
...
);
}
`
---
Core Functions Reference
All functions are pure (no side effects) and work in any environment:
| Function | Description |
| :--- | :--- |
| toNextMetadata(data, config) | Converts SEO data to Next.js Metadata object |
| generateArticleSchema(data, config) | Creates NewsArticle JSON-LD |
| generateProductSchema(data) | Creates Product JSON-LD with offers |
| generateFAQSchema(questions) | Creates FAQPage JSON-LD |
| generateBreadcrumbSchema(items) | Creates BreadcrumbList JSON-LD |
| generateVideoSchema(data) | Creates VideoObject JSON-LD |
| generateEventSchema(data) | Creates Event JSON-LD |
| generateLocalBusinessSchema(data) | Creates LocalBusiness JSON-LD |
| generateSoftwareSchema(data) | Creates SoftwareApplication JSON-LD |
| generateBookSchema(data) | Creates Book JSON-LD |
| generateMovieSchema(data) | Creates Movie JSON-LD |
| generatePodcastSchema(data) | Creates PodcastSeries JSON-LD |
| generatePodcastEpisodeSchema(data) | Creates PodcastEpisode JSON-LD |
| generatePaginationLinks(url, page, total) | Returns prev/next/canonical URLs |
| generateOrganizationSchema(config) | Creates Organization JSON-LD |
| generateWebSiteSchema(config) | Creates WebSite JSON-LD with SearchAction |
---
$3
For optimal social sharing, specify image dimensions:
`tsx
toNextMetadata({
title: "My Article",
image: "/cover.jpg",
ogImageWidth: 1200, // Default: 1200
ogImageHeight: 630, // Default: 630
ogImageAlt: "Article cover image"
}, config);
`
---
Components Reference (Requires react-helmet-async)
| Component | Description |
| :--- | :--- |
| | Main component for meta tags and schemas |
| | For news articles and blog posts |
| | For e-commerce products |
| | For FAQ pages |
| | For video content |
| | For events and conferences |
| | For physical business locations |
| | For category pages with pagination |
| | For tag pages with pagination |
| | For author profile pages |
| | For breadcrumb navigation with schema |
---
Configuration Options
$3
`typescript
{
name: string; // Site name
url: string; // Base URL
logo?: string; // Logo URL
language?: string; // Default: 'ar'
twitterHandle?: string; // @username
themeColor?: string; // Mobile theme color
}
`
$3
`typescript
{
title?: string;
description?: string;
image?: string;
canonical?: string;
noindex?: boolean; // Sets robots to noindex
type?: 'website' | 'article' | 'product';
alternates?: Array<{ hreflang: string; href: string }>;
// ... and more
}
``