What is React Helmet and Where To Use It

#webdev #javascript #react #beginners

This blog post is about an interesting React component - React Helmet.
Before you read this article, you have to be familiar with React library. You would also need a basic knowledge about the HTML head element.

I came across this component while building Gatsby website and it got me interested since I have never come across it before. Let's explore what it is, as well as where and how to use it.

What is React Helmet

According to official docs React Helmet is a reusable component, which helps manage all of your changes to the document head.
For example, you can use React Helmet to set the title, description and meta tags for the document dynamically. This is very handy when you have a project with multiple routes and want to update the meta tags for SEO based on the route currently rendered to the page.

How to Install and Use

It exists actually in the "react-helmet" library, so first we need to install this library:



npm install react-helmet --save

Now we can import React Helmet component to our project and use it. The following example sets the page title, language and description.



import React from "react"
import {Helmet} from "react-helmet"

export const SEO = () => {
  return (
    <div>
      <Helmet htmlAttributes>
        <html lang="en" />
        <title>Hello from React Helmet</title>
        <meta name="description" content="Basic example" />
      </Helmet>
    </div>
  );
}

Features

Supports all valid head tags: title, base, meta, link, script, noscript, and style.
Supports attributes for body, html and title tags.
Supports server-side rendering.
Nested components override duplicate head changes (Components further down the tree can override values provided to the Helmet component on a higher level).
Duplicate head changes are preserved when specified in the same component (support for tags like "apple-touch-icon").
Callback for tracking DOM changes.

Dynamic Helmet

Above was an example of simple usage of Helmet, but this is unlikely, that you are going to use it like this in the project. The next example will show how to add title, metadata and other important SEO elements dynamically and importing it inside any component you want.

We are going to create a SEO component, which will receive some data as props and fill it up in to head section of the page.

1.We destructure components props and receive title, description and meta array (it is empty by default):



import React from "react"
import {Helmet} from "react-helmet"

export const SEO = ({title, description, meta = []}) => {.....}

2.Now we can use destructured data as properties of Helmet component. We can also use property htmlAttributes to set up language for the website:



import React from "react"
import {Helmet} from "react-helmet"

export const SEO = ({title, description, meta = []}) => {
 return(
  <Helmet title = {title}
          htmlAttributes={{ lang: "en" }}
          meta={[
        {
          name: `description`,
          content: description,
        } 
      ]}
   />
  )
}

The title and description tags are crawled by search engines, that's why it is important to use those at first place.

3.We can add a bunch of meta objects to the meta array. They are divided into 2 groups - OpenGraph tags and Twitter tags.

OpenGraph tags (marked with og:) are crawled by Facebook whenever you share a link through Messenger/ Facebook:



meta={[
        {
          property: "og:url",
          content: someUrl
        },
        {
          property: "og:type",
          content: someArticle
        },
        {
          property: "og:title",
          content: someTitle
        },
        {
          property: "og:description",
          content: someDescription
        },
        {
          property: "og:image",
          content: someImage
        },
        {
          property: "fb:app_id",
          content: someFbAppId
        }
]

Twitter tags (marked with twitter) are crawled by Twitter accordingly:




meta={[
        {
          property: "twitter:card",
          content: someSummary
        },
        {
          property: "twitter:creator",
          content: someAuthorName
        },
        {
          property: "twitter:title",
          content: someTitle
        },
        {
          property: "twitter:description",
          content: someDescription
        },
        {
          property: "twitter:image",
          content: someImage
        }
]

This was just a simple example how we can create reusable dynamic SOE component. If you wonder how to make a complex one, check this SEO made by Kent Dods.

Conclusion

React Helmet is aimed to manage and dynamically set what’s in the document’s head section.
It comes-in especially handy when combined with server-side rendering because it allows to set meta tags that will be read by search engines and social media crawlers. This makes server-side rendering and React Helmet a dynamic duo for creating apps that are SEO and social media friendly.
Helmet is being used as plugin in Gatsby framework.

Thank you for reading my blog. Feel free to connect on LinkedIn or Twitter :)

Top comments (6)

Oreste Abizera • Jun 7 '21

Thanks for the great article. But there is a small issue on the second code block of Dynamic Helmet. Try using this code block below. It will fix it:

<Helmet
      title={title}
      htmlAttributes={{ lang: "en" }}
      meta={[
        {
          name: `description`,
          content: description,
        },
      ]}
    />

Olena Drugalya • Jun 9 '21

thank you very much! fixed that :)

Rojil Shrestha • Feb 2 '22

nice article

Nico Zerpa (he/him) • Mar 22 '21

I've started using Helmet a couple of weeks ago when I moved my website to Gatsby.

It's a cool package, it comes in handy when you have to set or edit the meta tags and you don't have access to the <head> area of the page, as is the case with Gatsby sites.