Dynamische OG-afbeeldingen voor SaaS

Dynamische OG-afbeeldingen voor SaaS zijn per-pagina social previews die automatisch worden gegenereerd wanneer je dashboard, documentatie, changelog of gebruikersgerichte routes worden gedeeld. FastOG rendert elke afbeelding op aanvraag en cached deze, zodat een SaaS elke pagina een unieke branded card kan geven zonder handmatig ontwerpwerk.

Waarom SaaS dynamische OG-afbeeldingen nodig heeft

SaaS-producten hebben veel deelbare oppervlakken — productpagina's, documentatiepagina's, changelog-items, openbare gebruikersprofielen en prestatiekaarten. Elk item dat op X of LinkedIn wordt gedeeld, profiteert van een eigen kaart in plaats van een enkele logo-fallback. Deze handmatig genereren schaalt niet; ze genereren op het moment van renderen wel.

Het kernpatroon

Voor elke pagina waarvoor je een kaart wilt, onderteken je een URL met de titel van de pagina (en eventuele paginaspecifieke velden) op het moment van renderen. FastOG rendert de PNG bij de eerste ophaalbeurt en Cloudflare cachet deze.

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

Goede SaaS-use cases

Oppervlak	Template-ideeën
Product- / marketingpagina's	`company`, `hero`, `product`
Documentatiepagina's	`default`, `devtool`
Changelog-items	`changelog`, `launch`
Openbare gebruikers- / avatarkaarten	`testimonial`, `stats`, `image-right`
Prijspagina's	`pricing`, `stats`

FAQ

Heb ik een template nodig per gebruikssituatie?

Nee. Eén template plus de URL-velden die je doorgeeft is meestal voldoende; een paar templates dekken de rest. Alle templates renderen op 1200×630.

Hoe ga ik om met veel pagina's zonder mijn quota te verbruiken?

Identieke URL's worden na de eerste render voor onbepaalde tijd edge-cached, dus dezelfde pagina die 1.000 keer wordt gedeeld, telt als 1 render. Bij inhoudswijzigingen ontstaat gewoon een nieuwe URL.

Kan ik kaarten voorzien van mijn SaaS-identiteit?

Ja — stel brand_name, brand_logo, bg_color, lettertypen en patronen per URL in. Zie de playground om templates live te bekijken.

Probeer het gratis — geen aanmelding vereist

Bekijk en test dynamische OG-afbeeldingen in seconden.

Open de gratis OG-afbeeldingstester

Onderwerp