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 StartedAPI Reference
$npm install react-ssr-seoclick to copy
0
Dependencies
100%
TypeScript
SSR
Safe
6+
Frameworks

Everything You Need for SEO

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

OG

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.

LD

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.

TS

Fully Typed

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

FW

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.

  1. Install the package

    npm install react-ssr-seo

  2. Create your site config

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

    config/seo.tsTypeScript
    import { createSEOConfig } from "react-ssr-seo";

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";

  3. Use it in your pages

    Merge page-specific config with your base config, then render the SEOHead component.

    pages/BlogPost.tsxTSX
    import { mergeSEOConfig, SEOHead, JsonLd,
  createArticleSchema } from "react-ssr-seo";
import { siteConfig, SITE_URL } from "../config/seo";

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

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

  return (
    <html>
      <head>
        <SEOHead {...seo} />
        <JsonLd data={schema} />
      </head>
      <body>
        <h1>My First Post</h1>
      </body>
    </html>
  );
}

Works With Your Framework

Designed to integrate seamlessly into any React SSR setup.

Next.js
React Router 7
Remix
Express SSR
Astro
Solid

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.