Gambar OG untuk Halaman Produk

Gambar OG untuk halaman produk adalah pratinjau sosial (social preview) yang menampilkan nama produk, harga, dan gambar mini (thumbnail) saat halaman tersebut dibagikan. FastOG merendernya secara dinamis pada ukuran 1200×630 dan menyimpannya di cache edge (edge-cache), sehingga setiap produk mendapatkan kartu bermerek tanpa perlu desainer menyentuh templat.

Mengapa halaman produk e-commerce membutuhkan gambar OG dinamis

Ketika pelanggan membagikan tautan produk di WhatsApp, Slack, atau Discord, kartu pratinjau adalah iklan mini. Kartu dengan nama produk, harga, dan peringkat yang sebenarnya akan mengonversi jauh lebih baik daripada gambar logo umum toko. Membuat kartu unik untuk setiap produk secara manual tidak akan efisien — itulah gunanya API ini.

Cara membuat gambar OG produk

Tanda tangani URL dengan template=ecommerce, judul produk, harga, peringkat, dan URL gambar. API merender kartu sesuai permintaan dan menyimpannya dalam cache.

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

Kolom template ecommerce

Kolom	Yang ditampilkan	Opsional?
`title`	Nama produk (judul utama)	Wajib
`subtitle`	Tagline atau kategori	Opsional
`price`	Label harga, mis. `$29.99`	Opsional
`rating`	Rating ulasan, mis. `4.9`	Opsional
`image`	URL gambar produk / avatar	Opsional

FAQ

Apakah FastOG memuat gambar produk saya ke dalam kartu?

Ya. Berikan URL gambar produk pada parameter image dan templat ecommerce akan menyusunnya ke dalam kartu.

Apakah harga ditampilkan secara langsung dan dapat diedit?

Harga adalah apa pun yang Anda berikan saat penandatanganan. Ubah harga → ubah URL → satu render baru.

Bagaimana dengan harga diskon / obral?

Berikan harga saat ini sebagai price. Beberapa penjual memperbarui kartu saat obral berubah sehingga pratinjau yang dibagikan menampilkan harga terkini.

Coba gratis — tanpa perlu mendaftar

Pratinjau dan uji gambar OG dinamis dalam hitungan detik.

Buka Penguji Gambar OG Gratis

Topik