Ürün Sayfaları için OG Görselleri

Bir ürün sayfası için OG görseli, sayfa paylaşıldığında ürün adını, fiyatını ve küçük bir görseli gösteren sosyal önizlemedir (social preview). FastOG bunu 1200×630 boyutunda dinamik olarak oluşturur ve uçta (edge) önbelleğe alır; böylece her ürün, bir tasarımcının şablona dokunmasına gerek kalmadan markalı bir kart elde eder.

E-ticaret ürün sayfalarının neden dinamik OG görsellerine ihtiyacı var

Bir müşteri ürün bağlantısını WhatsApp, Slack veya Discord'da paylaştığında, önizleme kartı mini bir reklamdır. Gerçek ürün adını, fiyatını ve puanını içeren bir kart, mağazanın genel logo görselinden çok daha iyi dönüşüm sağlar. Her ürün için elle benzersiz bir kart oluşturmak ölçeklenmez — API'nin var olma nedeni budur.

Ürün OG görseli nasıl oluşturulur

template=ecommerce ile bir URL'yi, ürün başlığını, fiyatı, puanı ve bir görsel URL'sini imzalayın. API, kartı talep üzerine işler ve önbelleğe alır.

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

E-ticaret şablonu alanları

Alan	Ne gösterir	Zorunlu mu?
`title`	Ürün adı (başlık)	Zorunlu
`subtitle`	Slogan veya kategori	İsteğe bağlı
`price`	Fiyat etiketi, örn. `$29.99`	İsteğe bağlı
`rating`	Yorum puanı, örn. `4.9`	İsteğe bağlı
`image`	Ürün görseli / avatar URL'si	İsteğe bağlı

SSS

FastOG, ürün görselimi karta yükler mi?

Evet. Ürünün görsel URL'sini image parametresinde iletin; e-ticaret şablonu bunu karta yerleştirir.

Fiyat canlı mı gösterilir ve düzenlenebilir mi?

Fiyat, imzalama sırasında ilettiğiniz değerdir. Fiyatı değiştirin → URL'yi değiştirin → yeni bir render elde edin.

İndirim / satış fiyatları için ne yapılır?

Geçerli fiyatı price olarak iletin. Bazı satıcılar, satış değiştiğinde kartı yenileyerek paylaşılan önizlemenin canlı fiyatı göstermesini sağlar.

Ücretsiz deneyin — kayıt gerekmez

Dinamik OG görsellerini saniyeler içinde önizleyin ve test edin.

Ücretsiz OG Görsel Test Aracını Aç

Konu