4

我有一个静态站点，用户可以在其中生成无限组合的图像和内容。用户完成后，将生成永久链接，以允许他们通过 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 和 Facebooks Share Debugger 之类的工具，在这里： https ://cards-dev.twitter.com/validator https://developers.facebook.com/tools/debug/ 这对测试很有用任何解决方案。

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

4

1 回答 1

3

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

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

但是，这种方法有几个限制：

  • 我们想要在社交媒体上分享的链接需要指向我们的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

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

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

于 2018-05-31T04:30:19.963 回答