Add head elements to React with React Helmet

Meta tags provide important information about your web page. Not only are the <title> tags displayed in your visitors’ browsers but they along with other tags like the <description> tag is used in search engine results.

It’s important to note that in 2020, meta tags still matter, but not all of them help you. SEO experts agree that if you want to rank highly in search engines your meta tags need to accompany high-quality content.

With Single-Page Applications like those written in React, managing <head> content can be challenging. That is why the good people over at NFL have created React Helmet.

What is React Helmet

React Helmet is a simple component that makes it easy to manage and dynamically set the content of your HTML’s <head> section. For example, you can use React Helmet to set all valid <head> tags including: titlebasemetalinkscriptnoscript, and style.

It comes in hand with server-side and static rendering improving the crawl-ability of your site. This will make your site more SEO and social media friendly.

Installation

Run the following to install React Helmet in your React project:

$ yarn add react-helmet

# or, using NPM:
$ npm install --save react-helmet

Getting Started

Add the following to your parent App function and it will act as a default for all of your pages that don’t have a <Helmet> tag:

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

function App() {
  return (
    <div className="App">
      <Helmet>
        <title>My App</title>
        <link rel="canonical" href="http://example.com" />
        <meta name="description" content="My app description" />
      </Helmet>

      <h1>Hello, World!</h1>
    </div>
  );
}

export default App;

In the <head> this will render something like:

<head>
  <title>My App</title>
  <link rel="canonical" href="http://example.com">
  <meta name="description" content="My app description" />
</head>

Nesting <Helmet> Tags

How does React Helmet know which <Helmet> to use?

Nested or latter components override duplicate tags. Any tags that exist in both the child and the parent will use the child version. Any tags that exist in the parent and not the child will use the parent version.

Let’s make a new child component to test how <Helmet> interacts:

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

export function ChildComponent() {
  return (
    <div className="Child">
      <Helmet>
        <title>Child Page - My App</title>
        <link rel="canonical" href="http://example.com/child" />
      </Helmet>

      <h2>Hello, Child!</h2>
    </div>
  );
}

Add the child component to the App:

import React from "react"
import { Helmet } from "react-helmet";
import { ChildComponent } from "./child.component";

function App() {
  return (
    <div className="App">
      <Helmet>
        <title>My App</title>
        <link rel="canonical" href="http://example.com" />
        <meta name="description" content="My app description" />
      </Helmet>

      <h1>Hello, World!</h1>

      <ChildComponent />
    </div>
  );
}

export default App;

This will render something along the lines of:

<head>
  <title>Child Page - My App</title>
  <link rel="canonical" href="http://example.com/child">
  <meta name="description" content="My app description" />
</head>

Note the <title> and <link> tags changed but the description didn’t.

Adjusting <body> attributes

React Helmet gives you the ability to change attributes of the <body> tag by adding it to your <Helmet> tag like this:

<Helmet>
  <title>Child Page - My App</title>
  <link rel="canonical" href="http://example.com/child" />
  <body className="dark" />
</Helmet>

Conclusion

That’s it for React Helmet. Simple, easy, and straight forward. For more information on what <head> tags are available see https://htmlhead.dev/

Bookmark(1)

No account yet? Register

Published by Chris London

A serial entrepreneur, Chris is currently co-founder and CTO of tech start-up Cinch. Cinch is an automated marketing platform designed to share the right message at the right time with your customers.

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *