このブログのOpen Graph画像はどうやって生成してるのか

に投稿

に更新


https://og-generator.vercel.app/api/UNKO/2021-01-01/og.png

上記のような URL にアクセスすると瞬時に下の画像が生成される

仕組み

  • Vercel のServerless Functionspuppeteer-coreを使用しChromeをヘッドレスで操作して、OG 画像のベースとなる HTML を読み込んでスクリーンショットしたものを返してるだけです。
  • vercel/og-imageを見て、Serverless Functions上で Chrome をヘッドレスで使えることを知ったので、このような形にしてみました。

日本語が文字化けする問題

調べて見ると 2017 年の 7 月からこの問題が上がっているが、未だに解決されていないっぽい(Include Chinese/Japanese/Korean/more fonts in headless Chrome binary)

しかしこれは、日本語に対応したフォント(Noto Sans JPSource Code Pro)を読み込ませるようにして、このコードでフォントが全て読み込まれるのを待機させた後にスクリーンショットを撮れば見事解決できた。

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap"
rel="stylesheet"
/>
font-family: 'Noto Sans JP', 'Source Code Pro', Arial, Helvetica, sans-serif;