自动社交分享图片

在社交媒体上获得一个大型精美链接预览是一件非常轻松的事情。在 URL 上添加一些特定的 <meta> 标签，您就会获得一个大型图片标题描述。以下是 Twitter 上关于本网站文章的版本

在本网站上，这尤其容易，因为我们的 Yoast SEO 插件 会自动添加正确的标签。它默认使用的图片是 WordPress 的“特色图片”功能，我们一直在使用它。

我喜欢这种改进，因为它只需要做很少的工作。Jetpack 可以帮助这个过程，因为它可以自动执行某些操作。

但是，假设您没有使用这些特定的工具。也许您甚至不想为每篇博客文章创建一张图片，但您仍然希望社交媒体预览中显示一些不错的内容。

我们之前已经讨论过这个问题。 您可以使用 HTML 和 CSS 来设计“图片”，使用您已经从博客文章中获取的内容和元数据。您可以使用 Puppeteer （或 类似工具）将其转换为图片，然后将其用作元标签中的图片。

Ryan Filler 对这个过程进行了详细说明，这是我目前见过的最好的。

1. 在您的网站上创建一个路由，它可以从 URL 中获取动态数据以创建布局
2. 创建一个云函数，它可以访问该路由，将其转换为图片，并将其上传到 Cloudinary（用于优化和提供服务）
3. 每次请求图片时，检查您是否已经创建了它。如果是，则从 Cloudinary 提供服务；如果不是，则创建它，然后提供服务。

这些东西让我的大脑兴奋起来。如果我们根本不需要创建光栅图像怎么办？

也许我们可以使用 SVG，而不是创建光栅图像。SVG 很容易模板化，我们知道 <img src="file.svg" alt="" /> 功能非常强大。但是，Twitter 表示

图片大小必须小于 5MB。支持 JPG、PNG、WEBP 和 GIF 格式。仅使用动画 GIF 的第一帧。不支持 SVG。

Twitter，五十个悲伤的表情。但让我们继续这个思想实验。

我们需要光栅图像。<canvas> 元素可以 输出 PNG。如果与您通信的云函数是一个真正的浏览器呢？Richard Young 去年称之为 “浏览器函数”。也许云中的浏览器可以执行我们梦寐以求的 SVG 模板化，但随后 将其绘制到画布上 并输出 PNG。

嗯，我不确定这是否解决了任何问题，因为您仍然需要 Puppeteer 依赖项，而且，如果有什么不同的话，这只会使您创建图片的方式更加复杂。不过，我觉得能够在服务器级别使用本机浏览器功能还是很有吸引力的。

直接链接 →