How to implement react helmet in your react app

React Helmet is a simple component that makes it easy to manage and dynamically set what’s in the document’s head section. For example, you can use React Helmet to set the title, description and meta tags for the document.

It comes-in especially handy when combined with server-side rendering because it allows to set meta tags that will be read by search engines and social media crawlers. This makes server-side rendering and React Helmet a dynamic duo for creating apps that are SEO and social media friendly.

Installation

First, simply install the component into your project using npm or Yarn:

Yarn:

yarn add react-helmet

npm:

npm install --save react-helmet

Now you can use the component in your app by adding the elements that should go in the head of the document as children to the Helmet component:

With this, if you open your browser’s elements inspector you’ll see the title and meta elements in the head section.

Also when you hover on the page tab you'll get the page title.

Features

• Supports all valid head tags: title, base, meta, link, script, noscript, and style tags.
• Supports attributes for body, html and title tags.
• Supports server-side rendering.
• Nested components override duplicate head changes.
• Duplicate head changes are preserved when specified in the same component (support for tags like "apple-touch-icon").
• Callback for tracking DOM changes.

You can use this props also

You can create common component and pass the props also

Common component

Parent Component

Conclusion

In this article, we saw how to install and use React Helmet, a document head manager. It is small and easy to use and can be helpful for your projects.