Work

Developer-facing frontend tooling / 2026 / Independent builder

Metafy-SEO

Lean React SEO Toolkit

Overview

SSR-safe React SEO library for managing metadata across Next.js, Vite, and other React setups. Built for teams that want framework-agnostic SEO primitives without heavy dependencies.

Role

Independent builder

Focus

Developer-facing frontend tooling

Stack

TypeScript / React / npm / Rollup

Selected signals

Stack

4 technologies

TypeScript, React, npm

Delivery

2 public endpoints

Distributed as both a package and a public codebase.

Runtime

SSR-safe React library

Moves across Next.js, Vite, and React environments with less rewrite work.

Ops shape

Low dependency surface

Prioritizes portability and simple adoption.

Case study

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

What this work shows

  • Turns metadata handling into reusable primitives instead of app-specific glue code.
  • Keeps SEO concerns SSR-safe across multiple React runtimes.
  • Reduces migration friction when products move between frameworks.

Links

GitHubnpm

Stack

TypeScript / React / npm / Rollup

Back to projects