HTML42 / 46

Open Graph: tampilan saat dibagikan

Saat tautanmu dibagikan di WhatsApp, LinkedIn, atau X, platform-platform itu membaca tag Open Graph untuk menyusun kartu pratinjau. Tanpa tag itu, tautanmu tampil sebagai URL polos dan jauh lebih sedikit diklik. Perhatikan bedanya: Open Graph memakai atribut property, sedangkan meta description memakai name — tertukar sedikit saja membuatnya gagal tanpa pesan error apa pun. Gambar og:image sebaiknya memakai URL absolut lengkap, karena platform luar tidak tahu alamat dasar situsmu.

👀 Contoh dulu

<meta property="og:title" content="Resep Nasi Goreng">
<meta property="og:description" content="Enak, cepat, 15 menit.">
<meta property="og:image" content="https://dapurkita.id/nasgor.jpg">

Hasilnya: Saat link dibagikan di WhatsApp, muncul kartu berisi gambar, judul, dan deskripsi — bukan URL polos.

💡 Ingat: OG memakai property=, sedangkan meta description memakai name=. Salah satu ini gagal tanpa pesan error.

📝 Sekarang giliranmu

Tambahkan tiga tag Open Graph: og:title (isi bebas), og:description (isi bebas), dan og:image dengan content https://bilearn.id/preview.png.

Preview