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



The reactjs is single page application, So its hard to manage separate title and description of each page.

What’s React Helmet

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

Features Of React Helmet

There are following features supported by helmet –

Supports all valid head tags: title , base , meta , link , script , noscript , and style tags.

, , , , , , and tags. Supports attributes for body , html and title tags.

, and 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.

How To add SEO into React App Using Helmet

We will install react helmet package into our application.The helmet package will include into application 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 1 npm i react - helmet

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

If, You are using meta tag without react-helmet, then you will see 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 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 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 Helmet component from the ‘react-helmet’ package then we passed the SEO tags as children to the Helmet component.