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

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

我探索过的一个可能的解决方案是预渲染.也许我的永久链接可以是AWS S3存储桶上HTML文件的位置,我可以在用户共享其固定链接后立即创建该文件. 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/
这对测试任何解决方案都很有用.

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

最佳答案 我没有找到解决此问题的正确方法,但我确实提出了一个涉及设置单独服务的解决方法/黑客攻击.这是我提出的服务：
https://github.com/mapseed/sharing/blob/master/share.js

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

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

>我们想要在社交媒体上分享的链接需要指向我们的sharing.example.com子域.如果请求来自社交媒体机器人,或者以其他方式将请求重定向到我们的example.com网站,这将使我们的服务能够返回带有正确元标记的HTML页面.
>为了生成元标记的内容,我们的可共享链接必须具有查询参数以传递所有信息以填充我们的元标记.例如,我们的可共享链接如下所示：sharing.example.com/post/my-post?title=my-title\u0026amp;desc=my-description.这意味着我们的可共享链接可能会很长.您可以看到我们如何从查询参数中提取信息,并使用元标记将其注入我们的HTML模板：https://github.com/mapseed/sharing/blob/master/share.js#L18-L27

如果这些限制是可以接受的,那么这个解决方案效果很好.请注意,SEO也存在缺点,因为将要共享的链接来自sharing.example.com,而不是我们的example.com网站.

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