What is React Helmet and Where To Use It
Tags: webdev, javascript, react, beginners
Published: 2021-03-22 09:19:46

This blog post is about an interesting React component - **React Helmet**.
Before you read this article, you have to be familiar with  [React](https://reactjs.org/) 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](https://github.com/nfl/react-helmet) **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:

```react
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.

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

```react
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:

```react
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:

```react
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: 
```react

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](https://github.com/kentcdodds/kentcdodds.com/blob/main/src/components/seo/index.js) 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](https://www.gatsbyjs.com/plugins/gatsby-plugin-react-helmet/) framework. 

Thank you for reading my blog. Feel free to connect on [LinkedIn](https://www.linkedin.com/in/olenadrugalya/) or [Twitter](https://twitter.com/OlenaDrugalya) :)

<a href='https://ko-fi.com/J3J42JOOA' target='_blank'><img height='12' width=30% style='border:0px;height:12px;' src='https://cdn.ko-fi.com/cdn/kofi1.png?v=2' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>