零成本生成 OG 图片
你无需支付 API 费用，即可为数百篇文章生成 OG 图片。
我使用 Playwright 对 HTML 模板进行截图。它能让你完全控制 CSS，且不需要任何外部密钥。
如果你运行的是静态网站，这是处理批量图片生成的最佳方式。
以下是我方法的详细分解。
为什么我选择 Playwright 而不是其他方案：
- Cloudinary：自定义字体需要付费，且 URL 语法复杂。
- Vercel OG：适用于动态网站，但我使用的是 Cloudflare 上的静态网站。
- Node-canvas：由于 C++ 依赖项，在 CI 中很难配置。
- Pillow：难以处理复杂的 CSS 布局或 flexbox。
Playwright 方法非常简单。我构建一个带有 CSS 的 HTML 字符串，将其传递给无头浏览器，然后进行截图。
浏览器会处理一切：字体、渐变和 flexbox。
关键技术细节：
- 强调色：我的脚本使用正则表达式根据文章标签来选择颜色。“AI”标签选择紫色，“Webdev”标签选择蓝色。
- 动态尺寸：脚本根据标题长度调整字体大小，以防止溢出。
- 避免字体问题：我使用
wait_until="networkidle"。这能确保在截图触发前 Google Fonts 已加载完成。如果没有这一步，图片会使用通用的系统字体。 - 速度优化：我只打开一个浏览器实例，并为所有文章复用 page 对象。这在 CI 流水线中节省了大量时间。
工作流程：
- 脚本生成 PNG。
- 脚本将图片 URL 写回文章的 frontmatter 中。
- CI 流水线提交图片。
- 网站部署。
这确保了在文章发布到 Dev.to 或 Hashnode 等平台之前，图片已经可以正常访问。
何时应避免使用此方法：
不要将其用于即时（on-demand）生成。Playwright 生成每张图片大约需要 2 秒，且需要庞大的浏览器二进制文件。对于实时请求来说，它太慢了。
请将其用于你可以控制时间的批量构建场景。