动态元标记未显示在 fb 共享调试器上

Question

我目前正在使用 express 提供的 react 实现社交共享预览的动态元标记。我正在关注这个项目：

https://github.com/justswim/cra-metatag-demo

控制器部分：

app.get('/item/:itemId/about', function(request, response) {
  const id = request.params.itemId;
  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, 'Contact Page');
    data = data.replace(/\$OG_DESCRIPTION/g, "Contact page description");
    result = data.replace(/\$OG_IMAGE/g, `https://i.imgur.com/${id}/img`);
    response.send(result);
  });
});

react 的 build 文件夹中的 index.html：

<title>THE NAME</title>
<meta name="title" content="Meta Tags">
<meta name="description" content="There are some contents here">

<!-- Open Graph / Facebook -->

    <meta property="og:type" content="website">
    <meta property="og:url" content="https://[NAME_OF_SITE]">
    <meta property="og:title" content="$OG_TITLE">
    <meta property="og:description" content="$OG_DESCRIPTION">
    <meta property="og:image" content="$OG_IMAGE">
    
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://...">
    <meta name="twitter:title" content="$OG_TITLE">
    <meta property="twitter:description" content="$OG_DESCRIPTION">
    <meta property="twitter:image" content="$OG_IMAGE">

我添加了上面的代码sn-p并部署到服务器上测试了。动态链接在不和谐中运行良好，但在网站社交共享预览https://socialsharepreview.com/ 上进行测试，该网站说虽然我添加了 og:image 属性但找不到它。我需要刷新一次，站点找到属性 og:url，图像加载但我收到警告，图像不是最佳的。对来自 Fb 的共享调试器进行测试，标题描述和图像 url 被更新，它说，图像的无效 url 和标题和描述保持为 OG_TITLE 和 OG_DESCRIPTION。这里发生了什么？从我的 webapp 查看页面源代码时，一切都已正确更新。

Answer 1

以下...

result = data.replace(/\$OG_IMAGE/g, 'https://i.imgur.com/${id}/img');

...应该改为：

result = data.replace(/\$OG_IMAGE/g, `https://i.imgur.com/${id}/img`);

如中，将图片网址中的单引号改为反引号。

这或许可以解释为什么图片没有被拾取。但是，我不确定为什么标题和描述也没有被选中。