In this tutorial, I’ll cover How to Add Meta Tags in React Apps Dynamically with a NodeJS Server. The dynamic Meta tags actually work with Facebook, Twitter, Linkedin, Whatsup, and all social media platforms.
React app routes on your website project, such as an /home page, /about page, /post/:id pages, and /contact pages. These all pages set different meta tags, like the meta title, meta description, OG title, OG url, OG image, and other such things.
React Helmet is a powerful library that helps to dynamically update meta tags on the server. It is easy to manage and SEO for react single page applications.
React app all the meta tags in two places, First one inside the frontend using React Helmet tags and second one is backend using express server.
How do I use it?
First, create a react app and install the component into your project Open your terminal and press enter the following command.
npx create-react-app my-app
cd my-app
npm start
Next, React router and react helmet install the required packages using the npm command:
npm install react-router-dom
npm i react-helmet
Now, we’ll create some react-router components are home page, an about page, a shopping page, and a contact page. The following code for App.js:
App.jsimport React from 'react'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; import { Helmet } from "react-helmet"; const Home = () => ( <div> <Helmet> <title>Home</title> <meta name="description" content="Tutorial for CodeAT21" /> </Helmet> <h2>Home</h2> <p> This is the home page! </p> </div> ) const About = () => ( <div> <Helmet> <title>About</title> <meta name="description" content="Tutorial for CodeAT21" /> </Helmet> <h2>About</h2> <p> This is the about page! </p> </div> ) const shopping = () => ( <div> <Helmet> <title>shopping</title> <meta name="description" content="Tutorial for CodeAT21" /> </Helmet> <h2>shopping</h2> <p> This is the shopping page! </p> </div> ) const Contact = ({ match }) => ( <div> <Helmet> <title>Contact</title> <meta name="description" content="Tutorial for CodeAT21" /> </Helmet> <h2>Contact</h2> <p> This is the contact us page! </p> </div> ) const App = () => ( <Router> <div> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/shopping/7">Shopping</Link></li> <li><Link to="/contact">Contact</Link></li> </ul> <hr/> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> <Route path="/shopping/:id" component={Shopping}/> <Route path="/contact" component={Contact}/> </div> </Router> ) export default App;
Step 1
First, Open your current react project folder public/index.html and replace all metatags with a unique string. The following code for index.html:
index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="description" content="add description" data-react-helmet="true" /> <title> CodeAT21 Tutorial </title> <meta property="og:title" content="$OG_TITLE" /> <meta property="og:description" content="$OG_DESCRIPTION" /> <meta property="og:image" content="$OG_IMAGE" /> <meta property="og:image:width" content="598" /> <meta property="og:image:height" content="398" /> <meta property='og:video' content="$OG_VIDEO" /> <!-- Twitter Share --> <meta name="twitter:title" content="$OG_TITLE" /> <meta name="twitter:image" content="$OG_IMAGE" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:description" content="$OG_DESCRIPTION" /> <meta property="og:url" content=$OG_URL /> <meta property="og:site_name" content="Site Name" /> <meta property="og:locale" content="en_US" /> <meta property="og:type" content="website" /> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body> </html>
Step 2
In Node, we can use server.js, we’ll handle every route individually. Node.js is a javascript language, not a framework and it is an open-source that is used Backend(server-side). My server.js file like this:
server.jsconst express = require('express'); const app = express(); const port = process.env.PORT || 5000; const path = require('path'); const fs = require('fs') app.get('/', function(request, response) { console.log('Home page visited!'); const filePath = path.join(__dirname, './../public_html/build', 'index.html'); // read in the index.html file fs.readFile(filePath, 'utf8', function (err,data) { if (err) { return console.log(err); } // replace the special strings with server generated strings data = data.replace(/\$OG_TITLE/g, 'Home Page'); data = data.replace(/\$OG_DESCRIPTION/g, "Home page description"); result = data.replace(/\$OG_IMAGE/g, 'https://codeat21.com/wp-content/uploads/2021/03/CodeAT21-Logo.png'); return response.send(result); }); }); app.get('/about', function(request, response) { console.log('About page visited!'); const filePath = path.join(__dirname, './../public_html/build', 'index.html'); fs.readFile(filePath, 'utf8', function (err,data) { if (err) { return console.log(err); } data = data.replace(/\$OG_TITLE/g, 'About Page'); data = data.replace(/\$OG_DESCRIPTION/g, "About page description"); result = data.replace(/\$OG_IMAGE/g, 'https://codeat21.com/wp-content/uploads/2021/03/CodeAT21-Logo.png'); return response.send(result); }); }); app.get('/shopping/:id', function(request, response) { //request.params.id --- get /shopping/:id console.log('Shopping page visited!'); const filePath = path.join(__dirname, './../public_html/build', 'index.html'); fs.readFile(filePath, 'utf8', function (err,data) { if (err) { return console.log(err); } data = data.replace(/\$OG_TITLE/g, 'Shopping Page'+request.params.id); data = data.replace(/\$OG_DESCRIPTION/g, "Shopping page description"); result = data.replace(/\$OG_IMAGE/g, 'https://codeat21.com/wp-content/uploads/2021/03/CodeAT21-Logo.png'); return response.send(result); }); }); app.get('/contact', function(request, response) { console.log('Contact page visited!'); const filePath = path.join(__dirname, './../public_html/build', 'index.html'); fs.readFile(filePath, 'utf8', function (err,data) { if (err) { return console.log(err); } data = data.replace(/\$OG_TITLE/g, 'Contact Page'); data = data.replace(/\$OG_DESCRIPTION/g, "Contact page description"); result = data.replace(/\$OG_IMAGE/g, 'https://codeat21.com/wp-content/uploads/2021/03/CodeAT21-Logo.png'); return response.send(result); }); }); app.use(express.static(path.join(__dirname, '../public_html/build'))); app.get('*', function(req, res) { res.sendFile(path.join(__dirname, '../public_html/build', 'index.html')); }); app.listen(port, () => console.log(`Listening on port ${port}`));
Conclusion
Finally, How to Add Dynamic Meta Tags in React Apps and NodeJS Server Tutorial is over. if you run some problem while project testing because of local caching and new server request is problem every time. Try a new incognito window or clear browser history for testing.
