Canada Dataset

如果您在 Twitter 上花了一些时间，您会注意到大多数链接都附有某种图像。例如，这是 Netlify 的一条推文：

品牌 OG 图像

看看那张漂亮的、符合品牌形象的图片，它在每个人的 Twitter 信息流中都脱颖而出！这张图片的显示得益于Open Graph 协议，该协议允许网页宣布应在 URL 旁边显示什么图片。和几乎所有其他平台都将 Open Graph 协议视为近乎通用的标准。

设置 Open Graph 图像（OG 图像）非常简单，您只需添加meta指向正确图像的标签即可。以下是上述推文中的标签：

如果您只在每个页面上创建一张图片，那么这很容易做到。您可以上传图片，然后从 HTML 中引用它，没有问题。

但有时，你会想将许多不同的 OG 图像附加到同一个链接。这样，每次社交分享都会显示一张独特的图像，但所有链接仍然指向单个页面。这听起来可能很奇怪，但在适当的情况下，它可以创造一种真正引人注目、可分享的体验。

最近，我们 ( Tuple ) 发起了一项活动，让OSS 开发人员休假。作为此过程的一部分，我们征集了社区的提名和投票，以帮助我们发现那些我们不知道的人。

访客投票后，他们有机会在 Twitter 上分享他们的投票，并可以预览 巴哈马 Whatsapp 数据 为他们专门创建的自定义图像。根据他们的投票，他们可能会看到以下内容：

元组预览

许多人接受了我们的建议，这在 上产生了相当大的影响：


在几天的时间里，我们使用Netlify Functions生成并提供了数千个自定义开放图形图像。

让我们看看我们是如何做到的，但更重要的是，看看您也可以如何做到！

基本思路是使用Puppeteer启动 Google Chrome，加载一些 HTML，截取页面截图并将其作为图像返回。我们将在 Netlify 函数中完成所有这些操作，这样我们就不必担心自己托管或扩展它了。

文档非常有用，因此请务必查看它们。