DEV Community

loading...
Cover image for What is React Helmet and Where To Use It

What is React Helmet and Where To Use It

Olena Drugalya
Web Developer/ Frontend engineer with a proven ability to write clean, modular, reusable code and willingness to learn more, with a desire to apply learned skills.
Updated on ・3 min read

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
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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 = []}) => {.....}
Enter fullscreen mode Exit fullscreen mode

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,
        } 
      ]}
   />
  )
}
Enter fullscreen mode Exit fullscreen mode

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
        }
]
Enter fullscreen mode Exit fullscreen mode

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
        }
]
Enter fullscreen mode Exit fullscreen mode

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 :)

Buy Me a Coffee at ko-fi.com

Discussion (6)

Collapse
oreste profile image
Oreste Abizera

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,
        },
      ]}
    />
Enter fullscreen mode Exit fullscreen mode
Collapse
olenadrugalya profile image
Olena Drugalya Author

thank you very much! fixed that :)

Collapse
nicozerpa profile image
Nico Zerpa (he/him)

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.

Collapse
rahxuls profile image
Rahul

You articles + FCC courses/videos are amazing combo.

Collapse
olenadrugalya profile image
Olena Drugalya Author

I’m glad you like it :)