How to Add Title and Meta Tags for Each Route Component in React

Using the react-router-dom package, we can implement multiple routes in a React application. A user browsing this app feels each route is each page. So in React, multiple routes are considered as multiple pages. But, how can we add title and meta tags for each route component?

Here in this article, we discuss the importance of adding title and meta tags for each route component in React and adding it using the react-helmet package.

Before entering to this article, I recommend you to go through my previous article, How To Create A Multi-Page Website With React In 5 Minutes.

You will get an exact idea how multiple routes are implemented in React after going through the above article.

Importance of title and meta tags in a web app

Also, Title and Meta description tags are important in gaining user click-through from search engine result pages (SERPs).

So, after deploying your React app in server, Google crowls each pages and shows the search result with meta description.

I have given an example search result of Sri Mathilakam Temple. It’s build with React and the /history is a route. You can see that the title and meta description there.

The title for each route component also helps identify the page from browser tabs.

What is a Route Component in React

A component rendered when accessing a route in a React application is a Route component. We need to pre-define each component for each route.

In the below example, you can see that all the routes are defined in App.js file.

The routes of this react application and its corresponding route components are described below.

RouteCorresponding Route Component
/Home component
/aboutAbout component
/contactContact component

That is, when reaching /about, the react application renders the About.jsx component.

Why do we need to add title and meta tags for each Route component?

You can see a Head section in index.html of your React app. So, if you don’t give title and meta tags for each route component, this title and meta tags inside this file are shown as default.

How to add title and meta tags for each Route component in React

We can use the package react-helmet to add title and meta description for each route component.

1. Add react-helmet to our project

First of all, add or install react-helmet package in our project using npm.

npm i react-helmet

2. Import and add Helmet tag in each route component

So after installing react-helmet, import and Add Helmet tag in each route components of your app.

Inside the Helmet tag, you can add title and all meta tags. Dynamic variables can also be included here.

This details are injected to the head section of your react application when the routes are changing.

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

function About() {
 return (
   <div className="about"> 
      <Helmet> <title>About - yoursite.com</title>
      <meta name="description" content="Lorem ipsum dolor sit amet" />
    </Helmet>
   <div class="container">
   ...
   </div>
</div>)
}

I have shown an example Route component with Helmet tag below.

Summary

So in this article, we have discussed the importance of title and meta tags in a web app, what is exactly a route component in React, the importance of adding a title and meta tags in each Route component, and the steps to add title and meta tags for each Route component in React.

Be the first to reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.