ryokatsu.dev

satoriでOGP生成するようにした with Astro

今までcloudinaryのストレージに加工した画像をURLで指定してOGPを出すようにしていました。

解像度を上げるの記事のOGPイメージ

割りといい感じに調整できるので、良かったのですが、だいぶ前に登場したsatoriが気になっていたので今回移行しました。

satoriは、HTMLとCSSで書いたビューを、SVGに変換するライブラリです。JSXをサポートしているので、Reactコンポーネントのように書けます。

手順はこんな感じでした。

  • @astrojs/reactと@resvg/resvg-jsそしてsatoriをインストール
  • OGPで表現したいビューのコンポーネントをReactのコンポーネントで作成
  • OGPのエンドポイントになる[slug].png.tsを作成する
  • OGの設定を変更

  • satoriで使えるCSSは限られているようでした。（React Nativeと同じFlexboxのレイアウトエンジンであるYogaが使われている）

  • ただ、ほとんど使えるのでogp用途であれば問題ない

  • Tailwindが使えなかったので普通にstyleタグで書きました。（ドキュメント参考）

  • 今回Google Fontsを使用してみました。

    • IBM Plex Sans JPを使用しました。
    • 和文フォントだけど太字がつぶれにくい！
    • なんとなくこれにしたけど変えるかもしれません。

  • エンドポイントで実際に記事のタイトルを呼び出すときにエラーが出た。

  • 渡しているslugが「2023/07/30」のような値のためにslugの正規表現ではじかれてしまう。。

  • 仕方ないのでpost.slug.replace(/\//g, '-') }で対応した。

ローカルホストでOGPの表示確認をするときは、Localhost Open Graph Debuggerで行いました。

参照