tigtools

Pratinjau Open Graph

Masukkan isi tag Open Graph untuk melihat perkiraan tampilan tautan yang dibagikan dan memeriksa apakah ukuran gambarnya sudah tepat.

Berjalan di browser Anda Tanpa perlu mendaftar

Browser akan memuat gambar ini langsung dari alamat yang Anda masukkan.

Disarankan: 1200 × 630 px (1,91:1), JPG atau PNG, berukuran di bawah beberapa megabita. Jauhkan konten penting dari tepi karena beberapa aplikasi memotong gambar menjadi persegi.

Kartu tautan besar
Tanpa gambar
example.com
—
Kartu tautan kecil
Tanpa gambar
example.com
—

Kartu ini hanya perkiraan umum. Setiap aplikasi memiliki tata letak, font, dan pemotongan gambar sendiri serta menyimpan pratinjau dalam cache.

Cara menggunakan

  1. Masukkan og:title dan og:description yang digunakan atau akan digunakan di halaman Anda.
  2. Tempel URL lengkap og:image. Alat ini akan memuat gambar dan menampilkan ukuran piksel sebenarnya.
  3. Tambahkan URL halaman atau domain, lalu bandingkan pratinjau kartu besar dan kecil serta perbaiki peringatan yang muncul.

Cara kerja

Saat seseorang membagikan tautan, sebagian besar jejaring sosial dan aplikasi chat mengambil halaman tersebut lalu membaca tag Open Graph-nya: og:title, og:description, og:image, dan og:url. Tag tersebut digunakan untuk membuat kartu pratinjau. Gambar lebar dengan rasio sekitar 1,91:1 biasanya menghasilkan kartu besar dengan gambar di bagian atas; gambar kecil atau persegi sering kali menghasilkan kartu ringkas dengan gambar mini di samping teks.

Alat ini menampilkan dua gaya kartu umum untuk membantu Anda menilai panjang teks dan pemotongan gambar. Ukuran asli gambar diperiksa setelah dimuat di browser: jika kurang dari 200 × 200 px, banyak aplikasi tidak menampilkan gambar; jika kurang dari 600 × 315 px, aplikasi cenderung menggunakan tata letak kecil; dan jika rasionya jauh dari 1,91:1, gambar akan dipotong. Ukuran 1200 × 630 px banyak direkomendasikan karena tetap tajam di layar berkerapatan tinggi.

Pratinjau ini tidak dapat menunjukkan dengan tepat tampilan yang akan ditampilkan oleh aplikasi tertentu. Batas jumlah baris judul dan deskripsi berbeda-beda di setiap aplikasi, beberapa aplikasi mengabaikan deskripsi, dan sebagian besar menyimpan pratinjau dalam cache selama beberapa waktu setelah pertama kali dibagikan. Karena itu, perubahan pada tag Anda mungkin tidak langsung terlihat. Banyak platform menyediakan alat debug sendiri untuk memperbarui cache tersebut.

Contoh

Tangkapan layar sebagai og:image

Tangkapan layar berukuran 1440 × 900 memiliki rasio 1,6:1. Alat ini memberi peringatan tentang rasionya: pada kartu besar, bagian atas dan bawah gambar akan terpotong. Ekspor versi 1200 × 630 akan menghindari hasil yang tidak terduga.

Logo sebagai satu-satunya gambar

Logo berukuran 180 × 180 lebih kecil dari 200 × 200 px, sehingga banyak aplikasi tidak akan menampilkan gambar. Sebagai gantinya, gunakan banner lebar berukuran lebih besar yang menyertakan logo.

Memeriksa panjang judul

og:title sepanjang 90 karakter akan ditampilkan dalam tiga baris pada pratinjau kartu besar. Persingkat menjadi sekitar 60 karakter agar kartu tetap rapi di sebagian besar aplikasi.

Pertanyaan yang sering diajukan

Mengapa tautan saya tampil berbeda di Facebook, LinkedIn, dan X?

Setiap platform menampilkan kartu dengan tata letak, pemotongan gambar, dan batas teks yang berbeda. Beberapa menampilkan deskripsi, sementara yang lain tidak. Pratinjau ini hanya perkiraan umum, bukan tiruan desain platform mana pun.

Saya sudah mengubah og:image, tetapi gambar lama masih muncul. Mengapa?

Platform menyimpan pratinjau tautan dalam cache. Gunakan alat debug berbagi milik platform tersebut untuk mengambil ulang halaman, atau tunggu hingga cache kedaluwarsa. Mengubah nama file gambar juga dapat membantu.

Bisakah saya menggunakan gambar SVG atau WebP?

Sebagian besar platform tidak mendukung SVG. WebP berfungsi di banyak aplikasi, tetapi tidak semuanya; JPG atau PNG adalah pilihan yang paling aman.

Mengapa alat ini tidak dapat memuat gambar saya?

URL tersebut mungkin memerlukan login, mengarah ke halaman HTML alih-alih file gambar, atau servernya memblokir permintaan dari situs lain. Jika browser tidak dapat memuatnya di sini, perayap platform sosial mungkin juga tidak dapat memuatnya.

Privasi

Teks yang Anda masukkan tetap berada di browser. Untuk memeriksa gambar, browser Anda memintanya langsung dari URL yang Anda masukkan (tanpa mengirim referrer), sehingga server tersebut menerima permintaan gambar biasa. Tidak ada data yang dikirim ke TIG Tools.