Generator Meta Tag Open Graph
Buat meta tag Open Graph untuk pratinjau tautan di Facebook, LinkedIn, WhatsApp, Slack, dan Discord: judul, deskripsi, gambar beserta ukuran dan alt, tipe, URL, locale.
URL absolut; 1200×630 px cocok untuk sebagian besar jejaring.
en_US, vi_VN, fr_FR…
<meta property="og:type" content="article"> <meta property="og:title" content="My Awesome Article"> <meta property="og:description" content="A short summary shown when the link is shared."> <meta property="og:url" content="https://example.com/article"> <meta property="og:site_name" content="Example"> <meta property="og:locale" content="en_US"> <meta property="og:image" content="https://example.com/og-image.png"> <meta property="og:image:secure_url" content="https://example.com/og-image.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="Article cover">
Apa itu Generator Open Graph?
Alat ini membuat tag Open Graph <meta property="og:…"> yang mengatur tampilan tautan saat dibagikan di Facebook, LinkedIn, WhatsApp, Slack, Discord, Telegram, dan banyak aplikasi lain. Alat ini mencakup og:type, judul, deskripsi, URL, nama situs, locale, dan gambar beserta secure URL, lebar, tinggi, dan teks alt, serta memberi peringatan jika properti wajib belum diisi.
Cara menggunakan Generator Open Graph
- Isi og:title, og:type, og:url, dan og:image (empat properti wajib).
- Tambahkan deskripsi, nama situs, locale, serta ukuran dan teks alt gambar.
- Perbaiki peringatan properti yang belum diisi, jika ada.
- Salin tag ke bagian <head> halaman.
Kapan menggunakan Generator Open Graph
Gunakan setiap kali sebuah halaman akan dibagikan dan Anda ingin mengendalikan pratinjaunya alih-alih membiarkan setiap aplikasi menebak. Jaringan sosial menyimpan pratinjau di cache; setelah mengubah tag, gunakan debugger platform (misalnya Facebook Sharing Debugger) untuk menyegarkannya. Untuk X (Twitter), lihat juga generator Twitter Card.
Cara kerja Generator Open Graph
Setiap kolom yang tidak kosong menjadi satu tag <meta property="og:…" content="…"> dengan konten yang sudah di-escape HTML, sesuai urutan yang disarankan protokol Open Graph. Jika URL gambar memakai https, tag og:image:secure_url dengan URL yang sama ditambahkan; lebar, tinggi, dan alt gambar hanya ditulis jika gambar diisi.
Kasus Penggunaan Umum
- Memberi artikel blog pratinjau gambar besar di LinkedIn dan Facebook.
- Mengatur og:locale untuk halaman yang dilokalkan.
- Menambahkan og:image:alt demi aksesibilitas.
- Membuat halaman produk menampilkan nama dan foto produk di WhatsApp.
Pertanyaan Umum
Ukuran gambar apa yang paling baik?
1200×630 px (1,91:1) ditampilkan dengan baik oleh sebagian besar platform. Letakkan konten penting di tengah karena sebagian aplikasi memotongnya menjadi persegi.
Tag og mana yang wajib?
Protokol mewajibkan og:title, og:type, og:image, dan og:url. Deskripsi dan nama situs opsional tetapi disarankan.
Mengapa Facebook masih menampilkan gambar lama saya?
Pratinjau disimpan di cache. Lakukan scrape ulang URL di Sharing Debugger, atau ganti URL gambarnya.