SaaS용 동적 OG 이미지

SaaS용 동적 OG 이미지는 대시보드, 문서, 변경 로그 또는 사용자 대상 라우트가 공유될 때 자동으로 생성되는 페이지별 소셜 미리보기입니다. FastOG는 요청 시 각 이미지를 렌더링하고 캐싱하므로, SaaS는 수동 디자인 작업 없이 모든 페이지에 고유한 브랜드 카드를 제공할 수 있습니다.

SaaS에서 동적 OG 이미지가 필요한 이유

SaaS 제품은 공유 가능한 표면이 많습니다 — 제품 페이지, 문서 페이지, 변경 로그 항목, 공개 사용자 프로필, 그리고 성과 카드 등이 있습니다. 이러한 각 항목이 X나 LinkedIn에서 공유될 때 단일 로고 대체 이미지 대신 고유한 카드가 있으면 더 효과적입니다. 이러한 이미지를 수동으로 생성하는 것은 확장성이 떨어지지만, 렌더링 시점에 생성하는 방식은 확장 가능합니다.

핵심 패턴

카드를 표시하려는 모든 페이지에 대해 렌더링 시점에 페이지 제목(및 페이지별 필드)으로 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 사용 사례

자주 묻는 질문

사용 사례마다 템플릿이 필요합니까?

아니요. 템플릿 1개와 전달하는 URL 필드만으로도 보통 충분하며, 몇 가지 템플릿으로 나머지 상황을 커버할 수 있습니다. 모든 이미지는 1200×630 크기로 렌더링됩니다.

할당량을 소진하지 않고 많은 페이지를 어떻게 처리하나요?

동일한 URL은 첫 렌더링 이후 영구적으로 에지 캐시되므로, 동일한 페이지가 1,000번 공유되더라도 렌더링 횟수는 1회로 계산됩니다. 콘텐츠가 변경되면 새로운 URL이 생성됩니다.

내 SaaS 정체성을 사용하여 카드를 브랜드화할 수 있나요?

네 — URL마다 brand_name, brand_logo, bg_color, 글꼴 및 패턴을 설정할 수 있습니다. 템플릿을 실시간으로 미리 보려면 플레이그라운드를 참조하세요.

관련 문서

• API 레퍼런스
• SDK — 다운로드 및 사용법
• 대규모 OG 이미지 생성
• 서명된 OG 이미지 URL