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 |
常見問題
每個使用情境都需要一個範本嗎？
不需要。通常一個範本加上您傳入的 URL 欄位就已足夠；其餘情境用兩三個範本即可涵蓋。所有範本皆以 1200×630 尺寸呈現。
如何處理大量頁面而不耗盡配額？
相同的 URL 在首次渲染後會永久快取於邊緣節點，因此同一頁面被分享 1,000 次只計 1 次渲染。內容變更時，只需產生新的 URL 即可。
我可以用我的 SaaS 品牌形象來打造卡片嗎？
可以 — 請在每個 URL 中設定 brand_name、brand_logo、bg_color、字型與圖案。請參閱遊樂場即時預覽範本。