Add Meta Tags in Client-side React App

3 min readSep 1, 2020

React-helmet is a reusable React component that will manage all of your changes to the document head.

When your website appears on Google search results, Google search shows a snippet, or a title and short description. As the first interaction between your website and potential customers, the snippet is the primary piece of information used to decide which result to click on. So it's important to take the time to add relevant titles and descriptions

The helmet takes plain HTML tags and outputs plain HTML tags. It’s dead simple, and React beginner-friendly.

INSTALLATION
npm install — save react-helmet

EXAMPLE :

import React from "react";
import {Helmet} from "react-helmet";class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="http://mysite.com/example" />
            </Helmet>
            ...
        </div>
    );
  }
};

Now comes the main problems which most of the developers face in using a react helmet that is SEO. If you have added this component in your react app it does not means that the same title and description and all the other meta tags will also appear when you share the link on social media

It is a single-page application, which means we only have a single index.html file. That file can only have one set of meta tags and open graph tags.

You can use server-side rendering in your app or you can use a component called react-snap but these two get complicated sometimes, so I will talk about another method.

Prerequisites

We still need to have React Helmet installed and set up it for all the pages we want the dynamic tags to work. React helmet will handle all the title changes on route change if you are using something like React Router.

Step 1

Install express dependency in your app

npm i express

We need to keep all the meta tags in two places

One inside the React Helmet tags on the frontend.
Second on the express server on the backend.

First of all we need to update our index.html file to something like the code below. Add as many as meta tags you need. Here we are only going to use the title and the description tag for simplicity.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{title}}</title>
    <meta name="description" content="{{description}}" />
  </head>
  <body>
    <div id="app"></div>
    <script src="/index_bundle.js"></script>
  </body>
</html>

Step 2

Create a file called server.js and add the code mentioned below.

In this example we have a React App with three routes:

/ for home
/about for an about me page
/contact for a contact page.

const express = require("express");
const path = require("path");
const fs = require("fs");

const app = express();
const port = 3000;

app.get("/", function (req, res) {
  const filePath = path.resolve(__dirname, "./public", "index.html");

  fs.readFile(filePath, "utf8", function (err, data) {
    if (err) {
      return console.log(err);
    }

    data = data.replace(/{{title}}/, "Sachin Verma");
    data = data.replace(
      /{{description}}/,
      "Sachin Verma's personal site and blog"
    );

    res.send(data);
  });
});

app.get("/about", function (req, res) {
  const filePath = path.resolve(__dirname, "./public", "index.html");

  fs.readFile(filePath, "utf8", function (err, data) {
    if (err) {
      return console.log(err);
    }

    data = data.replace(/{{title}}/, "About | Sachin Verma");
    data = data.replace(/{{description}}/, "About Sachin Verma");

    res.send(data);
  });
});

app.get("/contact", function (req, res) {
  const filePath = path.resolve(__dirname, "./public", "index.html");

  fs.readFile(filePath, "utf8", function (err, data) {
    if (err) {
      return console.log(err);
    }

    data = data.replace(/{{title}}/, "Contact | Sachin Verma");
    data = data.replace(/{{description}}/, "Contact Sachin Verma");

    res.send(data);
  });
});

app.use(express.static(path.resolve(__dirname, "./public")));

app.get("*", function (req, res) {
  const filePath = path.resolve(__dirname, "./public", "index.html");
  fs.readFile(filePath, "utf8", function (err, data) {
    if (err) {
      return console.log(err);
    }

    data = data.replace(/{{title}}/, "Sachin Verma");
    data = data.replace(
      /{{description}}/,
      "Sachin Verma's personal site and blog"
    );

    res.send(data);
  });
});

app.listen(port, () => console.log(`Listening on port ${port}`));

Now everything is ready and we can start our express server by running node server.js. It should start serving at the port 3000, which you can check by going to http://localhost:3000

Add Meta Tags in Client-side React App

EXAMPLE :

Prerequisites

Step 1

Step 2

Written by Raghav Jindal