我正在使用 SSR 构建 React 应用程序。我现在必须使用动态元标记(og:title 和 og:image)实现 Facebook 共享功能。
读完本教程后,https://www.kapwing.com/blog/how-to-add-dynamic-meta-tags-server-side-with-create-react-app/ ,我可以完成我的 /about
和 /faq
页面(静态)。但是,我在 /posts/:id
等动态页面上遇到问题。
在 public/index.html
中,我将元数据替换为可识别的字符串:
<!-- in public/index.html -->
<title>$OG_TITLE</title>
<meta name="description" content="$OG_DESCRIPTION" />
<meta property="og:title" content="$OG_TITLE" />
<meta property="og:description" content="$OG_DESCRIPTION" />
<meta property="og:image" content="$OG_IMAGE" />
然后在服务器上,我用动态生成的信息替换这些字符串。以下是使用 Node 和 Express 的示例路线:
app.get('/about', function(request, response) {
console.log('About page visited!');
const filePath = path.resolve(__dirname, './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://i.imgur.com/V7irMl8.png');
response.send(result);
});
});
那么对于动态路由,/posts/:id
,我该如何实现呢?
最佳答案
与/about
相同
app.get('/posts/:id', function(request, response) {...}
关于reactjs - 使用 React 在服务器端动态元标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50943782/