CoderGuides

How to Customize the Title of Any Page in React

Objective: To customize the title of any page in React.

We're going to look at how to customize the title of any page in React. By title, this means the document's title that is shown in a browser's title bar or a page's tab. In this example, the title in the tab is "CoderGuides | Home".

Example of Document Title

And in this example, the title is "CoderGuides | Guides".

Example of Document Title

If we go into our app's index.html file in the public folder, we can add whatever title we want inside the <head> using the <title> tag, as in line 9:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/dev-logo.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <title>CoderGuides</title>
</head>

But if we go to our Home Page, we only have "CoderGuides" for the title in the tab (note the URL: /home).

Example of Document Title

And if we go to the Guides Page, we also only get "CoderGuides" in the tab (note the URL: /guides).

Example of Document Title

Indeed, this is what was added for the title in the index.html file above. And you will see that by doing this, you will get the same title (i.e. "CoderGuides") across all of your pages in your app. So, what do we do if we want to customize the title of each of our pages, so that each page in our app can have its own individual title? We're going to use a package called React Helmet to help us with this. React Helmet is a document head manager for React that allows you to manage all of your changes to the document head. There are different ways that React Helmet is useful, but we're going to use it here to help us customize the title of each of our pages.

What To Do

1. The first thing that we need to do is to install React Helmet. So, in the terminal, run npm install --save react-helmet.

npm install --save react-helmet

Then we can verify that it has been installed by checking in the dependencies in the package.json file (line 4).

"dependencies": {
  "react": "^16.13.1",
  "react-dom": "^16.13.1",
  "react-helmet": "^6.0.0",
  "react-router-dom": "^5.2.0",
},

2. The next thing we need to do is to import React Helmet into our application, wherever we want to use it. In this case, we're going to be using it in our Home Page component, as well as in our Guides Page component. I have them both as separate files (Home.js and Guides.js), so I'm going to import React Helmet into each of these files (line 2). So, for both Home.js and Guides.js, it's going to look like this. If your app has, for example, a total of five pages, and you plan on customizing the title of each of those five pages, then you will need to import React Helmet into each of those five files.

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

3. So, now that we've brought in React Helmet, we need to use it. This is the point where we customize our title. And we're going to use this inside of our component (in this case, our Home component). And we do this at the top, right after the return and the first open <div> tag. Notice that we add our customized title, "CoderGuides | Home", inside the <title> tag (line 8), which in turn goes inside the opening and closing <Helmet> tags.

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

const Home = () => {
  return (
    <div>
      <Helmet>
        <title>CoderGuides | Home</title>
      </Helmet>
        <div>
          <h3>Welcome to CoderGuides</h3>
            -- REST OF CODE --

And that's it. Now when we go to the browser, we can see our customized title in the tab.

Example of Document Title

And then for the Guides Page component, we do the same thing, but change the title accordingly (line 8).

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

const Guides = () => {
  return (
    <div>
      <Helmet>
        <title>CoderGuides | Guides</title>
      </Helmet>
        <div>
          <h3>Guides</h3>
            -- REST OF CODE --

And when we check in the browser, we get our customized title in the tab.

Example of Document Title

And that's all there is to it. So, to customize the title for all your pages, just repeat the same steps for each page you want to customize the title to.