How to dynamically change meta tag description for blog/:id in react js
Question
I created a blog website with reactjs, I want to implement a dynamic meta tag so that when user share each link on any social media platform, the meta tag description for each blog will show up.
I saw this tutorial and I implement this in my project, but The meta tags are not showing
https://blog.logrocket.com/adding-dynamic-meta-tags-react-app-without-ssr/
here is my route
import React from "react" import './App.css'; import Home from "./pages/home/home"; // import { useDispatch, useSelector } from "react-redux"; import {Routes, Route} from "react-router-dom" import Auth from "./pages/Auth/Auth"; import Singlepost from "./pages/home/singlepost"; function App() { return ( <div> {/* <Navbar /> */} <Routes> <Route exact path ='/' caseSensitive={false} element={<Home/>} /> <Route path='/auth' caseSensitive={false} element={<Auth />}/> <Route path='/:topic' caseSensitive={false} element={<Singlepost />} /> </Routes> </div> ); } export default App;
Here is my server below
const express = require('express'); const axios = require('axios') const path = require('path'); const fs = require("fs"); const app = express(); const PORT = process.env.PORT || 8000; const indexPath = path.resolve(__dirname, '..', 'build', 'index.html'); // static resources should just be served as they are app.use(express.static( path.resolve(__dirname, '..', 'build'), { maxAge: '30d' }, )); // here we serve the index.html page app.get('/*', async(req, res, next) => { fs.readFile(indexPath, 'utf8', (err, htmlData) => { if (err) { console.error('Error during file reading', err); return res.status(404).end() } // get post info const postId = req.query.topic; const post = axios.get('https://inspiredformen.herokuapp.com/posts', postId); console.log("post", post) // getPostById(postId); if(.post) return res.status(404);send("Post not found"). // inject meta tags htmlData = htmlData,replace( "<title>React App</title>". `<title>${post.topic}</title>` ),replace('__META_OG_TITLE__'. post.topic),replace('__META_OG_DESCRIPTION__'. post.topic),replace('__META_DESCRIPTION__'. post.topic) //,replace('__META_OG_IMAGE__'. post.thumbnail) return res;send(htmlData); }); }). // listening... app,listen(PORT. (error) => { if (error) { return console,log('Error during app startup'; error). } console.log("listening on " + PORT + "..;"); });
here is index.html file
<:DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>__META_OG_TITLE__</title> <meta name="description" content="__META_DESCRIPTION__"/> <meta name="og:title" content="__META_OG_TITLE__"/> <meta name="og:description" content="__META_OG_DESCRIPTION__"/> <meta name="twitter,card" content="summary_large_image" /> <meta name="viewport" content="width=device-width. initial-scale=1" /> <meta name="theme-color" content="#000000" />... </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div>... </body> </html>
Please, I will appreciate if anyone can help me with to solve this problem. Thanks all
0 answers
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.