Package Exports

react-client-seo
react-client-seo/dist/index.cjs
react-client-seo/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-client-seo) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-client-seo

A lightweight, production-ready client-side SEO renderer for React and Vite applications. No server-side rendering required!

Features

✅ Lightweight - No heavy dependencies
✅ Client-side only - Works with React and Vite apps
✅ TypeScript support - Full type definitions included
✅ React 17+ & 18+ - Compatible with both versions
✅ Component & Hook APIs - Use <Seo /> component or useSeo() hook
✅ Auto-updates - Automatically creates/updates tags, avoids duplicates
✅ Comprehensive - Supports title, meta tags, Open Graph, Twitter Cards, JSON-LD, and custom meta tags
✅ Script Injection - Built-in support for Google Analytics, Tag Manager, and custom scripts

Installation

npm install react-client-seo

yarn add react-client-seo

pnpm add react-client-seo

Peer Dependencies

react >= 17.0.0
react-dom >= 17.0.0

Usage

Component API

import { Seo } from "react-client-seo";

function App() {
  return (
    <>
      <Seo
        title="My Page Title"
        description="This is a great page about React SEO"
        keywords={["react", "seo", "meta tags"]}
        author="John Doe"
        robots="index, follow"
        canonical="https://example.com/page"
      />
      <div>Your content here</div>
    </>
  );
}

Hook API

import { useSeo } from "react-client-seo";
import { useEffect } from "react";

function MyComponent() {
  const { updateSeo } = useSeo();

  useEffect(() => {
    updateSeo({
      title: "My Page Title",
      description: "Page description",
      keywords: "react, seo",
    });
  }, []);

  return <div>Content</div>;
}

Examples

Basic Usage

<Seo
  title="Home Page"
  description="Welcome to our website"
  keywords="home, welcome, website"
  author="John Doe"
  robots="index, follow"
  language="en"
  viewport="width=device-width, initial-scale=1"
/>

Geo Tags

<Seo
  title="Location Page"
  description="Our location"
  geoRegion="US-NY"
  geoPlacename="New York"
  geoPosition="40.7128;-74.0060"
  icbm="40.7128, -74.0060"
/>

Google Analytics

<Seo
  title="My Page"
  description="Page description"
  googleAnalyticsId="G-XXXXXXXXXX"
/>

Note: You only need to provide the ID - the package automatically injects both the async gtag.js script and the configuration script. Works with:

Google Analytics 4 (GA4): G-XXXXXXXXXX
Google Ads Conversion Tracking: AW-XXXXXXXXXX

Example with Google Ads conversion tracking:

<Seo
  title="My Page"
  description="Page description"
  googleAnalyticsId="AW-XXXXXXXXXX"
/>

The package will automatically inject:

<script async src="https://www.googletagmanager.com/gtag/js?id=AW-XXXXXXXXXX"></script>
The inline configuration script with dataLayer initialization

Google Tag Manager

<Seo
  title="My Page"
  description="Page description"
  googleTagManagerId="GTM-XXXXXXX"
/>

Custom Scripts

// External script
<Seo
  title="My Page"
  customScripts={[
    {
      src: "https://example.com/script.js",
      id: "my-script",
      async: true,
    },
  ]}
/>

// Inline script
<Seo
  title="My Page"
  customScripts={[
    {
      content: "console.log('Hello from inline script');",
      id: "inline-script",
    },
  ]}
/>

// Multiple scripts with different strategies
<Seo
  title="My Page"
  customScripts={[
    {
      src: "https://example.com/async-script.js",
      id: "async-script",
      strategy: "async",
    },
    {
      src: "https://example.com/defer-script.js",
      id: "defer-script",
      strategy: "defer",
    },
  ]}
/>

Open Graph Tags

<Seo
  title="Article Title"
  description="Article description"
  ogImage="https://example.com/image.jpg"
  ogType="article"
  ogUrl="https://example.com/article"
  ogSiteName="My Website"
  ogLocale="en_US"
/>

Twitter Cards

<Seo
  title="Article Title"
  description="Article description"
  twitterCard="summary_large_image"
  twitterSite="@username"
  twitterCreator="@author"
  twitterImage="https://example.com/image.jpg"
  twitterImageAlt="Article image"
/>

JSON-LD Structured Data

<Seo
  title="Product Page"
  description="Amazing product"
  jsonLd={{
    "@context": "https://schema.org",
    "@type": "Product",
    name: "Amazing Product",
    description: "This is an amazing product",
    image: "https://example.com/product.jpg",
    offers: {
      "@type": "Offer",
      price: "99.99",
      priceCurrency: "USD",
    },
  }}
/>

Advanced Open Graph with Custom Properties

<Seo
  title="Article"
  openGraph={{
    title: "Custom OG Title",
    description: "Custom OG description",
    type: "article",
    url: "https://example.com/article",
    image: "https://example.com/image.jpg",
    "og:article:author": "John Doe",
    "og:article:published_time": "2024-01-01T00:00:00Z",
  }}
/>

Custom Meta Tags

<Seo
  title="Page Title"
  customMeta={[
    { name: "author", content: "John Doe" },
    { name: "robots", content: "index, follow" },
    { property: "custom:property", content: "value" },
    { httpEquiv: "X-UA-Compatible", content: "IE=edge" },
  ]}
/>

Complete Example

import { Seo } from "react-client-seo";

function ProductPage({ product }) {
  return (
    <>
      <Seo
        title={`${product.name} - My Store`}
        description={product.description}
        keywords={product.tags}
        canonical={`https://mystore.com/products/${product.id}`}
        ogImage={product.image}
        ogType="product"
        ogUrl={`https://mystore.com/products/${product.id}`}
        ogSiteName="My Store"
        twitterCard="summary_large_image"
        twitterSite="@mystore"
        twitterImage={product.image}
        jsonLd={{
          "@context": "https://schema.org",
          "@type": "Product",
          name: product.name,
          description: product.description,
          image: product.image,
          offers: {
            "@type": "Offer",
            price: product.price,
            priceCurrency: "USD",
            availability: "https://schema.org/InStock",
          },
        }}
        customMeta={[{ name: "robots", content: "index, follow" }]}
      />
      <div>
        <h1>{product.name}</h1>
        <p>{product.description}</p>
      </div>
    </>
  );
}

API Reference

`<Seo />` Component Props

Prop	Type	Description
`title`	`string`	Page title
`description`	`string`	Meta description
`keywords`	`string \| string[]`	Meta keywords (comma-separated string or array)
`author`	`string`	Meta author
`robots`	`string`	Meta robots (e.g., "index, follow", "noindex, nofollow")
`language`	`string`	Meta language/Content-Language
`viewport`	`string`	Meta viewport (e.g., "width=device-width, initial-scale=1")
`generator`	`string`	Meta generator
`revisitAfter`	`string`	Meta revisit-after (e.g., "7 days")
`rating`	`string`	Meta rating
`distribution`	`string`	Meta distribution
`copyright`	`string`	Meta copyright
`themeColor`	`string`	Meta theme-color
`referrer`	`string`	Meta referrer
`formatDetection`	`string`	Meta format-detection (mobile)
`mobileWebAppCapable`	`string`	Meta mobile-web-app-capable
`appleMobileWebAppCapable`	`string`	Meta apple-mobile-web-app-capable
`geoRegion`	`string`	Geo region (e.g., "US-NY")
`geoPlacename`	`string`	Geo placename
`geoPosition`	`string`	Geo position (e.g., "latitude;longitude")
`icbm`	`string`	ICBM coordinates (e.g., "latitude, longitude")
`canonical`	`string`	Canonical URL
`ogImage`	`string`	Open Graph image URL
`ogType`	`string`	Open Graph type (e.g., "article", "website")
`ogUrl`	`string`	Open Graph URL
`ogTitle`	`string`	Open Graph title (defaults to `title`)
`ogDescription`	`string`	Open Graph description (defaults to `description`)
`ogSiteName`	`string`	Open Graph site name
`ogLocale`	`string`	Open Graph locale
`twitterCard`	`'summary' \| 'summary_large_image' \| 'app' \| 'player'`	Twitter Card type
`twitterSite`	`string`	Twitter site handle
`twitterCreator`	`string`	Twitter creator handle
`twitterTitle`	`string`	Twitter title (defaults to `title`)
`twitterDescription`	`string`	Twitter description (defaults to `description`)
`twitterImage`	`string`	Twitter image URL
`twitterImageAlt`	`string`	Twitter image alt text
`jsonLd`	`object \| object[]`	JSON-LD structured data
`customMeta`	`CustomMeta[]`	Custom meta tags
`openGraph`	`OpenGraphMeta`	Additional Open Graph properties
`twitter`	`TwitterCardMeta`	Additional Twitter Card properties
`googleAnalyticsId`	`string`	Google Analytics ID (gtag.js)
`googleTagManagerId`	`string`	Google Tag Manager ID
`customScripts`	`CustomScript[]`	Custom scripts to inject (external or inline)

`useSeo()` Hook

Returns an object with:

updateSeo(props: SeoProps) - Update SEO tags
clearSeo() - Clear managed SEO tags (canonical, JSON-LD)

TypeScript

Full TypeScript support is included. Import types as needed:

import type {
  SeoProps,
  OpenGraphMeta,
  TwitterCardMeta,
  CustomMeta,
  CustomScript,
  JsonLd,
} from "react-client-seo";

How It Works

The component/hook automatically creates meta tags if they don't exist
Updates existing tags if they're already present
Avoids duplicate tags
Cleans up JSON-LD scripts on unmount (component API)
Works entirely client-side - no SSR required

Author

Rainard Joseph, I'm working as a Software Project Manager at Odidor, working on the ERP and IMS software products. I love coding. Connect with on LinkedIn.

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

react-client-seo

Package Exports

Readme

react-client-seo

Features

Installation

Peer Dependencies

Usage

Component API

Hook API

Examples

Basic Usage

Geo Tags

Google Analytics

Google Tag Manager

Custom Scripts

Open Graph Tags

Twitter Cards

JSON-LD Structured Data

Advanced Open Graph with Custom Properties

Custom Meta Tags

Complete Example

API Reference

<Seo /> Component Props

useSeo() Hook

TypeScript

How It Works

Author

License

Contributing

`<Seo />` Component Props

`useSeo()` Hook