Add Meta Tags in Client-side React App
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/aboutfor an about me page/contactfor 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
