Changing Headers in React with react-helmet.

Stuck while changing your react app's header? This tutorial is going to help you solve that issue.

We are going to use Helmet which is a npm package used to include 'head' tags in react.js websites.

In terminal use the following code, to install react-helmet package.

npm install react-helmet

After installing react-helmet, In App.js we are gonna include, the following code,

import React from 'react' 

import {Helmet} from 'react-helmet'

const App = ()=>{

return(
<div>

<Helmet>

<title>Your own title</title>
<meta name="description" content="Your description" />

</Helmet>

</div>


)

} 
export default App;

In 'Helmet' tag we can have,

• meta tag.
• title tag.
• link tag.
• script tag.
• noscript tag.

Thats it, we have changed the header of the page and its meta description with Helmet.

So, react-helmet gives us a easy way to change our meta data content and title for each and every page in react which is good for SEO purposes.

This is really great for SEO

If we just keep our header same in all our pages, google is not going to take it well and may penalize us when its bot is crawling our website for content.

A Crawling bot is a software which crawls our website for data. It crawls our website's body tag, meta tag and all others which would be useful for search engine purposes.

Remember we can also dynamically render Helmet head data with either

• Axios (render from backend).
• Redux.
• Context API.
• Pass it as props from parent to children.

You can use any of the above mentioned methods.

Thank you for reading!

If you like this article, Heart/Like this one and save it to
read later.

My other React articles:

• Create-React-App