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 with support for document title, meta, link, style, script, noscript, and base tags.
Inspired by react-document-title
Table of Contents generated with DocToc
import React from "react";
import Helmet from "react-helmet";
export default function Application () {
return (
<div className="application">
<Helmet title="My Title" />
...
</div>
);
};
import React from "react";
import Helmet from "react-helmet";
export default function Application () {
return (
<div className="application">
<Helmet
htmlAttributes={{lang: "en", amp: undefined}} // amp takes no value
title="My Title"
titleTemplate="MySite.com - %s"
defaultTitle="My Default Title"
titleAttributes={{itemprop: "name", lang: "en"}}
base={{target: "_blank", href: "http://mysite.com/"}}
meta={[
{name: "description", content: "Helmet application"},
{property: "og:type", content: "article"}
]}
link={[
{rel: "canonical", href: "http://mysite.com/example"},
{rel: "apple-touch-icon", href: "http://mysite.com/img/apple-touch-icon-57x57.png"},
{rel: "apple-touch-icon", sizes: "72x72", href: "http://mysite.com/img/apple-touch-icon-72x72.png"}
]}
script={[
{src: "http://include.com/pathtojs.js", type: "text/javascript"},
{type: "application/ld+json", innerHTML: `{ "@context": "http://schema.org" }`}
]}
noscript={[
{innerHTML: `<link rel="stylesheet" type="text/css" href="foo.css" />`}
]}
style={[
{type: "text/css", cssText: "body {background-color: blue;} p {font-size: 12px;}"}
]}
onChangeClientState={(newState) => console.log(newState)}
/>
...
</div>
);
};
title, base, meta, link, script, noscript, and style tags.html and title tags.npm install --save react-helmet
Dependencies: React >= 15.0.0
To use on the server, call rewind() 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 rewind on server, or you'll get a memory leak.
ReactDOMServer.renderToString(<Handler />);
let head = Helmet.rewind();
head.htmlAttributes
head.title
head.base
head.meta
head.link
head.script
head.style
head contains the following properties:
htmlAttributestitlebasemetalinkscriptnoscriptstyleEach property contains toComponent() and toString() methods. Use whichever is appropriate for your environment. For htmlAttributes, use the JSX spread operator on the object returned by toComponent(). E.g:
const html = `
<!doctype html>
<html ${head.htmlAttributes.toString()}>
<head>
${head.title.toString()}
${head.meta.toString()}
${head.link.toString()}
</head>
<body>
<div id="content">
// React stuff here
</div>
</body>
</html>
`;
function HTML () {
const attrs = head.htmlAttributes.toComponent();
return (
<html {...attrs}>
<head>
{head.title.toComponent()}
{head.meta.toComponent()}
{head.link.toComponent()}
</head>
<body>
<div id="content">
// React stuff here
</div>
</body>
</html>
);
}
<Helmet
title="My Title"
meta={[
{"name": "description", "content": "Helmet application"}
]}
/>
<Helmet
title="Nested Title"
meta={[
{"name": "description", "content": "Nested component"}
]}
/>
Yields:
<head>
<title>Nested Title</title>
<meta name="description" content="Nested component">
</head>
<Helmet
title="My Title"
titleTemplate="%s | MyAwesomeWebsite.com"
/>
<Helmet
title="Nested Title"
/>
Yields:
<head>
<title>Nested Title | MyAwesomeWebsite.com</title>
</head>
meta and/or link tags in the same component are preserved<Helmet
link={[
{"rel": "apple-touch-icon", "href": "http://mysite.com/img/apple-touch-icon-57x57.png"},
{"rel": "apple-touch-icon", "sizes": "72x72", "href": "http://mysite.com/img/apple-touch-icon-72x72.png"}
]}
/>
Yields:
<head>
<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">
</head>
<Helmet
link={[
{"rel": "apple-touch-icon", "href": "http://mysite.com/img/apple-touch-icon-57x57.png"},
{"rel": "apple-touch-icon", "sizes": "72x72", "href": "http://mysite.com/img/apple-touch-icon-72x72.png"}
]}
/>
<Helmet
link={[
{"rel": "apple-touch-icon", "href": "http://mysite.com/img/apple-touch-icon-180x180.png"}
]}
/>
Yields:
<head>
<link rel="apple-touch-icon" href="http://mysite.com/img/apple-touch-icon-180x180.png">
</head>
<Helmet
base={{"href": "http://mysite.com/"}}
/>
<Helmet
base={{"href": "http://mysite.com/blog"}}
/>
Yields:
<head>
<base href="http://mysite.com/blog">
</head>
<Helmet
defaultTitle="My Site"
titleTemplate="My Site - %s"
/>
Yields:
<head>
<title>My Site</title>
</head>
But a child route with a title will use the titleTemplate, giving users a way to declare a titleTemplate for their app, but not have it apply to the root.
<Helmet
defaultTitle="My Site"
titleTemplate="My Site - %s"
/>
<Helmet
title="Nested Title"
/>
Yields:
<head>
<title>My Site - Nested Title</title>
</head>
And other child route components without a Helmet will inherit the defaultTitle.
<script> tags:<Helmet
script={[{
"type": "application/ld+json",
"innerHTML": `{
"@context": "http://schema.org",
"@type": "NewsArticle"
}`
}]}
/>
Yields:
<head>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle"
}
</script>
</head>
<style> tags:<Helmet
style={[{
"cssText": `
body {
background-color: green;
}
`
}]}
/>
Yields:
<head>
<style>
body {
background-color: green;
}
</style>
</head>
Please take a moment to review the guidelines for contributing.
MIT
FAQs
A document head manager for React
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
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.