ryokatsu.dev satoriでOGP生成するようにした with Astro
今までcloudinaryのストレージに加工した画像をURLで指定して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で行いました。
参照