SaaS 的动态 OG 图片

SaaS 的动态 OG 图片是指当您的仪表盘、文档、更新日志或面向用户的路由被分享时，自动生成的每页社交预览图。FastOG 按需渲染每张图片并进行缓存，因此 SaaS 可以为每个页面提供独特的品牌卡片，而无需任何手动设计工作。

为什么 SaaS 需要动态 OG 图片

SaaS 产品有许多可分享的界面——产品页面、文档页面、更新日志条目、公开用户资料和成就卡片。在 X 或 LinkedIn 上分享的每一个界面，都应有自己的卡片，而不是单一的 Logo 兜底方案。手动生成这些图片无法扩展；在渲染时生成则可以。

核心模式

对于每个你想要生成卡片的页面，在渲染时使用页面标题（以及任何页面专属字段）对 URL 进行签名。FastOG 在首次获取时渲染 PNG，并由 Cloudflare 进行缓存。

// 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 的使用场景

常见问题

每个用例都需要一个模板吗？

不需要。通常一个模板加上您传入的 URL 字段就足够了；再准备几个模板即可覆盖其余场景。所有模板均以 1200×630 尺寸渲染。

如何在不消耗配额的情况下处理大量页面？

相同的 URL 在首次渲染后会被永久边缘缓存，因此同一页面被分享 1,000 次只计为 1 次渲染。内容变更只需生成新的 URL 即可。

能否用我的 SaaS 品牌标识来定制卡片？

可以——通过设置 brand_name、brand_logo、bg_color、字体和图案，按 URL 进行定制。请参阅在线演示实时预览模板。

相关链接

• API 参考
• SDK — 下载与使用
• 大规模 OG 图片
• 签名 OG 图片 URL