metafy-seo
Version:
Lightweight, SSR-safe React components and utilities for managing SEO metadata. Supports Next.js App Router, Vite, and any React environment.
143 lines (107 loc) • 3.3 kB
Markdown
> Lightweight, SSR-safe React SEO toolkit for managing meta tags, Open Graph, and Twitter Cards
[](https://www.npmjs.com/package/metafy-seo)
[](LICENSE)
- ✅ **SSR Safe** - Works with Next.js, Remix, and any SSR framework
- ✅ **Next.js App Router** - Native metadata API support
- ✅ **Zero Dependencies** - Only React as peer dependency
- ✅ **TypeScript** - Fully typed
- ✅ **XSS Protected** - Auto-escapes content
- ✅ **Presets** - Ready-to-use configs for blogs, products, social
```bash
npm install metafy-seo
```
```tsx
import { SeoTags } from 'metafy-seo'
function App() {
return (
<>
<SeoTags
title="My Page"
description="Page description"
canonical="/my-page"
openGraph={{ url: '/my-page', title: 'My Page' }}
twitter={{ card: 'summary_large_image' }}
/>
<main>...</main>
</>
)
}
```
```tsx
// app/page.tsx
import { generateNextMetadata, pagePreset } from 'metafy-seo'
export const metadata = generateNextMetadata(pagePreset({
title: 'My Site',
description: 'Welcome to my site',
url: 'https://example.com',
image: '/og-image.png'
}))
export default function Page() {
return <main>...</main>
}
```
```ts
import { generateSeoMarkup, blogPostPreset } from 'metafy-seo'
const headTags = generateSeoMarkup(blogPostPreset({
title: 'My Blog Post',
description: 'A great article',
slug: '/blog/my-post',
author: 'Nigel',
datePublished: '2025-01-01'
}))
// Returns: <title>My Blog Post</title><meta name="description"...
```
| Preset | Use Case |
|--------|----------|
| `pagePreset()` | Generic pages |
| `blogPostPreset()` | Blog articles |
| `productPreset()` | E-commerce products (includes JSON-LD) |
| `socialPreset()` | Social media optimized |
## Global Defaults
```tsx
import { SeoProvider, SeoTags } from 'metafy-seo'
function App() {
return (
<SeoProvider defaults={{
titleTemplate: '%s | My Site',
twitter: { site: '@myhandle' }
}}>
<SeoTags title="About" /> {/* → "About | My Site" */}
</SeoProvider>
)
}
```
Client-side component that injects meta tags into `<head>`.
| Prop | Type | Description |
|------|------|-------------|
| `title` | `string` | Page title |
| `description` | `string` | Meta description |
| `canonical` | `string` | Canonical URL |
| `noindex` | `boolean` | Prevent indexing |
| `openGraph` | `object` | OG tags (title, description, images, etc.) |
| `twitter` | `object` | Twitter card (card, site, image, etc.) |
| `icons` | `object` | Favicon, apple-touch-icon |
| `structuredData` | `object[]` | JSON-LD schema objects |
### `generateNextMetadata(config)`
Converts SeoConfig to Next.js Metadata format.
### `generateSeoMarkup(config)`
Returns HTML string for SSR injection.
## Utilities
```ts
import { isServer, isClient, escapeHtml } from 'metafy-seo'
if (isClient) {
// Browser-only code
}
```
ISC © [Nigel E. Basarokwe](https://github.com/nigelbasa)