Pratinjau Open Graph — cek kartu bagikan media sosial
Tag Open Graph menentukan tampilan halaman Anda setiap kali dibagikan—gambar atau judul yang hilang membuat Anda kehilangan klik dan bagikan. Tempel tag og:/twitter:card atau URL untuk melihat pratinjau kartu Facebook, X, dan gaya WhatsApp, menemukan kolom yang hilang, dan memperbaiki rasio gambar. Langkah: tempel tag atau ambil URL, baca tiga kartu pratinjau dan tabel kolom, lalu perbaiki yang kurang. Mode tempel berjalan di perangkat Anda; mode URL mengambil halaman sekali dan tidak menyimpannya. Contoh: halaman dengan og:image 1200×630 dibagikan sebagai kartu besar.
Cara kerja
Pratinjau mengurai tag og:/twitter: yang Anda tempel (atau mengekstraknya dari HTML yang diambil dari URL) lalu menggambar tiga kartu. Facebook menampilkan gambar 1.91:1 di kiri dengan judul, deskripsi, dan domain di bawahnya. X mengikuti twitter:card: summary_large_image menampilkan gambar besar di atas, summary menampilkan yang kecil di samping teks. Aplikasi pesan seperti WhatsApp menampilkan satu kartu besar. Tabel menandai og:title, og:description, dan og:image sebagai wajib dan mencantumkan kolom opsional.
Aturan yang dipakai pratinjau
Berikut ukuran gambar dan fallback yang dipakai platform, berdasarkan protokol Open Graph dan dokumentasi X Cards.
- Kolom wajib: og:title, og:description, dan og:image. Yang hilang ditandai agar diperbaiki sebelum publikasi.
- og:image 1200×630 px (1.91:1) berfungsi di semua platform utama. Facebook kini juga menerima potongan 2:1 dan 1:1; gambar kecil sering diperbesar dan tampak buram.
- twitter:card summary_large_image cocok dengan gambar besar; summary dengan yang kecil. Tanpa twitter:card, platform menyimpulkan kartu summary dari tag og:.
- Saat og:title atau og:image hilang, platform memakai judul HTML, meta description, dan gambar pertama halaman.
- Ukuran gambar diukur dengan memuat gambar di browser; jika tidak dapat dimuat (diblokir, offline, atau URL salah), pemeriksaan melaporkan tidak diketahui.
Contoh
Tag contoh menggambarkan artikel blog dengan og:image 1200×630 dan twitter:card summary_large_image. Pratinjau menampilkan kartu Facebook dengan gambar di kiri, kartu besar X, kartu gaya WhatsApp, dan tabel tag yang semua kolom wajibnya ada.
Penggunaan yang tepat
- Sebelum menerbitkan artikel atau landing page, tempel tag sekali dan pastikan kartu terlihat benar di Facebook, X, dan aplikasi pesan.
- Saat tautan yang dibagikan tidak menampilkan gambar atau terpotong, tempel tag og: untuk memeriksa apakah og:image hilang atau rasionya salah.
- Setelah memperbarui CMS atau tema, ambil URL langsung dan pastikan tag og: masih sesuai dengan halaman.
Frequently asked questions
Apa yang terjadi jika halaman tidak punya tag Open Graph?
Facebook, X, dan WhatsApp menyusun pratinjau dari judul HTML, meta description, dan gambar pertama halaman. Kartunya bisa tidak lengkap atau menampilkan gambar yang salah, karena itulah kolom og: wajib ada.
Seberapa besar sebaiknya og:image?
Ukuran aman adalah 1200×630 px, rasio 1.91:1 yang diterima semua platform utama. Facebook kini juga mendukung potongan 2:1 dan 1:1. Gambar yang sangat kecil sering diperbesar dan tampak buram.
Bagaimana hubungan twitter:card dengan tag og:?
twitter:card menentukan tata letak: summary_large_image menampilkan gambar lebar, summary menampilkan yang kecil. Saat twitter:title, twitter:description, atau twitter:image hilang, X memakai tag og: yang bersesuaian.
Apa yang dilakukan platform saat og:image hilang?
Platform memakai gambar pertama yang ditemukan di HTML halaman, atau menampilkan kartu tanpa gambar. og:image yang hilang adalah penyebab paling umum tautan yang dibagikan tanpa gambar pratinjau.
Mengapa pemeriksaan rasio melaporkan "tidak diketahui"?
Pratinjau mencoba memuat og:image dengan pemuatan gambar browser untuk membaca ukuran aslinya. Saat gambar diblokir, offline, lambat, atau server menolak permintaan, ukuran tidak bisa dibaca dan pemeriksaan melaporkan tidak diketahui.
Apakah tag saya diunggah ke mana-mana?
Tidak. Pada mode tempel, penguraian dan pratinjau berjalan di perangkat Anda. Mode URL mengambil halaman sekali melalui worker kami dan tidak menyimpannya.
Related tools
Pertanyaan atau masukan
Ada yang kurang jelas, rusak, atau hilang? Tulis pesan di bawah — kami membaca setiap catatan tentang alat ini.