如何在静态网站上动态呈现社交分享按钮的元标记？

Question

我有一个静态站点，用户可以在其中生成无限组合的图像和内容。用户完成后，会生成永久链接，以允许他们通过 Facebook/Twitter/GooglePlus/等分享他们的创作。我希望他们共享的帖子包含用户的图像和内容，但我发现社交媒体机器人只从我的永久链接中解析 HTML 元标记，它们不评估任何 Javascript。

如何让我的用户的内容出现在共享的社交媒体帖子上？单击永久链接时，客户端 Javascript 将评估永久链接的查询参数并呈现用户的内容。我也可以在 HTML 元标记中呈现用户的内容，Twitter 和 FB 使用它来填充帖子的内容，但机器人不会评估任何 javascript，因此不会呈现元标记。

我探索过的一种可能的解决方案是预渲染。也许我的永久链接可以是一个 HTML 文件在 AWS S3 存储桶上的位置，一旦用户分享了他们的永久链接，我就可以创建它。 S3 上的那个 HTML 文件可以包含特定于用户的元标记，我可以将其提供给社交媒体机器人。当该文件被访问时，我可以让它重定向到我的永久链接。这看起来合理吗？我可以在尝试后报告。

另一种解决方案是使用预渲染服务，例如https://prerender.io/。它看起来有点笨重和黑盒，但它可能比我上面的 S3 解决方案更健壮和可靠。有什么想法吗？

我愿意接受反馈和其他解决方案，任何建议都会很棒。

---

其他相关信息：

这个答案似乎很有趣，其中涉及激活 Facebook Javascript SDK： https://stackoverflow.com/a/34178987/1884158

我知道 Twitter 的 Card Validator 和 Facebook 的 Share Debugger 等工具，这里： https://cards-dev.twitter.com/validator https://developers.facebook.com/tools/debug/ 这对于测试任何解决方案都很有用。

如果有帮助，我的网站是一个 React 应用程序，它捆绑在 HTML/CSS/JS 中并完全在客户端上呈现。

Answer 1

我还没有找到解决这个问题的合适方法，但我确实想出了一个解决方法/破解方法，其中涉及设置单独的服务。这是我想出的服务：https://github.com/mapseed/sharing/blob/master/share.js

如果我们的静态站点托管在example.com，我们可以启动一个运行在sharing.example.com 的服务器，它接受请求并将请求从sharing.example.com/my/route 重定向到example.com/my/route。但是，如果请求具有与社交媒体爬虫匹配的 user-agent HTTP 标头，就像我们正在执行 here 一样，那么我们将返回一个仅包含元标记的 html 页面，就像我们正在执行 here 一样。

但是，这种方法有一些限制：

• 我们想要在社交媒体上分享的链接需要指向我们的sharing.example.com 子域。如果请求来自社交媒体机器人，这将使我们的服务能够返回带有正确元标记的 HTML 页面，否则将请求重定向到我们的example.com 网站。

• 为了生成元标记的内容，我们的可共享链接必须具有查询参数才能传递所有信息以填充我们的元标记。例如，我们的可共享链接如下所示：sharing.example.com/post/my-post?title=my-title&desc=my-description。这意味着我们的可共享链接可能会变得很长。您可以在此处查看我们如何从查询参数中提取信息并将其注入到带有元标记的 HTML 模板中：https://github.com/mapseed/sharing/blob/master/share.js#L18-L27

如果这些限制是可以接受的，那么这个解决方案效果很好。请注意，SEO 也有不利之处，因为将共享的链接来自 sharing.example.com，而不是我们的 example.com 网站。

此外，我们将不得不启动一个额外的服务器来运行此服务。虽然我们应该能够将此实现迁移到无服务器架构中，例如 AWS Lambda。