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 of how multiple routes are implemented in React after going through the above article.

Prerequisites

I assume that you have a basic idea about React, creating multiple pages or routes in React, etc. Because here in this article, we are only going to add title and meta tags for each route component created.

What we will learn

After completing this tutorial, we will learn:-

  • Importance of title and meta tags in a web app
  • What is a route component in React
  • Why do we need to add title and meta tags for each Route component?
  • How to add title and meta tags for each Route component in React

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 the title and meta tags for each route component. This package helps us to inject the <head></head> section inside each route component.

It supports all valid head tags such as titlebasemetalinkscriptnoscript, and style tags.

So let us start the procedure.

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 a Helmet tag in each route component

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

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

These details are injected into 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.

Here, let us assume that the About is a route component. when we direct to /about route in the browser, it will show a title and meta information that I have shown below.

<Helmet>
  <title>About - yoursite.com</title>
  <meta name="description" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." />
  <link rel="canonical" href="http://mysite.com/example" />
</Helmet>

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.