watabegg.github.ioで遊ぶ | OGP画像自動生成機能の実装

経緯

OGP画像、概念自体はそこそこ知ってましたが、ZennとかQiita,noteでOGP画像、サムネ画像が自動生成されているのを見て、「これ将来的に自分のアプリでやりたい！」と思って、まずは試しに個人サイトに実装してみました。

実装

AstroのOGP画像生成ですが、SVGを返すエンドポイントを用意して、ブログ記事のメタデータをもとにSVGを動的に生成する形で実装しました。具体的には、src/pages/og/blog/[slug].svg.ts にて、ブログ記事のタイトルと公開日を取得し、SVGテンプレートに埋め込んでいます。SVGを返すエンドポイントとか行けるんすね、知らんかった。

OGP画像のデザインはシンプルに保ちつつ、タイトルが長い場合でも見切れないようにテキストを分割・調整するロジックも組み込みました(Codexが)。

って思ってデプロイしたらSVGってOGP画像として認識されませんでした。ここに書いてなくてここに書いてあるの罠すぎる。なので、SVGをPNGに変換して返すエンドポイントも追加しました。resvg ライブラリを使ってSVGをPNGに変換し、OGP画像として利用できるようにしました。

あとフォントですが、Webフォントを使うとOGP画像生成時にフォントが適用されない問題があるので、ローカルにフォントファイルを配置し、resvg に読み込ませる形で対応しました。今回はGoogle FontsのNoto Sans JPを使いました。こんなこと(Webフォントを持ってくるやつ)しとぅない…

余談

実際に先に例を挙げたZenn,Qiita,noteではOGP画像生成はCloudinaryとかサーバで処理してそうですが、このサイトはGitHub Pagesだし、サーバレスで完結させたかったので、この方法を選びました。Astroの柔軟性のおかげで、こうした動的コンテンツ生成も比較的簡単に実装できて満足しています。
あいにくあんまりSVGの知識がないので、もっと凝ったデザインにしたい場合はまあ苦労しそうですが、まあいい感じです。
今は完全にZennの劣化版なのでもっとオリジナリティを出したいすね。

では次回は Part 2: ホームのGSAPアニメーション改良 を気が向いたらやります！