ReactJS - Helmet

The meta information of a web document is very important for SEO purposes. The meta information of a document is generally specified inside the head using meta tag. title tag also plays an important role in providing meta information about a document. Head section will have script and style tags as well. Helmet component provides an easy way to manage the head section of a document by providing all valid head tags. Helmet will gather all the information specified inside it and update the head section of the document.

Let us learn how to use Helmet component in this chapter.

Installing Helmet

Before going through the concept and usage of helmet, let us learn how to install the helmet component using npm command.

npm install --save react-helmet

The above command will install the helmet component and will be ready to use in our application.

Concept and usage of Helmet

Helmet accepts all valid head tags. It accepts the plain HTML tags and output the tags in the head section of the document as shown below −

import React from "react";
import {Helmet} from "react-helmet";
class Application extends React.Component {
   render () {
      return (
         <div className="application">
            <Helmet>
               <title>Helmet sample application</title>
               <meta charSet="utf-8" />
               <meta name="description" content="Helmet sample program to understand the working of the helmet component" />
               <meta name="keywords" content="React, Helmet, HTML, CSS, Javascript" />
               <meta name="author" content="Peter" />
               <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            </Helmet>
            // ...
         </div>
      );
   }
};

Here,

  • title is used to specify the title to the document

  • description meta tag is used to specify the details of the document

  • keywords is used to specify the main keywords of the document. It will be used by search engine.

  • author is used to specify the author of the document

  • viewport is used to specify the default view port of the document

  • charSet is used to specify the character set used in the document.

The output of the head section will be as follows −

<head>
   <title>Helmet sample application</title>
   <meta charSet="utf-8" />
   <meta name="description" content="Helmet sample program to understand the working of the helmet component" />
   <meta name="keywords" content="React, Helmet, HTML, CSS, Javascript" />
   <meta name="author" content="Peter" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

Helmet component can be used inside any other react component to change the header section. It can also be nested so that the header section will change when the child component is rendered.

<Parent>
   <Helmet>
      <title>Helmet sample application</title>
      <meta charSet="utf-8" />
      <meta name="description" content="Helmet sample program to understand the working of the helmet component" />
      <meta name="keywords" content="React, Helmet, HTML, CSS, Javascript" />
      <meta name="author" content="Peter" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   </Helmet>
   <Child>
      <Helmet>
         <title>Helmet sample application :: rendered by child component</title>
         <meta name="description" content="Helmet sample program to explain nested feature of the helmet component" />
      </Helmet>
   </Child>
</Parent>

Here,

  • Helmet in the child component will update the head section as below,

<head>
   <title>Helmet sample application :: rendered by child component</title>
   <meta charSet="utf-8" />
   <meta name="description" content="Helmet sample program to explain nested feature of the helmet component" />
   <meta name="keywords" content="React, Helmet, HTML, CSS, Javascript">
   <meta name="author" content="Peter">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Applying Helmet

Let us create a new react application to learn how to apply Helmet component in this section.

First of all, create a new react application and start it using below command.

create-react-app myapp
cd myapp
npm start

Next, open App.css (src/App.css) and remove all CSS classes.

// remove all css classes

Next, create a simple component, SimpleHelmet (src/Components/SimpleHelmet.js) and render a −

import React from "react";
import {Helmet} from "react-helmet";
class SimpleHelmet extends React.Component {
   render() {
      return (
         <div>
            <Helmet>
               <title>Helmet sample application</title>
               <meta charSet="utf-8" />
               <meta name="description" content="Helmet sample program to understand the working of the helmet component" />
               <meta name="keywords" content="React, Helmet, HTML, CSS, Javascript" />
               <meta name="author" content="Peter" />
               <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            </Helmet>
            <p>A sample application to demonstrate helmet component.</p>
         </div>
      )
   }
}
export default SimpleHelmet;

Here we have,

  • Imported Helmet from the react-helmet package

  • Used Helmet in the component to update the head section.

Next, open App component (src/App.js), and use SimpleHelmet component as shown below −

import './App.css'
import React from 'react';
import SimpleHelmet from './Components/SimpleHelmet'

function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <SimpleHelmet />
            </div>
         </div>
      </div>
   );
}
export default App;

Here we have,

  • Imported SimpleHelmet component from the react package

  • Used SimpleHelmet component

Next, open index.html (public/index.html) file and remove the meta tags as shown below -

<!DOCTYPE html>
<html lang="en">
<head>
   <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
</head>
<body>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div style="padding: 10px;">
      <div id="root"></div>
   </div>
</body>
</html>

Here,

  • title tag is removed

  • meta tag for description, theme-color and viewport are removed

Finally, open the application in the browser and check the final result.

Applying Helmet

Open the source code in the dev tools and you can see the html information as shown below −

<title>Helmet sample application</title>
<meta charset="utf-8" data-react-helmet="true">
<meta name="description" content="Helmet sample program to understand the working of the helmet component" data-react-helmet="true">
<meta name="keywords" content="React, Helmet, HTML, CSS, Javascript" data-react-helmet="true">
<meta name="author" content="Peter" data-react-helmet="true">
<meta name="viewport" content="width=device-width, initial-scale=1.0" data-react-helmet="true">

Summary

Helmet component is an easy to use component to manage the head content of the document supporting both server side and client side rendering.

Advertisements