服务器端呈现的 React 应用程序中的动态元标记答案

【问题标题】：Dynamic meta tags in server side rendered React app服务器端呈现的 React 应用程序中的动态元标记
【发布时间】：2017-01-17 19:21:02
【问题描述】：

我有一个带有服务器端渲染的 React 应用程序。我现在必须实现 Facebook/Google+ 共享对话框，其中 og:title 和 og:image 被动态设置为从 API 返回的值。

我正在使用 react-helmet 来设置我的默认元标记，但是我无法让它动态工作。

我尝试使用 redux-async-connect 来预取结果，这导致元标记被呈现（当我查看源代码时我可以看到它们），但是 Facebook 和 Google+ 都忽略了他们。

你们有没有做过这项工作的经验？

【问题讨论】：

我已经回答了以下问题，请检查。 [React Js 中的动态元标记](stackoverflow.com/questions/43072222/…)

标签： reactjs server-side-rendering

【解决方案1】：

您可以像这样在文档中呈现应用程序： render(<App/>, document) 而应用程序包含您需要的所有 html。

【讨论】：

【解决方案2】：

基本上，在您的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);
  });
});

摘自本教程：https://www.kapwing.com/blog/how-to-add-dynamic-meta-tags-server-side-with-create-react-app/

【讨论】：