Simple Example of React Helmet with ReactJs

This is another react tutorial to add meta tag into react application. The react-helmet package is used to add a meta tag into reactjs. The meta tag is used for website SEO(Search Engine Optimization). You can add title, description etc into pages using the helmet. You can use static HTML as well as server-side like express.

The reactjs is a single-page application, So it’s hard to manage a separate title and description of each page.

What’s React Helmet

The react-helmet is a react component to add meta information into react components. The React helmet provides us a Helmet component that takes the plain HTML meta tags and adds them inside the head tag to react pages.

Features Of React Helmet

There are the following features supported by the helmet –

• Supports all valid head tags: title, base, meta, link, script, noscript, and style tags.
• Supports attributes for body, html and title tags.
• Helmet also supports server-side rendering.
• Nested components override duplicate head changes.
• Duplicate head changes are preserved when specified in the same component.
• Callback for tracking DOM changes.

Checkout Other tutorials:

• How To Handle Routing In React Using BrowserRouter
• React Layout Using Material Design
• React File Upload In 5 Minute
• Autocomplete Example Using React
• React’s New Context API With Example

How To add SEO to React App Using Helmet

We will install react helmet package into our application.The helmet package will include in the application and then use into html page or react component.

Let’s install a react-helmet package from the npm package manager, Run the below command in your terminal to install the react-helmet package.

npm i react-helmet

I have already shared the tutorial Simple Theming Layout in ReactJS Using Bootstrap.I have created two routes, one is home and the other is about-us.

If You are using a meta tag without react-helmet, then you will see the same title and description for all the pages when you navigate routes.

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

function App() {
  return (

<div classname="App">
      <helmet>
        <title>js-tutorials app</title>
        <meta name="description" content="I am description meta tag">
        <meta name="keywords" cpntent="js-tutorials,keyword,listing">
      </helmet>

<h1>Hello react App</h1>


<h2>This is dashboard route</h2>

</div>

  );
}

export default App

I have imported the Helmet component from the ‘react-helmet’ package then we passed the SEO tags as children to the Helmet component.

How To Use react helmet with Gatsby

The gatsby-plugin-react-helmet provides drop-in server rendering data added with React Helmet.The title, meta attributes, and other attributes you add to their component will be appended to the static HTML pages Gatsby builds.

We’ll install gatsby-plugin-react-helmet plugin:

npm install gatsby-plugin-react-helmet --save

The React Helmet plugin must then be added to our gatsby-config.js plugins array.

plugins: [
  //everything else remains the same
    'gatsby-plugin-react-helmet',
]