react-helmet
Advanced tools
The react-helmet npm package is a reusable React component that manages all changes to the document head. It allows developers to dynamically set what's in the head section of the HTML document, including the title, meta tags, and other head elements, which is particularly useful for handling SEO in React applications.
Managing the document title
This feature allows you to set the content of the <title> tag in the document head, which is displayed as the title of the tab in web browsers.
{"<Helmet>\n <title>My Title</title>\n</Helmet>"}Setting meta tags
With this feature, you can dynamically set various meta tags for your page, which can be used by search engines and social media platforms for SEO and content sharing purposes.
{"<Helmet>\n <meta name='description' content='Page description' />\n <meta name='keywords' content='React, SEO' />\n</Helmet>"}Adding link tags
This feature allows you to include link elements in the head of the document, such as canonical links, stylesheets, or preconnect URLs.
{"<Helmet>\n <link rel='canonical' href='http://mysite.com/example' />\n</Helmet>"}Adding script tags
This feature enables you to insert script tags into the head of the document, which can be used to include external JavaScript files or inline scripts.
{"<Helmet>\n <script src='http://include.com/pathtojs.js' type='text/javascript' />\n</Helmet>"}Setting HTML attributes
This feature allows you to set attributes on the <html> tag, such as the language of the document.
{"<Helmet>\n <html lang='en' />\n</Helmet>"}Setting body attributes
With this feature, you can set attributes on the <body> tag, such as class names or data attributes.
{"<Helmet>\n <body class='dark-mode' />\n</Helmet>"}This package is a fork of react-helmet that is designed to work with React's more modern asynchronous rendering capabilities (e.g., for server-side rendering with React 16+). It provides a context-based API and is meant to be a drop-in replacement for react-helmet.
React-meta-tags is another package that provides similar functionality to react-helmet. It allows you to manage HTML meta tags for your React application. It's a smaller and more focused library that deals specifically with meta tags.
Next-seo is a plugin for Next.js projects that helps with managing SEO. It provides a set of components to handle SEO, including JSON-LD and open graph tags. While it's not a direct alternative to react-helmet, it serves a similar purpose in the context of Next.js applications.
This reusable React component will manage all of your changes to the document head.
Helmet takes plain HTML tags and outputs plain HTML tags. It's dead simple, and React beginner friendly.
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>
);
}
};
Nested or latter components will override duplicate changes:
<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>
outputs:
<head>
<title>Nested Title</title>
<meta name="description" content="Nested component">
</head>
See below for a full reference guide.
title, base, meta, link, script, noscript, and style tags.body, html and title tags.Helmet 5 is fully backward-compatible with previous Helmet releases, so you can upgrade at any time without fear of breaking changes. We encourage you to update your code to our more semantic API, but please feel free to do so at your own pace.
Yarn:
yarn add react-helmet
npm:
npm install --save react-helmet
To use on the server, call Helmet.renderStatic() after ReactDOMServer.renderToString or ReactDOMServer.renderToStaticMarkup to get the head data for use in your prerender.
Because this component keeps track of mounted instances, you have to make sure to call renderStatic on server, or you'll get a memory leak.
ReactDOMServer.renderToString(<Handler />);
const helmet = Helmet.renderStatic();
This helmet instance contains the following properties:
basebodyAttributeshtmlAttributeslinkmetanoscriptscriptstyletitleEach property contains toComponent() and toString() methods. Use whichever is appropriate for your environment. For attributes, use the JSX spread operator on the object returned by toComponent(). E.g:
const html = `
<!doctype html>
<html ${helmet.htmlAttributes.toString()}>
<head>
${helmet.title.toString()}
${helmet.meta.toString()}
${helmet.link.toString()}
</head>
<body ${helmet.bodyAttributes.toString()}>
<div id="content">
// React stuff here
</div>
</body>
</html>
`;
function HTML () {
const htmlAttrs = helmet.htmlAttributes.toComponent();
const bodyAttrs = helmet.bodyAttributes.toComponent();
return (
<html {...htmlAttrs}>
<head>
{helmet.title.toComponent()}
{helmet.meta.toComponent()}
{helmet.link.toComponent()}
</head>
<body {...bodyAttrs}>
<div id="content">
// React stuff here
</div>
</body>
</html>
);
}
If you are using a prebuilt compilation of your app with webpack in the server be sure to include this in the webpack file so that the same instance of react-helmet is used.
externals: ["react-helmet"],
Or to import the react-helmet instance from the app on the server.
<Helmet
{/* (optional) set to false to disable string encoding (server-only) */}
encodeSpecialCharacters={true}
{/*
(optional) Useful when you want titles to inherit from a template:
<Helmet
titleTemplate="%s | MyAwesomeWebsite.com"
>
<title>Nested Title</title>
</Helmet>
outputs:
<head>
<title>Nested Title | MyAwesomeWebsite.com</title>
</head>
*/}
titleTemplate="MySite.com - %s"
{/*
(optional) used as a fallback when a template exists but a title is not defined
<Helmet
defaultTitle="My Site"
titleTemplate="My Site - %s"
/>
outputs:
<head>
<title>My Site</title>
</head>
*/}
defaultTitle="My Default Title"
{/* (optional) callback that tracks DOM changes */}
onChangeClientState={(newState, addedTags, removedTags) => console.log(newState, addedTags, removedTags)}
>
{/* html attributes */}
<html lang="en" amp />
{/* body attributes */}
<body className="root" />
{/* title attributes and value */}
<title itemProp="name" lang="en">My Plain Title or {`dynamic`} title</title>
{/* base element */}
<base target="_blank" href="http://mysite.com/" />
{/* multiple meta elements */}
<meta name="description" content="Helmet application" />
<meta property="og:type" content="article" />
{/* multiple link elements */}
<link rel="canonical" href="http://mysite.com/example" />
<link rel="apple-touch-icon" href="http://mysite.com/img/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="http://mysite.com/img/apple-touch-icon-72x72.png" />
{locales.map((locale) => {
<link rel="alternate" href="http://example.com/{locale}" hrefLang={locale} key={locale}/>
})}
{/* multiple script elements */}
<script src="http://include.com/pathtojs.js" type="text/javascript" />
{/* inline script elements */}
<script type="application/ld+json">{`
{
"@context": "http://schema.org"
}
`}</script>
{/* noscript elements */}
<noscript>{`
<link rel="stylesheet" type="text/css" href="foo.css" />
`}</noscript>
{/* inline style elements */}
<style type="text/css">{`
body {
background-color: blue;
}
p {
font-size: 12px;
}
`}</style>
</Helmet>
Please take a moment to review the guidelines for contributing.
MIT
FAQs
A document head manager for React
The npm package react-helmet receives a total of 1,757,044 weekly downloads. As such, react-helmet popularity was classified as popular.
We found that react-helmet demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.