AstroでOGP画像を作成する際の参考情報

2023/09/16(土)

Astroのブログで、Integrationsを使ってOGP画像を作成するようにした。

全て解説する記事を書こうと思ったが、他にやりたいことがたくさんあるので断念。参考にしたURLのメモだけと差分だけ残しておく。

Server Endpoints (API Routes)
- 今回は、ブログ記事のURLの後ろに/opg.pngを付けるとOGP画像を返すようにした。
Astro Integration API
- integrationを自作する場合は、astro:build:generated を使うと良さそう。
- 途中までこちらを使って実装するつもりだったが、src/contents配下のMarkdownファイルで設定した変数（画像パス）がどうしても取得できなかったので諦めた。

satori はHTML/CSSをSVGに変換するライブラリ。
OGP画像作成で検索するとかなりの確率で利用されている。今回も使ってみた。

sharp は画像処理ライブラリ。

今回はWebP→PNG使用した。
satoriがWebPをサポートしておらず、WebPのまま表示しようとすると Unsupported image type: unknown のエラーになってしまうため。 https://github.com/vercel/satori/blob/c47e1a91b80887de22c01a5e0fac350b4978aa1d/src/handler/image.ts#L136

resvg-js はSVGをPNGに変換するライブラリ。

satoriではフォントを指定する必要がある。上記フォントはOFL1.1でライセンスされているので、利用しやすい。