SaaS向けダイナミックOG画像
SaaS向けダイナミックOG画像とは、ダッシュボード、ドキュメント、チェンジログ、ユーザー向けルートが共有される際に自動生成される、ページごとのソーシャルプレビューです。FastOGは各画像をオンデマンドでレンダリングしてキャッシュするため、SaaSは手動でのデザイン作業なしに、すべてのページに独自のブランドカードを提供できます。
SaaSに動的OG画像が必要な理由
SaaS製品には、製品ページ、ドキュメントページ、チェンジログのエントリ、公開ユーザープロフィール、達成カードなど、共有可能な多くの領域があります。それぞれがXやLinkedInで共有される際、単一のロゴのフォールバックではなく、独自のカードがあると効果的です。これらを手動で生成するのはスケールしません。レンダリング時に生成することでスケールします。
コアパターン
カードを表示したい各ページについて、レンダリング時にページのタイトル（およびページ固有のフィールド）を含むURLに署名します。FastOGは最初のフェッチ時にPNGをレンダリングし、Cloudflareがそれをキャッシュします。
tsx
// Next.js — app/docs/[slug]/page.tsx
export function generateMetadata({ params }) {
const doc = await getDoc(params.slug);
return {
openGraph: {
images: [generateOgImageUrl({
template: "default", // or "devtool", "launch", "company"
title: doc.title,
subtitle: doc.excerpt,
domain: "yoursaas.com",
})],
},
};
}
SaaS での優れたユースケース
| 画面 | テンプレートのアイデア |
|---|---|
| プロダクト／マーケティングページ | company、hero、product |
| ドキュメントページ | default、devtool |
| チェンジログのエントリ | changelog、launch |
| 公開ユーザー／アバターカード | testimonial、stats、image-right |
| 料金ページ | pricing、stats |
FAQ
ユースケースごとにテンプレートは必要ですか？
いいえ。1つのテンプレートと、渡すURLフィールドで通常は十分です。あとは数個のテンプレートで対応できます。すべて1200×630でレンダリングされます。
クォータを消費せずに多数のページを処理するにはどうすればよいですか？
同一のURLは初回レンダリング後、エッジキャッシュに永続的に保存されます。そのため、同じページが1,000回共有されても、レンダリングは1回としてカウントされます。コンテンツが変われば、新しいURLが生成されるだけです。
SaaSのアイデンティティでカードをブランディングできますか？
はい。brand_name、brand_logo、bg_color、フォント、パターンをURLごとに設定できます。テンプレートをライブでプレビューするには、プレイグラウンドを参照してください。