What Is React Helmet Library?

React Helmet is a tool specially designed for React SPAs (Single Page Applications).

The Helmet library dynamically changes the <head> section of our React application.

When we are using a traditional HTML website so it creates separate HTML files for different pages, and when we click on any particular link, the browser loads a whole HTML page from the server.

This means each HTML page contains its own <head> tag (including title, meta tags, description, etc.) and updates automatically when it open each page.

But you know in React single-page application has only one HTML file like “index.html“, and others file routing by JavaScript.

When you open any new page in a react app, so it changes only page content not the head section. and then we manually update head tag.

This problem is solved by the React Helmet Library to dynamically change head content or update according to route of pages.

This library can also be used in SSR (Server-Side Rendering) to manage head tag for making effective and strong SEO.

How to Install React Helmet?

Type this command in your terminal:

npm install react-helmet

Import React Helmet in your component to manage head elements:

import { Helmet } from 'react-helmet';

Now, we will learn real-life example of how you can use helmet in react for set page title, tag, description and meta tags.

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

function HomePage() {
  return (
    <div>
      <Helmet>
        <title>Home Page - My React App</title>
        <meta name="description" content="Welcome to the homepage of my React app" />
      </Helmet>
      <h1>Welcome to My React App</h1>
      <p>This is the homepage of the app. Here, you can learn how to manage the document head dynamically.</p>
    </div>
  );
}

export default HomePage;

In this code, the helmet tag changes title and meta tags automatically.

Advanced Features of React Helmet

Updating Multiple Head Elements
Using React Helmet with React Router
Handling SEO for Dynamic Content
Nested Helmet Support
Support For All Head Tag
Reusable SEO component

1) Updating Multiple Head Elements

Only one time we will update multiple elements in the <head> section. Read this code carefully:

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

function BlogPost({ title, description }) {
  return (
    <div>
      <Helmet>
        <title>{title} - My Blog</title>
        <meta name="description" content={description} />
        <meta property="og:title" content={title} />
        <meta property="og:description" content={description} />
        <meta property="og:image" content="https://example.com/image.jpg" />
      </Helmet>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  );
}

export default BlogPost;

In this example:

The page title, meta description and Open Graph tags are dynamically updated based on the title and description props.

2) Using React Helmet with React Router

This code set the<title> and <meta> tags for different route.

we are using react-router-dom for routing.
Helmet component used in each route(HomePage, AboutPage).
When user navigates on the AboutPage so this route component will render and Helmet updates the head tag.
Search engines and social media crawlers will get unique title and description for each route.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Helmet } from 'react-helmet';

function HomePage() {
  return (
    <div>
      <Helmet>
        <title>Home Page</title>
        <meta name="description" content="This is the home page of our React app" />
      </Helmet>
      <h1>Welcome to Home Page</h1>
    </div>
  );
}

function AboutPage() {
  return (
    <div>
      <Helmet>
        <title>About Us</title>
        <meta name="description" content="Learn more about our team" />
      </Helmet>
      <h1>About Us</h1>
      <p>We are building amazing apps.</p>
    </div>
  );
}

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={HomePage} />
        <Route path="/about" component={AboutPage} />
      </Switch>
    </Router>
  );
}

export default App;

3) Handle SEO For Dynamic Content

This method used when content come from API.

How it is work:

First, API call by useEffect, based on the postID.
post state update when we get data from API.
Helmet component dynamically inject post.title, post.excerpt, and post.imageURL in head tag.
This is helpful for SEO, because unique metadata is set for each post.

import React, { useEffect, useState } from 'react';
import { Helmet } from 'react-helmet';

function DynamicBlogPost({ postId }) {
  const [post, setPost] = useState(null);

  useEffect(() => {
    // Fetch the post data based on the postId
    fetch(`https://api.example.com/posts/${postId}`)
      .then((response) => response.json())
      .then((data) => setPost(data));
  }, [postId]);

  if (!post) return <div>Loading...</div>;

  return (
    <div>
      <Helmet>
        <title>{post.title} - My Blog</title>
        <meta name="description" content={post.excerpt} />
        <meta property="og:title" content={post.title} />
        <meta property="og:description" content={post.excerpt} />
        <meta property="og:image" content={post.imageUrl} />
      </Helmet>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

export default DynamicBlogPost;

4) Nested Helmet Support

We can create nested components in Helmet to override or extend metadata

For example if parent component and child component both set the <title> so child component will override.

<Parent>
  <Helmet><title>Parent Title</title></Helmet>
  <Child>
    <Helmet><title>Child Title</title></Helmet>
  </Child>
</Parent>  //// Final <title> will be: Child Title

5) Helmet Support For All Head Tag

Helmet is not limited for only <title> and <meta>, It also support:

<link> (for favicons, canonical URLs)
<script> (for analytics or structured data)
<style> and <noscript>.

6) Reusable SEO component

You can create custom SEO component, which are wrap the Helmet. to create a consistent metadata structure for all pages.

function SEO({ title, description }) {
  return (
    <Helmet>
      <title>{title}</title>
      <meta name="description" content={description} />
    </Helmet>
  );
}

Benefits of React Helmet

Social Media Sharing: You can customize Open Graph and Twitter Card meta tags for better social media previews.
Improved User Experience: React Helmet increase browsing experience to users for dynamically updates SEO.
SEO optimization : This tool improve the search engine rankings.

What Is Helmet In React