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

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

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

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

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

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

---

其他相关信息：

这个答案似乎很有趣，其中包括激活Facebook Javascript SDK：

我知道Twitter的卡片验证程序和Facebooks共享调试器等工具，如下所示： 这将有助于测试任何解决方案

---

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

我还没有找到解决这个问题的正确方法，但我确实想出了一个解决方法/技巧，包括设置一个单独的服务。以下是我提供的服务：

如果我们的静态站点托管在

example.com

，我们可以启动运行在

sharing.example.com

的服务器，该服务器接受请求，并将请求从

sharing.example.com/my/route

重定向到

example.com/my/route

。但是，如果请求具有与社交媒体爬虫匹配的

user-agent

HTTP头，那么我们将返回一个只包含meta标记的html页面，正如我们所做的那样

然而，这种方法有几个限制：

• 我们想在社交媒体上共享的链接需要指向我们的

  sharing.example.com

  子域。这将使我们的服务能够在请求来自社交媒体机器人时返回带有适当元标记的HTML页面，或者将请求重定向到我们的

  example.com

  网站

• 为了生成元标记的内容，我们的可共享链接必须有查询参数来传递所有信息以填充元标记。例如，我们的可共享链接如下：

  sharing.example.com/post/my post？title=my title&desc=my description

  。这意味着我们的共享链接可能会变得很长。您可以看到我们如何从查询参数中提取信息，并使用meta标记将其插入HTML模板：

如果这些限制是可以接受的，那么这个解决方案工作得很好。请注意，SEO还有一个缺点，因为将共享的链接来自

sharing.example.com

，而不是我们的

example.com

网站

---

此外，我们还必须启动一个额外的服务器来运行此服务。尽管我们应该能够将此实现迁移到无服务器体系结构中，如AWS Lambda。

您好，我面临着完全相同的问题。我有一个静态托管在S3内置的Vue上。它的工作需要在facebook和linkedin上共享。这些共享链接必须有工作名称、公司名称和公司徽标。我无法将这些数据注入元标记。您解决了这个问题吗？@HaseebBurki除了预渲染，或者迁移到服务器端渲染之外，我认为这是不可能的。我确实提出了一个如下所述的破解/解决方案，但它也有缺点。这是一个很好的解决方案。然而，它需要太多的工作，并且仅仅为了这一项任务而启动新服务器的成本不会受到我的客户的欢迎。我尝试实现Lambda函数，以便无论何时访问特定url，我们都可以从url获取资源id，从api提取数据，将其注入html并作为响应返回。我对AWS Lambda没有太多经验，因此无法使其正常工作。我现在正在研究另一个解决方案。如果行得通，我会告诉你，否则我可能也得按你的方式做。谢谢谢洛。最后，我预呈现了HTML文件，除了元标记和一点javascript之外，什么都没有，可以将用户重定向到正确的链接。甚至我也有一个使用typescript在reactjs中开发的web应用程序。我仍然没有找到解决这个问题的办法。你能告诉我你是怎么做的吗？我也发布了一个关于它的问题