What is react-helmet?
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.
What are react-helmet's main functionalities?
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>"}
Other packages similar to react-helmet
react-helmet-async
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
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
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.
React Helmet
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.
Example
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.
Features
- Supports all valid head tags:
title
, base
, meta
, link
, script
, noscript
, and style
tags. - Supports attributes for
body
, html
and title
tags. - Supports server-side rendering.
- Nested components override duplicate head changes.
- Duplicate head changes are preserved when specified in the same component (support for tags like "apple-touch-icon").
- Callback for tracking DOM changes.
Compatibility
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.
Installation
Yarn:
yarn add react-helmet
npm:
npm install --save react-helmet
Server Usage
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:
base
bodyAttributes
htmlAttributes
link
meta
noscript
script
style
title
Each 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:
As string output
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>
`;
As React components
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>
);
}
Note: Use the same instance
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.
Reference Guide
<Helmet
{}
encodeSpecialCharacters={true}
{}
titleTemplate="MySite.com - %s"
{}
defaultTitle="My Default Title"
{}
onChangeClientState={(newState, addedTags, removedTags) => console.log(newState, addedTags, removedTags)}
>
{}
<html lang="en" amp />
{}
<body className="root" />
{}
<title itemProp="name" lang="en">My Plain Title or {`dynamic`} title</title>
{}
<base target="_blank" href="http://mysite.com/" />
{}
<meta name="description" content="Helmet application" />
<meta property="og:type" content="article" />
{}
<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}/>
})}
{}
<script src="http://include.com/pathtojs.js" type="text/javascript" />
{}
<script type="application/ld+json">{`
{
"@context": "http://schema.org"
}
`}</script>
{}
<noscript>{`
<link rel="stylesheet" type="text/css" href="foo.css" />
`}</noscript>
{}
<style type="text/css">{`
body {
background-color: blue;
}
p {
font-size: 12px;
}
`}</style>
</Helmet>
Contributing to this project
Please take a moment to review the guidelines for contributing.
License
MIT