ブログにOGP画像とサイトマップを実装した話

前回の記事ではMY-life本体の改修について書いた。今回の主役はこのブログ自身だ。X（旧Twitter）やDiscordに記事のリンクを貼ったときのカードがずっと寂しい見た目だったのと、検索エンジンにページをちゃんと見つけてもらう仕組みが手つかずだったので、その2つをまとめて片付けた。

リンクの見た目が寂しい問題

このブログの記事URLをどこかに貼ると、それまではタイトルと説明文だけの味気ないカードしか出なかった。画像1枚あるだけで開いてもらえる確率が変わってくるものなので、記事ごとに「タイトル・カテゴリ・著者」がひと目でわかる画像（OGP画像）を自動で作る仕組みが欲しくなった。

satori + resvgという組み合わせ

画像生成というとブラウザでスクリーンショットを撮る方法（favicon作業のときに使ったChrome headless方式）も浮かんだが、今回はビルド時に静的画像として焼き出したかったので方向性が違う。定番のnode-canvas系ライブラリはネイティブのCairoライブラリに依存していて、Windows環境だとビルドが通らず詰まりがちという厄介な前例がある。

代わりに選んだのがsatori（JSXっぽい記法をSVGに変換するライブラリ）と@resvg/resvg-js（そのSVGをPNGにラスタライズするライブラリ）の組み合わせだ。どちらもprebuilt binaryで動くのでWindowsでもネイティブビルドなしに済み、Cairo問題を素通りできた。

4種類のテンプレート

ページの性質によって見せたい情報が違うので、テンプレートは4種類用意した。記事ページ・トップページ・タグ一覧・シリーズ一覧で、それぞれ別デザインになっている。記事ページは「タイトル＋カテゴリバッジ＋著者色分け」を基本形にして、thumbnailが設定されている記事だけはその画像を背景に暗めのグラデーションを重ねて合成する。まだ実際にthumbnailを使った記事は出ていないので、この合成ロジックが本番でどう見えるかはこれから確認していくことになる。

フォントはサイト本体と同じZen Kaku Gothic NewとNoto Sans JP（どちらもOFLライセンス）をそのまま同梱した。見た目の統一感はここで担保している。

サイトマップもついでに

OGP画像とは別件だが、@astrojs/sitemapを入れてサイトマップも生成した。public/robots.txtを新規に作ってSitemap:の参照を書き足しただけで、検索エンジン側からクロールしやすくなる。地味な作業だが後回しにするほど損をする類の設定だと思う。

本番での確認方法

作業自体はworktreeで進めてローカルで見た目を確認したあと、mainにマージしてpushした。今回はCloudflare Pagesのデプロイが本当に成功しているかを、Cloudflare API（MCP経由）でデプロイのステージ（queued・initialize・clone_repo・build・deploy）を1つずつsuccessになっているか確認する形で見届けた。仕上げに本番URLへ直接アクセスし、robots.txt・sitemap-index.xml・生成された/og/*.png・記事ページのog:imageメタタグが200で返ってくることまで確認して完了とした。

まとめ

見た目のインパクトは地味だが、シェアされたときの第一印象と検索からの流入経路という、どちらも書いた記事を「読んでもらう」ために効いてくる部分を固めた回だった。記事を書くこと自体と同じくらい、書いた記事が実際に誰かの目に触れる経路を整えることも大事だと思う。