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
, andstyle
. - Supports attributes for
body
,html
andtitle
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)
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:
thank you very much! fixed that :)
nice article
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.You articles + FCC courses/videos are amazing combo.
I’m glad you like it :)