satoriとsharpで記事ごとにog:imageを生成する

はじめに

satori と sharp を使用して記事ページごとのog:image画像を作成する。

手順

インストール

satori sharp をインストール。
Reactのインテグレーションも行う。

画像ファイルのエンドポイントを作成

src/pages/og/[slug].png.ts

画像を生成

src/components/OgImage.tsx

HTML/CSSをsatoriでSVGへ書き出し、sharpでPNGに変換。
Vercel OG Image Playground などを使うと便利かも。

画像指定の変更

og:image や twitter:image のパス指定を変更する。

結果

この記事のog:imageは次のようになる。

ひとこと

• 背景画像を用意して下に敷いたほうがよいデザインの場合もある
• フォントの指定はWebフォント or ローカルに置いたものを指定する
• -webkit-line-clamp での行数制限がうまく効かなかったため、文字数で切り取っている