Open Source · MIT License

Complete SEO for
React SSR Applications

Meta tags, Open Graph, Twitter Cards, JSON-LD structured data, canonical URLs, hreflang, and robots directives — all in one zero-dependency, fully-typed, SSR-safe package.

Get Started API Reference

$npm install react-ssr-seo-toolkitclick to copy

Dependencies

100%

TypeScript

SSR

Safe

Frameworks

Everything You Need for SEO

One library to handle all your SEO requirements in server-rendered React applications.

Open Graph & Twitter Cards

Generate rich social sharing previews with full Open Graph and Twitter Card meta tag support. Control titles, descriptions, images, and card types.

JSON-LD Structured Data

Built-in schema generators for Organization, Website, Article, Product, FAQ, and Breadcrumb. Compose multiple schemas with @graph support.

React Components

Drop-in <SEOHead> and <JsonLd> components that render all SEO tags as React elements. No dangerouslySetInnerHTML needed for meta tags.

URL

Canonical & Hreflang

Build canonical URLs, manage hreflang alternate links for multi-language sites, and control search engine crawling with fine-grained robots directives.

Fully Typed

Complete TypeScript definitions for all functions, components, and configuration objects. Autocomplete-friendly with detailed JSDoc comments.

Framework Agnostic

Works with Next.js (App & Pages Router), React Router 7, Express, Remix, Astro, Solid, and any SSR setup. No framework lock-in.

Quick Start

Get up and running in under 2 minutes.

Install the package
```
npm install react-ssr-seo-toolkit
```

Create your site config

Define shared defaults once — title template, site name, Twitter handle, etc.

config/seo.tsTypeScript

import { createSEOConfig } from "react-ssr-seo-toolkit";

export const siteConfig = createSEOConfig({
  titleTemplate: "%s | My Site",
  description: "My awesome website.",
  openGraph: {
    siteName: "My Site",
    type: "website",
    locale: "en_US",
  },
  twitter: {
    card: "summary_large_image",
    site: "@mysite",
  },
});

export const SITE_URL = "https://mysite.com";

Use it in your pages

Each page merges its SEO config with the site defaults, then renders inside the Document. The page never writes <html> or <head> — the Document handles that.

pages/BlogPost.tsxTSX

import {
  mergeSEOConfig,
  buildCanonicalUrl,
  createArticleSchema,
} from "react-ssr-seo-toolkit";
import { siteConfig, SITE_URL } from "../config/seo";
import { Document } from "../components/Document";

export function BlogPost() {
  const seo = mergeSEOConfig(siteConfig, {
    title: "My First Post",
    description: "An introduction to react-ssr-seo-toolkit.",
    canonical: buildCanonicalUrl(SITE_URL, "/blog/my-first-post"),
  });

  const schema = createArticleSchema({
    headline: "My First Post",
    url: buildCanonicalUrl(SITE_URL, "/blog/my-first-post"),
    datePublished: "2025-06-15",
    author: [{ name: "Your Name" }],
  });

  // Document renders <html>, <head>, <SEOHead>, <JsonLd>, <body>
  // This page just provides config and content
  return (
    <Document seo={seo} schemas={[schema]}>
      <h1>My First Post</h1>
      <p>Post content goes here...</p>
    </Document>
  );
}

Works With Your Framework

Designed to integrate seamlessly into any React SSR setup.

Next.js

React Router 7

Remix

Express SSR

Astro

Solid

Comprehensive Documentation

Detailed guides for every framework and use case.

React Guide

Complete React + Express SSR setup with project structure, Document pattern, and multi-page examples.

Next.js Guide

App Router and Pages Router integration with generateMetadata, dynamic routes, and JSON-LD.

Multi-Page Usage

Real-world patterns for home, listing, detail, blog, FAQ, and dashboard pages.

Recipes

Copy-paste ready code for blogs, products, FAQs, multi-language, custom tags, and more.

Common Mistakes

Avoid the 10 most common errors: wrong file placement, duplicate tags, missing canonicals, and more.

FAQ

Answers about framework support, SSR requirements, component usage, and troubleshooting.

Explore Live Demos

Each page below is a fully working example. View the page source to inspect the generated SEO tags.

ART

Article Page

Article schema with multiple authors, breadcrumbs, OG article type, and Twitter creator card.

PRD

Product Page

Product schema with pricing, brand, availability, AggregateRating, and breadcrumbs.

FAQ

FAQ Page

FAQPage schema with question/answer pairs that appear as rich results in Google Search.

ROB

No-Index Page

Robots noindex directive for internal pages that should not appear in search results.

TIP

Right-click on any page and select "View Page Source" to see all the SEO meta tags, Open Graph tags, Twitter Card tags, hreflang links, canonical URLs, robots directives, and JSON-LD structured data that this library generates. Every page in this demo is a real working example.