Back to Work
🔍

Metafy-SEO

Lightweight React SEO Toolkit

Year

2026

Role

Solo Developer

GitHubnpm

Lightweight, SSR-safe React components and utilities for managing SEO metadata. Supports Next.js App Router, Vite, and any React environment. Zero dependencies beyond React.

Metafy-SEO

Lightweight, SSR-safe React SEO toolkit for managing meta tags, Open Graph, and Twitter Cards

The Problem

SEO in React apps is surprisingly painful. Existing solutions like react-helmet are heavy, don't play nicely with SSR, or force you into framework-specific patterns. Next.js has its own Metadata API, but switching between frameworks means rewriting all your SEO logic. And none of the options make it easy to just drop in sensible defaults for common page types.

The Solution

Metafy-SEO is a zero-dependency React library that handles SEO metadata across any environment — client-side SPAs, server-rendered apps, and static sites. It provides a single unified API whether you're using Vite, Next.js App Router, Remix, or plain React.

How It Works

  1. <SeoTags /> — A React component that injects meta tags into <head> on the client side. Handles title, description, canonical URLs, Open Graph, Twitter Cards, favicons, and JSON-LD structured data.
  2. generateNextMetadata() — Converts the same config object into Next.js's native Metadata format, so you can share SEO logic between Next.js and non-Next.js projects.
  3. generateSeoMarkup() — Returns a raw HTML string for SSR injection, useful for custom server setups or static site generators.
  4. Presets — Pre-built configurations for common page types (blog posts, product pages, social-optimised pages) so you don't have to manually set every tag.

Key Features

  • SSR Safe — No document access on the server; works everywhere without hydration issues
  • Framework Agnostic — Same config works across Next.js, Vite, Remix, CRA, and custom setups
  • Next.js App Router Native — First-class support for the v14+ metadata API via metafy-seo/next
  • Zero Dependencies — Only React as a peer dependency, keeping bundle size minimal
  • TypeScript First — Fully typed with exported types for all config objects
  • XSS Protected — All content is auto-escaped before injection into the DOM
  • Presets System — pagePreset(), blogPostPreset(), productPreset(), and socialPreset() for common patterns
  • Global Defaults — <SeoProvider> context for site-wide defaults and title templates (e.g., %s | My Site)

Technical Stack

  • TypeScript — Source language with full type exports
  • React — Peer dependency (>=16.8)
  • Rollup — Dual CJS/ESM build output
  • Semantic Release — Automated versioning and npm publishing via GitHub Actions

Usage

// React / Vite — drop-in component
import { SeoTags } from 'metafy-seo'

<SeoTags
  title="My Page"
  description="Page description"
  canonical="/my-page"
  openGraph={{ url: '/my-page', title: 'My Page' }}
  twitter={{ card: 'summary_large_image' }}
/>

// Next.js App Router — native metadata
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'
}))

// Global defaults with SeoProvider
import { SeoProvider, SeoTags } from 'metafy-seo'

<SeoProvider defaults={{
  titleTemplate: '%s | My Site',
  twitter: { site: '@myhandle' }
}}>
  <SeoTags title="About" /> {/* → "About | My Site" */}
</SeoProvider>

Why I Built This

I kept rewriting the same SEO boilerplate across projects — setting up Open Graph tags, Twitter Cards, canonical URLs, structured data. The existing libraries were either too heavy, SSR-unfriendly, or locked to a specific framework. Metafy-SEO is the library I wanted: small, typed, works everywhere, and handles the common cases out of the box with presets.

Links

Built With

TypeScriptReactnpmRollup

Want to see more?

View All Projects