Gambar OG Dinamis untuk SaaS

Gambar OG dinamis untuk SaaS adalah pratinjau sosial per halaman yang dibuat secara otomatis saat dashboard, dokumentasi, changelog, atau rute yang menghadap pengguna dibagikan. FastOG merender setiap gambar sesuai permintaan dan menyimpannya dalam cache, sehingga SaaS dapat memberikan kartu bermerek yang unik untuk setiap halaman tanpa pekerjaan desain manual sama sekali.

Mengapa SaaS membutuhkan gambar OG dinamis

Produk SaaS memiliki banyak permukaan yang dapat dibagikan — halaman produk, halaman dokumentasi, entri changelog, profil pengguna publik, dan kartu pencapaian. Setiap permukaan yang dibagikan di X atau LinkedIn akan lebih diuntungkan dengan kartunya sendiri daripada sekadar fallback logo tunggal. Membuatnya secara manual tidak akan berskala; membuatnya pada waktu render justru bisa.

Pola inti

Untuk setiap halaman yang ingin Anda buatkan kartunya, tandatangani URL dengan judul halaman (dan kolom khusus halaman lainnya) pada waktu render. FastOG merender PNG pada pengambilan pertama dan Cloudflare menyimpannya dalam cache.

tsx

// Next.js — app/docs/[slug]/page.tsx
export function generateMetadata({ params }) {
    const doc = await getDoc(params.slug);
    return {
        openGraph: {
            images: [generateOgImageUrl({
                template: "default",     // or "devtool", "launch", "company"
                title: doc.title,
                subtitle: doc.excerpt,
                domain: "yoursaas.com",
            })],
        },
    };
}

Kasus penggunaan SaaS yang baik

Permukaan	Ide template
Halaman produk / pemasaran	`company`, `hero`, `product`
Halaman dokumentasi	`default`, `devtool`
Entri changelog	`changelog`, `launch`
Kartu pengguna / avatar publik	`testimonial`, `stats`, `image-right`
Halaman harga	`pricing`, `stats`

FAQ

Apakah saya perlu template untuk setiap kasus penggunaan?

Tidak. Satu template ditambah kolom URL yang Anda kirim biasanya sudah cukup; beberapa template sudah mencakup sisanya. Semua dirender pada ukuran 1200×630.

Bagaimana cara menangani banyak halaman tanpa menghabiskan kuota?

URL yang identik di-cache di edge selamanya setelah render pertama, jadi halaman yang sama dibagikan 1.000 kali hanya dihitung 1 render. Perubahan konten hanya menghasilkan URL baru.

Bisakah saya memberi merek kartu dengan identitas SaaS saya?

Ya — atur brand_name, brand_logo, bg_color, font, dan pola per URL. Lihat playground untuk melihat pratinjau template secara langsung.

Coba gratis — tanpa perlu mendaftar

Pratinjau dan uji gambar OG dinamis dalam hitungan detik.

Buka Penguji Gambar OG Gratis

Topik