服务器端使用react的动态元标签

时间:2018-06-20 08:35:28

标签: reactjs express meta-tags serverside-rendering

我正在用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,我该如何实现呢?

1 个答案:

答案 0 :(得分:0)

/about

相同
app.get('/posts/:id', function(request, response) {...}