前言#
Deprecated：我現在已經手動生成 OG Image 了。
Vercel 官方有提供 @vercel/og 這個包，可以生成 OG Image（The Open Graph protocol），有直接可用的 API https://og-playground.vercel.app 調用方式為：https://og-image.vercel.app/eallion.png 但是有個很大的問題，不支持中文。再加上「得意黑」字體當時剛發布，很適合做標題，我就利用 @vercel/og 糊了一個 Next.js 的應用，部署到 Vercel，調用方式為：https://og.eallion.com/api/og?title=蜗牛 後來換成「思源宋體」了。不過如前文所說，我現在已經手動生成 OG Image 了，畢竟年更博客。
注意#
🚨 注意：Vercel 免費套餐的 Edge 應用最大只支持 1M，而最小的中文字體就遠遠不止 1M。
不過後文有介紹僅提取用到的字符，壓縮字體體積的方法，方法總比困難多，連搖一搖打開淘寶都能想出來，還有什麼是不能實現的呢。
另外：Vercel 官方有文檔，介紹得非常詳細，不像我胡言亂語，連我這種門外漢都可以照著官方文檔糊個應用出來，何況現在還有 ChatGPT 了，還是建議看官方文檔：
Cloudflare Pages 也有官方插件，但是我沒有研究過：
教程#
1. 準備#
背景圖：需要準備一張 1200x630 分辨率的背景圖，當然是體積越小越好，始終要想到最大只有 1M，然後把圖片轉換成 base64：https://base64.guru/converter/encode/image 這可以進一步壓縮體積。字體：準備.ttf字體文件，我試過 Google fonts 在線字體，但在當時不能用，還要注意 Licence。
2. 本地調試#
Fork GitHub 倉庫：https://github.com/eallion/vercel.og
Fork 後克隆自己的倉庫到本地，安裝依賴：
git clone https://github.com/XXXXXXX/vercel.og # XXXXXXX is your GitHub username
cd vercel.og
npm insatll --save
npm run dev
然後在瀏覽器打開 http://localhost:3000/api/og?title= 就能看到效果了。
自定義修改 pages/api/og.tsx 如下幾個地方：
字體路徑：pages/api/og.tsx#L11默認 Title：pages/api/og.tsx#L21 沒有傳值時的缺省值背景圖：pages/api/og.tsx#L53大標題：pages/api/og.tsx#L81Author：pages/api/og.tsx#L108字體：pages/api/og.tsx#L116-L120
其他自定義的地方可自行修改，這是一個 Next.js 應用。
3. 壓縮字體#
壓縮字體的思路就是利用工具只提取博客標題使用到的字符，這大大減少了字體的體積。
提取標題使用到的字符，我用到的是 aui/font-spider 這個工具，按照工具的文檔就能很方便的處理了。
基於這個工具，我用的是 eallion/font-spider-smiley-opengraph，是利用自己博客的 摘要文件 來提取 Title 的，這只是一種提取字符集的思路。希望有更好的方式，一起探討。
把壓縮後的 .ttf 字體文件複製到 public/ 目錄。
PS：修改完，記得 push 到 GitHub 倉庫。
4. Vercel 部署#
到 Vercel 控制台，選擇 Add New Project Import Git Repository 選擇自己倉庫的 vercel.og 然後 Import，Framework Preset 要選擇 Next.js，然後點擊 Deploy 等待部署完成。
部署成功後，打開 “域名 + /api/og?title= + 內容” 就可以使用了，API path 是 /api/og。
完整 API： https://og.eallion.vercel.app/api/og?title=
對於部分地區，可能需要綁定一個域名才能訪問。
其他#
我現在手動生成 OG Image 的工具是：https://cover.eallion.com
來自：youngle316/cover-paint