繁体   English   中英

如何在反应js中动态更改博客/:id的元标记描述

How to dynamically change meta tag description for blog/:id in react js

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我用 reactjs 创建了一个博客网站,我想实现一个动态元标记,这样当用户在任何社交媒体平台上分享每个链接时,每个博客的元标记描述都会显示出来。

我看到了这个教程,我在我的项目中实现了这个,但是元标签没有显示

https://blog.logrocket.com/adding-dynamic-meta-tags-react-app-without-ssr/

这是我的路线

 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;

下面是我的服务器

 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 + "..;"); });

这是 index.html 文件

 <: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>

请,如果有人可以帮助我解决这个问题,我将不胜感激。 谢谢大家

问题暂未有回复.您可以查看右边的相关问题.
1 React.js 动态更改元标记图像

嗨,我正在尝试动态更改元图像,但它不起作用。 https://beta.smartshop.social/sharing/?user_id=1&amp;id=114&amp;text=smartshop 这是 url。 元图像未出现请看一下 ...

2020-12-17 16:44:33 2 28   reactjs
3 React js动态更改元标记

我的应用程序有两个流程,一个是用户端,另一个是管理员端。 我的用户端是响应式的,所以我希望元标记说&lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;而我的管理端没有响应,所以我想强制浏览器以桌面模式 ...

7 如何在react js中动态包含元标记?

我正在使用 reactjs ,我想在 facebook 上分享我的内容,它正在发生,但在分享后它没有显示图像、标题、内容描述。 所以我使用react-helmet在 index.html 中动态添加元标记。 这是分享按钮 但它不起作用。 ...

10 动态更改标题中的元标记?

我正在创建一个带有按钮的可共享连接,我之前单击的按钮将执行一项功能,该功能会在发布到社交媒体后修改 OPEN GRAPH。 我尝试单击该按钮并使用共享 API 与社交媒体共享它,但标题、链接、缩略图和描述没有改变。 const share = $("#change").click(()=&gt;{ ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM