Dynamické OG obrázky pro SaaS

Dynamické OG obrázky pro SaaS jsou sociální náhledy (social previews) generované automaticky pro každou stránku, když se sdílí váš dashboard, dokumentace, changelog nebo uživatelské trasy. FastOG každý z nich vykreslí na vyžádání a uloží do mezipaměti, takže SaaS může dát každé stránce unikátní značkovou kartu bez jakékoli ruční návrhářské práce.

Proč SaaS potřebuje dynamické OG obrázky

SaaS produkty mají mnoho sdílitelných ploch – stránky produktů, dokumentace, záznamy v changelogu, veřejné uživatelské profily a karty úspěchů. Každá z nich sdílená na X nebo LinkedInu těží z vlastní karty místo jediného loga jako záložního řešení. Generovat je ručně se neškáluje; generovat je při renderování ano.

Základní vzor

Pro každou stránku, pro kterou chceš kartu, podepiš URL s názvem stránky (a případnými poli specifickými pro danou stránku) při renderování. FastOG vykreslí PNG při prvním načtení a Cloudflare ji uloží do mezipaměti.

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",
            })],
        },
    };
}

Dobré případy použití pro SaaS

Plocha	Nápady na šablony
Produktové / marketingové stránky	`company`, `hero`, `product`
Stránky dokumentace	`default`, `devtool`
Záznamy v changelogu	`changelog`, `launch`
Veřejné uživatelské / avatarové karty	`testimonial`, `stats`, `image-right`
Stránky s cenami	`pricing`, `stats`

FAQ

Potřebuji šablonu pro každý případ použití?

Ne. Obvykle stačí jedna šablona plus pole URL, která předáváte; pár šablon pokryje zbytek. Vše se renderuje v rozlišení 1200×630.

Jak zvládnu mnoho stránek, aniž bych vyčerpal kvótu?

Identické URL jsou po prvním renderu trvale uloženy v edge cache, takže stejná stránka sdílená 1 000krát se počítá jako 1 render. Změna obsahu prostě vytvoří novou URL.

Mohu karty označit svou SaaS identitou?

Ano — nastavte brand_name, brand_logo, bg_color, fonty a vzory pro každou URL. Živý náhled šablon si prohlédněte v playgroundu.

Vyzkoušejte zdarma – bez registrace

Náhled a testování dynamických OG obrázků během pár sekund.

Otevřít bezplatný tester OG obrázků

Téma