如何在静态站点上动态呈现社交分享按钮的元标签

How to dynamically render meta tags for social share button on a static site?

本文关键字：分享 按钮 标签 静态 站点 动态      更新时间：2023-09-26

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

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

我还没有找到一个合适的解决方案来解决这个问题，但我确实提出了一个解决方法/hack，包括设置一个单独的服务。下面是我想到的服务: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头，就像我们在这里所做的那样，那么我们返回一个只包含元标签的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

如果这些限制是可以接受的，那么这个解决方案工作得很好。请注意，这对SEO也有不利的一面，因为将被分享的链接来自sharing.example.com，而不是我们的example.com网站。

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

相关文章：