Using the react-router-dom package, we can implement multiple routes in a React application. A user browsing this app feels each route is on 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 on the server, Google crawls each page and shows the search result with meta description.
I have given an example search result of Sri Mathilakam Temple. It’s built 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 the App.js file.
// src/App.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import {
Navigation,
Footer,
Home,
About,
Contact,
Blog,
Posts,
Post,
} from "./components";
ReactDOM.render(
<Router>
<Navigation />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
<Route path="/blog" element={<Blog />}>
<Route path="" element={<Posts />} />
<Route path=":postSlug" element={<Post />} />
</Route>
</Routes>
<Footer />
</Router>,
document.getElementById("root")
);
serviceWorker.unregister();The routes of this react application and its corresponding route components are described below.
| Route | Corresponding Route Component |
| / | Home component |
| /about | About component |
| /contact | Contact 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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>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 title, base, meta, link, script, noscript, and style tags.
So let us start the procedure.
1. Add react-helmet to our project
First of all, add or install the 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 a Helmet tag below.
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, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." />
<link rel="canonical" href="http://mysite.com/example" />
</Helmet>
<div class="container">
<div class="row align-items-center my-5">
<div class="col-lg-7">
<img
class="img-fluid rounded mb-4 mb-lg-0"
src="http://placehold.it/900x400"
alt=""
/>
</div>
<div class="col-lg-5">
<h1 class="font-weight-light">About</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.
</p>
</div>
</div>
</div>
</div>
);
}
export default About;Here, let us assume that the About is a route component. when we direct to /about the 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