What is react helmet?

Nishit Maheta
Published in
2 min readDec 11, 2019


A document head manager for React

Credit: https://github.com/nfl/react-helmet

React Helmet is a simple component that makes it easy to manage and dynamically set what’s in the document’s head section. This makes server-side rendering and React Helmet a dynamic duo for creating apps that are SEO and social media-friendly.

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.



yarn add react-helmet


npm install --save react-helmet


  • 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.


import React from "react";
import {Helmet} from "react-helmet";
class Application extends React.Component {
render () {
return (
<div className="application">
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://mysite.com/example" />

Nested or latter components will override duplicate changes:

<title>My Title</title>
<meta name="description" content="Helmet application" />
<title>Nested Title</title>
<meta name="description" content="Nested component" />


<title>Nested Title</title>
<meta name="description" content="Nested component">

GitHub :

Author: National Football League

Happy Coding :)