OG-képek termékoldalakhoz

A termékoldal OG-képe az a közösségi előnézet, amely a termék nevét, árát és egy bélyegképet jelenít meg, amikor az oldalt megosztják. A FastOG ezt dinamikusan, 1200×630-as méretben állítja elő, és él-cache-eli, így minden termék márkás kártyát kap anélkül, hogy egy tervezőnek sablonhoz kellene nyúlnia.

Miért van szükségük dinamikus OG-képekre az e-kereskedelmi termékoldalaknak

Amikor egy vásárló megoszt egy terméklinket a WhatsApp, Slack vagy Discord alkalmazásban, az előnézeti kártya egy mini-reklám. Egy olyan kártya, amelyen a tényleges terméknév, ár és értékelés szerepel, sokkal jobban konvertál, mint az üzlet általános logóképe. Termékenként kézzel egyedi kártyát készíteni nem skálázható – pontosan erre való az API.

Termék OG-kép generálása

Írjon alá egy URL-t a template=ecommerce, a termék címe, ára, értékelése és egy kép URL-je segítségével. Az API igény szerint rendereli a kártyát, és gyorsítótárba helyezi.

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

Ecommerce-sablonmezők

Mező	Mit mutat	Opcionális?
`title`	Terméknév (címsor)	Kötelező
`subtitle`	Szlogen vagy kategória	Opcionális
`price`	Árcímke, pl. `$29.99`	Opcionális
`rating`	Értékelés, pl. `4.9`	Opcionális
`image`	Termékkép / avatár URL	Opcionális

GYIK

A FastOG betölti a termékképemet a kártyára?

Igen. Adja meg a termék képének URL-jét a image paraméterben, és az e-kereskedelmi sablon beilleszti azt a kártyára.

Az ár élőben jelenik meg, és szerkeszthető?

Az ár az, amit az aláíráskor átad. Módosítja az árat → módosítja az URL-t → egy új renderelés.

Mi a helyzet a kedvezményes / akciós árakkal?

Adja meg az aktuális árat price-ként. Egyes eladók frissítik a kártyát, amikor az akció változik, így a megosztott előnézet az élő árat mutatja.

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