Satori
JSX と CSS を SVG に変換する Vercel のオープンソースライブラリ——動的な Open Graph 画像を支えるエンジン
Satori は、JSX と CSS のサブセットを SVG にレンダリングする Vercel 製のオープンソースライブラリです。出力した SVG は PNG に変換して使います。Vercel の Open Graph 画像生成や Next.js の ImageResponse の内部で動いているのがこの Satori なので、ソーシャルカードを生成している人の多くは名前を意識せずに使っています。創業者にとっては、流通まわりの狭い課題をきちんと解いてくれる道具です。自分が共有するリンクにも、他人が共有するリンクにもプレビュー画像が付いてまわる——その画像を、1ページずつ手で作る代わりに自分のデータから生成できるようにしてくれます。
Satori とは何か
Satori（github.com/vercel/satori）は、JSX 要素を受け取って SVG 文字列を返します。TypeScript で書かれ、ライセンスは MPL-2.0 です。素の要素ツリーとバッファ形式のフォントを渡すと、React Native と同じフレックスボックスエンジンである Yoga でレイアウトを計算し、PNG に変換できるベクター出力を返します。ブラウザ、Node 16 以上、Web Worker のいずれでも動作し、依存する WebAssembly はライブラリ内に同梱されています。
これは意図的にブラウザではなく、その制約こそが要点です。JSX は純粋かつ状態を持たない必要があり、React のフックも dangerouslySetInnerHTML も使えません。style タグも外部スタイルシートもスクリプトもなく、スタイルはすべてインラインです。CSS のサポートは文書化されたサブセットで、`display` の既定値は `flex`、受け付けるのは `flex`・`contents`・`none` のみ。そして出力がブラウザとピクセル単位で一致することは約束しない、とプロジェクト自身が明言しています。多くの人はライブラリを直接触りません。`next/og` や Vercel の OG 画像生成を経由して使うからで、これらはラスタライザと HTTP レスポンスで Satori を包んだものです。og-playground.vercel.app にライブのプレイグラウンドもあり、そのレイアウトが表現可能かを確かめる最短の方法になります。
プレビュー画像が本当に効く場所
ソーシャルカードは、リンクに自動で付いてまわる唯一のクリエイティブです。どこに出るかは選べませんし、最も効く面ほど自分からは見えません。
- 非公開の共有 Slack や WhatsApp、DM に貼られたリンクはカードとして展開され、そのカードが、あなたを知らない相手にとっての提案のすべてになります。この流入はリファラーを持たないため Direct に落ちます。ダークソーシャルの空白そのものであり、つまりカードは、あなたが一生アトリビューションで見ることのない仕事をしています。
- サイト単位ではなくページ単位 ドメイン全体で手作りのカードが1枚だと、どのページもフィード上で同じ見た目になります。生成すれば、比較ページ、更新履歴、ドキュメントがそれぞれ自分のタイトルを掲げられます。「あるウェブサイト」と言うリンクと、「あなたが求めた答え」と言うリンクの違いです。
- プログラマティックなページ テンプレート化したページを少しでも量産しているなら——プログラマティック SEO、ディレクトリ掲載、連携先ごとのランディングページ——カードを手で作るのは30ページあたりで破綻します。大量のページ群に耐えられるのは生成する方式だけです。
上限についても正直でいるべきです。`og:image` は順位のシグナルではありませんし、誰も共有したがらないページをカードが救うことはありません。効くのは、すでに起きるはずだった共有のクリック率です。実在するが限定的な効果であり、新しいチャネルというより、良いタイトルタグに近い大きさだと考えてください。
自社のカードを公開して学んだこと
私たちは AgentCeres（agentceres.com の AI グロースオフィサー）のソーシャルカードを `next/og` で生成しています。中身は Satori です。そして、カード本体より高くついたことが二つありました。一つ目は、エラーの出ないルーティングの誤りです。規約ファイルを、実際にすべてのページがぶら下がっているレイアウトより一段上のセグメントに置いていたため、画像はまったく出力されず、ルートは静かに404を返し続けました。本番環境でそれに気づいたのは2026年7月14日です。警告は一切出ません。プレビュー画像が「無い」状態は、プレビュー画像を「まだ見ていない」状態と見分けがつかず、自分のリンクをどこかに貼って裸で返ってきて初めて気づきます。カードを生成するなら、画像のルートを取得して200が返ることを確認するチェックを足してください。
二つ目は安く済みましたが、誰にでも当てはまります。Satori のレイアウト規則はブラウザの規則ではありません。私たちのカードでは、ラッパー要素すべてに明示的な `display: flex` を書き、ブランドマークは取得せずに base64 のデータ URI として埋め込み、カードはロケールごとに事前レンダリングして、クロールのたびにエッジで描画するのではなく静的なファイルにしています。どれも奇をてらったものではなく、ページ用に書くはずの CSS を書こうとするのをやめた時点で、Satori のテンプレートが自然と収束する形です。道具そのものは15分の仕事で、考える価値があるのは、あなたのリンクが他人のチャット画面に現れたとき、見知らぬ相手に何を見せるかを決める部分です。
FAQ
- Satori と @vercel/og は同じものですか？
- 違います。Satori は JSX を SVG に変換するレイアウトとレンダリングのライブラリです。@vercel/og と、next/og からエクスポートされる Next.js の ImageResponse は、その SVG を PNG に変換するラスタライザとキャッシュしやすい HTTP レスポンスで Satori を包んだものです。多くのアプリはラッパー側を使えば十分で、SVG の出力が必要な場合や Next.js の外で作業する場合に Satori を直接使います。
- 動的な Open Graph 画像は SEO に効きますか？
- 直接には効きません。og:image は順位のシグナルではなく、プレビューが美しいという理由で Google が順位を上げることはありません。効くのは流通で、カードはフィードやチャットで共有リンクがクリックされるかどうかを左右します。検索パフォーマンスではなく、共有のクリック率として評価してください。
- 主な制約は何ですか？
- CSS のサポートは文書化されたサブセットで、Yoga のフレックスボックスで解決されるため、block や grid のレイアウトはブラウザと同じようには振る舞いません。style タグや外部スタイルシートは使えず、フォントはバッファで渡す必要があり、JSX は純粋かつ状態を持たない必要があります。さらに、出力がブラウザの描画と厳密に一致することは約束しないとプロジェクトが明言しています。1枚あたりに読み込むフォントや絵文字が増えるほど、レンダリングも遅くなります。
- カードはリクエスト時に生成しなければいけませんか？
- いいえ。むしろ生成しないほうがよい場合が多いです。ビルド時にページが確定しているなら画像を事前レンダリングし、クローラーが来るたびに関数を呼ぶのではなく、キャッシュから配る静的ファイルにしてください。私たちがロケールごとに事前レンダリングしているのもこの理由です。リクエスト時の生成が正解なのは、生きた数値・ユーザー名・日付入りのレポートなど、変化するデータをカードが映す場合です。
You built it. Now grow it.
AgentCeres is a managed AI marketing team — specialists draft the SEO, social, and outreach that fill your links, you approve what ships. 14-day free trial, from $39/month.