Guide · Open source
How to use react-helmet: set page titles and meta tags in React
Updated · written with AI from the project's own documentation and checked against our catalogue data
React Helmet is a React component that manages the document head of your page. You write ordinary HTML head tags such as title, meta and link inside a Helmet component, and it updates the head to match. This guide shows you how to install it, add head tags to your pages, handle nested overrides and use it for server-side rendering.
React Helmetnfl/react-helmet · ★ 17.4k · MIT Install options & downloads Quick start
- 1Install the package. Run yarn add react-helmet or npm install --save react-helmet in your project.
- 2Import Helmet. Import {Helmet} from "react-helmet" in the component that controls the page head.
- 3Add head tags. Place title, meta, link or script tags inside a Helmet component.
- 4Set a title template. Use titleTemplate with %s and an optional defaultTitle for consistent page titles.
- 5Override in child components. Render Helmet in nested components to replace duplicate tags from parents.
- 6Render on the server. Call Helmet.renderStatic() after rendering to string and insert the head output into your HTML.
Install react-helmet with npm or Yarn
React Helmet is installed as a package in a Node.js project. The README lists Node.js and npm or Yarn as the tools you need. Run one of the install commands from the project root.
- Yarn: yarn add react-helmet
- npm: npm install --save react-helmet
npm install --save react-helmetAdd head tags with the Helmet component
Import Helmet from the package and place it inside your component's render output. Put plain head tags inside it. The README notes that Helmet takes plain HTML tags and outputs plain HTML tags, so there is no special syntax to learn for basic use.
The example below sets a title, a charset and a canonical link. Helmet updates the document head to match.
import React from "react";
import {Helmet} from "react-helmet";
class Application extends React.Component {
render () {
return (
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://mysite.com/example" />
</Helmet>
...
</div>
);
}
};Override tags in nested components
When several components use Helmet, nested or later components override duplicate changes. In the README example, a child's title and description replace the parent's, so the final head contains only the child's values.
Use this pattern for pages that share a layout but need their own title and description.
- A parent Helmet sets a default title and description.
- A child Helmet with the same tags replaces them in the output.
- Duplicate tags in the same Helmet component are kept, which is how multiple apple-touch-icon links work.
<Parent>
<Helmet>
<title>My Title</title>
<meta name="description" content="Helmet application" />
</Helmet>
<Child>
<Helmet>
<title>Nested Title</title>
<meta name="description" content="Nested component" />
</Helmet>
</Child>
</Parent>Use titleTemplate and defaultTitle for consistent titles
If every page title should end with your site name, set titleTemplate on Helmet and use %s where the page title goes. The README shows that a nested title of Nested Title with the template MySite.com - %s becomes the page title with the template applied.
defaultTitle is a fallback used when a template exists but a title is not defined.
- titleTemplate="MySite.com - %s" wraps each page title.
- defaultTitle="My Default Title" supplies a title when none is set.
<Helmet
titleTemplate="MySite.com - %s"
defaultTitle="My Default Title"
>
<title>Nested Title</title>
</Helmet>Render head tags on the server
For server-rendered apps, the head must be in the initial HTML. Call Helmet.renderStatic() after ReactDOMServer.renderToString or ReactDOMServer.renderToStaticMarkup to get the head data. The README warns that you must call renderStatic on the server, or you will get a memory leak, because the component keeps track of mounted instances.
The returned helmet object has properties such as title, meta, link, htmlAttributes and bodyAttributes. Each has toString() for string output and toComponent() for React output.
- Use toString() when building an HTML string.
- Use toComponent() when rendering React elements, and spread attributes with the JSX spread operator.
- If you bundle the server with webpack, the README suggests adding externals: ["react-helmet"] so the same instance is used.
ReactDOMServer.renderToString(<Handler />);
const helmet = Helmet.renderStatic();Check compatibility before you start
The README says Helmet 5 is fully backward-compatible with previous releases, and encourages a more semantic API. The README's major-change section refers to the 6.1.0 release, so check that page for details. The README does not clearly state current React support, and the last push was in July 2023. Check your React version against the package before relying on the server-side API.
What people use it for
- Setting a unique title and meta description for each page in a React single-page app.
- Adding a canonical link to each article page in a server-rendered React site.
- Loading a third-party script or inline JSON-LD structured data into the head.
- Adding apple-touch-icon links for several icon sizes in one component.
- Setting the lang attribute on the html element from a component.
Frequently asked questions
Is react-helmet free to use?
react-helmet is released under the MIT licence, as stated in the README. The source does not list any price or paid tier.
How do I install react-helmet?
Run yarn add react-helmet with Yarn, or npm install --save react-helmet with npm. You need Node.js and npm or Yarn installed.
Does react-helmet work with server-side rendering?
Yes. Call Helmet.renderStatic() after ReactDOMServer.renderToString or renderToStaticMarkup and use the returned head data in your HTML. The README warns that skipping renderStatic on the server causes a memory leak.
Can react-helmet set the page title and meta description?
Yes. Put a title tag and a meta tag with name="description" inside a Helmet component. Nested components override duplicate tags.
What is react-helmet-async and how does it compare?
react-helmet-async is listed as a comparable project in our analysis, alongside next/head and vue-meta. Our source does not compare their features or performance, so check each project's documentation before choosing.
Is react-helmet still maintained for newer React versions?
The README does not clearly state current React support, and the last push was in July 2023. If you use a recent React version, test the server-side API before relying on it.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
React Helmet suits React developers and beginners who need per-page titles, meta tags and head scripts with plain HTML syntax. If your project is not React, or you need clearly documented support for the latest React versions, consider react-helmet-async, next/head or vue-meta instead.
Install options & downloads