Dinamikus OG-képek SaaS-alkalmazásokhoz

A SaaS-alkalmazások dinamikus OG-képei oldalanként generált közösségi előnézetek (social previews), amelyek automatikusan jönnek létre, amikor az irányítópultot (dashboard), a dokumentációt, a változásnaplót (changelog) vagy a felhasználóknak szóló útvonalakat megosztják. A FastOG mindegyiket igény szerint rendereli és gyorsítótárba helyezi, így egy SaaS minden oldalhoz egyedi, márkázott kártyát adhat, manuális tervezési munka nélkül.

Miért van szüksége a SaaS-termékeknek dinamikus OG-képekre

A SaaS-termékeknek számos megosztható felülete van – termékoldalak, dokumentációs oldalak, változásnapló-bejegyzések, nyilvános felhasználói profilok és teljesítménykártyák. Mindegyiknek, amelyet X-en vagy LinkedInen osztanak meg, jót tesz a saját kártyája, nem pedig egyetlen logó-alapú tartalék. Ezeket kézzel előállítani nem skálázható; renderelési időben előállítani viszont igen.

Az alapminta

Minden olyan oldalhoz, amelyhez kártyát szeretne létrehozni, alá kell írnia egy URL-t az oldal címével (és minden oldalspecifikus mezővel) a renderelés időpontjában. A FastOG az első lekéréskor generálja a PNG-t, a Cloudflare pedig gyorsítótárazza.

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

Jó SaaS-felhasználási esetek

Felület	Sablonötletek
Termék- / marketingoldalak	`company`, `hero`, `product`
Dokumentációs oldalak	`default`, `devtool`
Változásnapló-bejegyzések	`changelog`, `launch`
Nyilvános felhasználói / avatarkártyák	`testimonial`, `stats`, `image-right`
Árazási oldalak	`pricing`, `stats`

GYIK

Szükségem van sablonra minden egyes felhasználási esethez?

Nem. Egy sablon és az Ön által átadott URL-mezők általában elegendőek; néhány sablon a többi esetet is lefedi. Mindegyik 1200×630-as méretben renderelődik.

Hogyan kezelhetek sok oldalt anélkül, hogy kimeríteném a kvótát?

Az azonos URL-ek az első renderelés után véglegesen él-cache-elve (edge-cache) vannak, így ha ugyanazt az oldalt 1 000-szer osztják meg, az 1 renderelésnek számít. A tartalomváltozások egyszerűen új URL-t eredményeznek.

Testre szabhatom a kártyákat a SaaS-arculatommal?

Igen — állítsa be a brand_name, brand_logo, bg_color értékeket, a betűtípusokat és a mintákat URL-enként. A sablonok élő előnézetéhez tekintse meg a playgroundot.

Próbáld ki ingyen – regisztráció nélkül

Tekintsd meg és teszteld a dinamikus OG képeket másodpercek alatt.

Nyisd meg az ingyenes OG kép tesztelőt

Téma