OG-kuvat tuotesivuille

Tuotesivun OG-kuva on sosiaalisen median esikatselu, joka näyttää tuotteen nimen, hinnan ja pikkukuvan, kun sivu jaetaan. FastOG renderöi sen dynaamisesti kokoon 1200×630 ja välimuistittaa sen reunassa, joten jokainen tuote saa brändätyn kortin ilman, että suunnittelijan tarvitsee koskea mallipohjaan.

Miksi verkkokaupan tuotesivut tarvitsevat dynaamisia OG-kuvia

Kun asiakas jakaa tuotelinkin WhatsAppissa, Slackissa tai Discordissa, esikatselukortti on minimainos. Kortti, jossa näkyvät tuotteen oikea nimi, hinta ja arviointi, toimii huomattavasti paremmin kuin kaupan yleinen logokuva. Jokaisen tuotteen kortin rakentaminen käsin ei skaalaudu — juuri sitä varten API on olemassa.

Tuotteen OG-kuvan luominen

Allekirjoita URL-osoite käyttäen template=ecommerce, tuotteen nimeä, hintaa, arvosanaa ja kuvan URL-osoitetta. API renderöi kortin pyynnöstä ja tallentaa sen välimuistiin.

tsx

// Next.js — app/products/[slug]/page.tsx
export function generateMetadata({ params }) {
    const product = await getProduct(params.slug);
    return {
        openGraph: {
            images: [generateOgImageUrl({
                template: "ecommerce",      // product card
                title: product.name,
                subtitle: product.tagline,  // optional
                price: product.price,       // e.g. "$29.99"
                rating: product.rating,     // e.g. "4.9"
                image: product.imageUrl,    // product photo
            })],
        },
    };
}

Verkkokaupan mallipohjan kentät

Kenttä	Mitä se näyttää	Valinnainen?
`title`	Tuotteen nimi (otsikko)	Pakollinen
`subtitle`	Iskulause tai kategoria	Valinnainen
`price`	Hintalappu, esim. `$29.99`	Valinnainen
`rating`	Arvosteluluokitus, esim. `4.9`	Valinnainen
`image`	Tuotekuvan / avatarin URL	Valinnainen

FAQ

Lataako FastOG tuotekuvani korttiin?

Kyllä. Anna tuotteen kuvan URL image-parametrissa, niin verkkokauppamalli (ecommerce template) sisällyttää sen korttiin.

Näkyykö hinta reaaliaikaisesti ja onko se muokattavissa?

Hinta on se, minkä välität allekirjoitushetkellä. Muuta hintaa → muuta URL → yksi uusi renderöinti.

Entä alennus-/tarjoushinnat?

Välitä nykyinen hinta price-parametrina. Jotkut myyjät päivittävät kortin, kun tarjous muuttuu, jotta jaettu esikatselu näyttää voimassa olevan hinnan.

Kokeile ilmaiseksi — ei vaadi rekisteröitymistä

Esikatsele ja testaa dynaamisia OG-kuvia sekunneissa.

Avaa ilmainen OG-kuvien testaaja

Aihe