部署动态生成 OG Image 的 API
内容提要
文章介绍如何使用 @vercel/og 在 Vercel 上部署动态生成 OG Image 的 API。由于官方服务不支持中文，作者用 Next.js 搭建应用，准备背景图和中文字体，本地调试后部署。免费套餐限制为 1M，需用 font-spider 按标题字符压缩字体。作者后来改为手动生成。
延伸解读
免费套餐的 1M 限制是核心约束
Vercel 免费套餐的 Edge 应用最大只支持 1M，而最小的中文字体也远超这个体积。这意味着直接上传完整中文字体不可行，必须通过 font-spider 等工具按标题实际用到的字符提取子集，才能把字体压缩到限制以内。背景图也需尽量缩小并转成 base64 以进一步压缩体积。
官方服务不支持中文，自建是替代方案
Vercel 官方提供的 @vercel/og 服务虽然开箱即用，但不支持中文，因此作者用 Next.js 搭建应用并部署到 Vercel，通过 /api/og?title= 参数动态生成图片。文章也提到 Cloudflare Pages 有官方插件，但作者未研究，读者若有需要可自行探索。
作者最终改为手动生成，动态方案并非必需
文章开头即标注 Deprecated，作者后来改为手动生成 OG Image，并使用 cover-paint 工具。对于年更博客这类更新频率极低的场景，动态生成 API 的维护成本可能高于收益。读者在决定是否部署前，应先评估自己的内容更新频率和实际需求。
Q&A
Vercel 官方的 OG Image 生成服务有什么主要缺陷？
Vercel 官方提供的 @vercel/og 服务不支持中文，这是作者自己搭建应用的主要原因。
如何解决 Vercel 免费套餐 1M 大小限制导致中文字体无法使用的问题？
可以使用 font-spider 等工具，仅提取博客标题中用到的字符来压缩字体体积，从而将字体文件减小到 1M 以下。
部署动态 OG Image API 需要准备哪些素材？
需要准备一张 1200x630 分辨率的背景图（建议转换为 base64 以减小体积）和 .ttf 格式的字体文件，并注意字体许可证。
在本地调试动态 OG Image API 的具体步骤是什么？
先 Fork 并克隆仓库，运行 npm install 和 npm run dev，然后在浏览器访问 http://localhost:3000/api/og?title= 即可预览效果。
如何将动态 OG Image API 部署到 Vercel？
在 Vercel 控制台导入 Git 仓库，Framework Preset 选择 Next.js，点击 Deploy 等待部署完成，之后通过“域名 + /api/og?title= + 内容”调用。
作者现在还在使用动态生成的 OG Image 吗？
作者已经改为手动生成 OG Image，使用工具 https://cover.eallion.com，因为博客年更，动态生成不再必要。
