Obrazy OG dla stron produktów

Obraz OG dla strony produktu to podgląd społecznościowy (social preview), który pokazuje nazwę produktu, cenę i miniaturę, gdy strona jest udostępniana. FastOG renderuje go dynamicznie w rozmiarze 1200×630 i buforuje na krawędzi (edge cache), dzięki czemu każdy produkt otrzymuje kartę z brandingiem bez udziału projektanta w tworzeniu szablonu.

Dlaczego strony produktów w e-commerce potrzebują dynamicznych obrazów OG

Gdy klient udostępnia link do produktu w WhatsApp, Slack lub Discord, karta podglądu jest mini-reklamą. Karta z rzeczywistą nazwą produktu, ceną i oceną konwertuje znacznie lepiej niż generyczne logo sklepu. Ręczne tworzenie unikalnej karty dla każdego produktu nie skaluje się — właśnie do tego służy API.

Jak wygenerować obraz OG produktu

Podpisz adres URL za pomocą template=ecommerce, tytułu produktu, ceny, oceny oraz adresu URL obrazu. API renderuje kartę na żądanie i ją buforuje.

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

Pola szablonu ecommerce

Pole	Co pokazuje	Opcjonalne?
`title`	Nazwa produktu (nagłówek)	Wymagane
`subtitle`	Tagline lub kategoria	Opcjonalne
`price`	Cena, np. `$29.99`	Opcjonalne
`rating`	Ocena recenzji, np. `4.9`	Opcjonalne
`image`	Obraz produktu / URL awatara	Opcjonalne

FAQ

Czy FastOG wczytuje obraz produktu do karty?

Tak. Przekaż URL obrazu produktu w parametrze image, a szablon ecommerce złoży go w kartę.

Czy cena jest wyświetlana na żywo i edytowalna?

Cena to wartość, którą przekazujesz podczas podpisywania. Zmień cenę → zmień URL → jedno nowe renderowanie.

A co z cenami promocyjnymi / wyprzedażowymi?

Przekaż aktualną cenę jako price. Niektórzy sprzedawcy odświeżają kartę, gdy zmienia się promocja, aby udostępniony podgląd pokazywał aktualną cenę.

Wypróbuj za darmo — bez rejestracji

Podglądaj i testuj dynamiczne obrazy OG w kilka sekund.

Otwórz darmowy tester obrazów OG

Temat