{product.name}

# React Helmet — Document Head Manager for React

> A reusable React component that manages changes to the document head, making it easy to set page titles, meta tags, and other head elements per route.

## Install

Save in your project root:

# React Helmet — Document Head Manager for React

## Quick Use
```bash
npm install react-helmet
```
```jsx
import { Helmet } from 'react-helmet';
function ProductPage({ product }) {
  return (
    <>
      <Helmet>
        <title>{product.name} | My Store</title>
        <meta name="description" content={product.summary} />
      </Helmet>
      <h1>{product.name}</h1>
    </>
  );
}
```

## Introduction
React Helmet is a component that manages the document `<head>` in React applications. It allows each page or component to declare its own title, meta tags, link elements, and scripts. When multiple Helmet instances are mounted, the last one wins, making it natural to set defaults at the layout level and override per page.

## What React Helmet Does
- Sets document title, meta tags, and Open Graph data per route
- Manages link, script, style, and base elements in the head
- Supports server-side rendering for SEO-critical head output
- Deduplicates head elements automatically
- Provides an async variant (react-helmet-async) for concurrent rendering

## Architecture Overview
React Helmet collects head element declarations from mounted components and applies them to the real DOM head via side effects. It uses a last-wins strategy: nested or later-mounted Helmet instances override earlier ones. On the server, `Helmet.renderStatic()` captures the final head state as strings for SSR injection. The async fork (`react-helmet-async`) replaces the global side-effect model with a context-based approach for thread safety.

## Self-Hosting & Configuration
- Install `react-helmet` or `react-helmet-async` for concurrent mode
- Place a default `<Helmet>` in your root layout with fallback title and meta
- Override specific tags in child route components
- For SSR, call `Helmet.renderStatic()` after `renderToString()` to extract head HTML
- Use `titleTemplate="%s | My App"` for consistent title suffixes

## Key Features
- Declarative head management using plain JSX
- Server-side rendering support for search engine indexing
- Automatic deduplication of meta tags by name or property
- Nested overrides follow component hierarchy naturally
- Drop-in async variant for React 18 concurrent features

## Comparison with Similar Tools
- **react-helmet-async** — fork of Helmet with context-based API, recommended for React 18+
- **Next.js Head** — built into Next.js, no extra dependency needed in Next apps
- **Remix meta** — route-based meta exports, integrated with Remix loader data
- **Unhead** — framework-agnostic, works with Vue, React, and Solid
- **React 19 Metadata** — upcoming built-in metadata API in React itself

## FAQ
**Q: Should I use react-helmet or react-helmet-async?**
A: Use `react-helmet-async` for new projects. It avoids global state issues and supports concurrent rendering.

**Q: Does it work with React Router?**
A: Yes, place Helmet in each route component to set per-page titles and meta tags.

**Q: How do I set Open Graph tags for social sharing?**
A: Add `<meta property="og:title" content="..." />` inside your Helmet component.

**Q: Can I add inline scripts via Helmet?**
A: Yes, but be cautious with user-provided content to avoid XSS. Prefer external script sources.

## Sources
- https://github.com/nfl/react-helmet
- https://github.com/staylor/react-helmet-async

---
Source: https://tokrepo.com/en/workflows/asset-3fa4fb4e
Author: AI Open Source