ReactJS - Facebook 上共享帖子的图像预览问题答案

【问题标题】：ReactJS – Image preview problem of the shared post on FacebookReactJS - Facebook 上共享帖子的图像预览问题
【发布时间】：2021-11-19 05:28:57
【问题描述】：

我已经使用 ReactJs 开发了我的应用程序。从 ReactJs，我在 Facebook 上分享了一个页面，但 Facebook 没有显示图像的预览。

【问题讨论】：

标签： reactjs facebook post share

【解决方案1】：

我们知道 react 是单页应用程序。 ReactJs 在数据准备好后，将渲染好的数据推送到根元素。

当我们在 Facebook 上分享帖子时，Facebook 会在标题部分搜索 og:image 和 og:url 元标记。当 Facebook 从共享 URL 获取数据时，它没有找到必要的元标记，因为 ReactJs 在它准备好后将数据推送到根元素。

我们可以通过 NGINX 或其他任何网络服务器通过附加 og:image 和 og:url 以及我们需要在请求到达服务器时提供的其他元标记来解决这个问题。

location ~ ^/product/(.*)/(.*) {
    try_files $uri $uri/ /index.html;
}

上面的(.)/(.)是产品页面的动态参数。第一个动态参数 (.) 将由 $1 访问，第二个动态参数 (.) 将由 $2 访问。

location / {
      sub_filter </head>
        '<meta property="og:url" content="https://image-url/$2" />
         <meta property="og:image" content="https://image-url/$2" />
         <meta property="twitter:image" content="https://image-url/$2" />
         <meta property="twitter:image:src" content="https://image-url/$2" />
         </head>';
        sub_filter_once on;
       try_files $uri $uri/ /index.html;
    }

您需要将以上两个代码块放入您的 NGINX 配置文件中。

在上面，sub_filter 将搜索文本并将替换为以下文本“

这里我们假设第二个 (.*) 中的图片的动态名称，所以我们使用 $2 来获取共享帖子的图片名称。

通过以上两段代码块，您可以在 Facebook 或其他社交媒体平台上获得您共享帖子的漂亮图像预览。

注意：对于 Facebook 分享，您需要确保图片 URL 和分享的帖子 URL 应该在同一个域中，否则 facebook 可能无法正确显示图片预览。

【讨论】：