Unleash the Power of Dynamic Page Titles and Meta Data with React-Helmet.

Introduction

As a React developer, have you ever wondered how you can give different titles to your web pages? I have some exciting news for you: React-helmet is your right choice and I will explain it in this article.

Prerequisites

Basic knowledge of Reactjs (Vite)
Knowledge of HTML.
Knowledge of React-routers

What Are Dynamic Page Titles In React?

Dynamic page titles mean changing the web page title that appears at the top of a website. In Vanilla JavaScript, this can be done manually by tweaking the content of the <title> tag for each page but for a framework like React, this won’t suffice because there is just one “index.html” and it won’t give us the dynamic page title effect that we want.

Importance Of Dynamic Page Titles

Dynamic Page Title allows us to give a unique name to each web page concerning its content.
Dynamic Page Title allows users to take control and easily adjust head-related elements of your web page based on the state of your components.
For websites that frequently update their content such as Blogs, E-commerce websites; Dynamic page titles ensure that the title represents the content of the web page.

What is Meta-data?

Meta-data is an essential part of the <head> that contains information about a web page. This information does not appear directly on the web page itself but gives search engines insight into the website and its content.

Now we know what dynamic page titles are, as well as their importance in our React websites and what meta-data are, let us see how we can implement them in our websites.

Introduction to React-Helmet

The react-helmet library is a popular JavaScript library that manages the document <head> of our web pages. It allows users to dynamically update various meta tags, titles, and other elements within the <head> of your HTML document.

How To Set Up React-Helmet On Your Local Machine (Computer)

To be able to use the React-helmet library on our system, firstly we will have to create a new React project and for this tutorial, we will be using Vite.

Creating a New Vite React App

To create a new React project using Vite, go to your system's command prompt, move to the directory where you wish to create the project, and enter the command below:

npm create vite@latest my-react-app --template react

A prompt will appear, select React as your framework and you can choose between TypeScript or JavaScript but for this tutorial, we will be using JavaScript. After that, go ahead to run this command below to run the project:

npm run dev

Installing and setting up React-helmet

Since our React project is up and running, we will then install our React-helmet. To do that, we go to the terminal of whatever Integrated Development Environment (IDE) we are using but I will suggest you use Visual Studio Code to follow up with me in this tutorial.

To install React-helmet in your react project, enter the command below:

npm i react-helmet

Adding React-helmet to Components

To add React-helmet to a react component we must import helmet into that very component

import {Helmet} from "react-helmet";

After importing helmet, we can then add the code below to the top of our React project.

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

const App = () => {
  return (
    <div
<!--   Helmet starts here        -->
      <Helmet>
        <meta charSet="utf-8" />
        <title>Home Page</title>
        <link rel="canonical" href="http://mysite.com/example" />
      </Helmet>
<!--   Helmet stops here   -->
      <p>This is the Home Page</p>
    </div>
  );
};

export default App;

The output should look like this:

The same step should be applied to other routed pages of the website.

Meta-Data Management With React-Helmet

React-helmet is an essential tool for meta-data management, it allows us to give meaning to the data or content of a web page. This can either be hard-coded or done dynamically.

React-helmet content can be hard coded as below:

      <Helmet>
        <meta charSet="utf-8" />
        <title>Contact Page</title>
        <meta name="description" content="This is a description for the page." />
        <meta name="keywords" content="Engineering solutions, Get in touch, Contact us" />
        <link rel="canonical" href="http://mysite.com/example" />
      </Helmet>

Or it can be done dynamically as below:

function BlogPost({ title, content }) {
  return (
    <div>
      <Helmet>
        <title>{title} - My Blog</title>
        <meta name="description" content={content.slice(0, 150)} />
      </Helmet>
      {/* Your blog post content */}
    </div>
  );
}

Conclusion

This article addressed dynamic page titles in React and how to manage meta-data using React-helmet. There is a whole lot more we can do with React-helmet but for this article, we will be stopping here. With everything covered in this article, navigating your way through other uses of React-helmet won't be difficult at all.

Henry's Journey