Mengapa pratinjau tautan Anda terlihat salah, dan cara memperbaikinya dengan Open Graph

Anda membagikan tautan ke halaman landing baru dan pratinjaunya muncul tanpa gambar, dengan judul beranda, atau spanduk dari dua kampanye lalu. Halaman itu sendiri baik-baik saja. Pratinjau dibangun dari sesuatu yang lain: beberapa baris kode di bagian head halaman yang jarang dilihat kebanyakan orang.

Tulisan ini membahas enam penyebab di balik sebagian besar pratinjau yang rusak, diurutkan sesuai urutan pengecekan yang layak. Jika Anda ingin tag-nya ditulis untuk Anda, generator Open Graph gratis kami akan membuatnya, meng-escape-nya dengan benar, dan memeriksanya terhadap batasan di bawah.

Cara pratinjau tautan dibuat

Saat tautan ditempel ke dalam postingan atau pesan, aplikasi mengirim crawler ke halaman tersebut. Crawler membaca tag <meta> di dalam <head> dan menggambar kartu dari situ. Tag tersebut berasal dari protokol Open Graph, yang menyebutkan empat tag sebagai wajib:

• og:title: judul halaman sebagaimana seharusnya tampil di kartu.
• og:type: jenis halaman, biasanya website atau article.
• og:image: gambarnya.
• og:url: URL kanonis halaman, yang oleh protokol disebut ID permanennya.

Tambahkan og:description dan kartunya sudah lengkap. Satu set minimal yang lengkap terlihat seperti ini:

<meta property="og:title" content="Spring linen collection">
<meta property="og:description" content="Breathable shirts in three colours.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring">
<meta property="og:image" content="https://example.com/og/spring.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three linen shirts on a rail">
<meta name="twitter:card" content="summary_large_image">

Penyebab 1: tag-nya tidak ada

Tanpa tag og:, setiap aplikasi harus kembali ke apa pun yang ditemukannya di halaman, seperti <title> atau gambar pertama, dan pilihannya bergantung pada aplikasi masing-masing. Itulah sebabnya satu tautan bisa terlihat baik di satu tempat dan rusak di tempat lain. Perbaikannya adalah mencantumkan empat tag wajib plus deskripsi di setiap halaman yang diharapkan akan dibagikan orang, bukan hanya beranda. Halaman produk yang dibagikan dengan tag beranda akan menampilkan kartu beranda.

Penyebab 2: URL gambarnya relatif

Ini mudah terlewat, karena halamannya terlihat baik-baik saja di browser Anda sendiri. content="/images/og.jpg" berfungsi untuk browser yang sudah berada di situs Anda, tetapi crawler berada di luar situs itu. Tulis alamat lengkapnya, dimulai dengan https:// dan domain Anda. Hal yang sama berlaku untuk og:url.

Penyebab 3: ukuran atau bentuk gambarnya salah

Setiap platform menyatakan apa yang mereka inginkan, dan kebetulan mereka sepakat tentang gambar lebar:

• LinkedIn menyatakan dalam panduan membuat situs web dapat dibagikan bahwa gambar sebaiknya minimal 1200 × 627 piksel, dengan rasio yang direkomendasikan 1,91:1, dan tidak lebih besar dari 5 MB.
• Meta dalam praktik terbaik berbagi-nya merekomendasikan gambar dengan lebar minimal 1080 piksel untuk layar resolusi tinggi, dan minimal 600 piksel lebar untuk menampilkan iklan tautan gambar.
• Kartu gambar besar milik X mendukung rasio 2:1 dari 300 × 157 hingga 4096 × 4096 piksel, di bawah 5MB, dalam format JPG, PNG, WEBP atau GIF, dan tidak mendukung SVG, menurut dokumentasi pengembangnya (halaman asli kini dialihkan, jadi tautan ini melalui Internet Archive).

Satu ukuran cocok untuk ketiganya: 1200 × 630. Ukuran ini memenuhi minimum 1200 × 627 milik LinkedIn, lebih lebar dari 1080 milik Meta, dan rasionya 1200 ÷ 630 = 1,905, dalam selisih 5% dari 2:1 milik X. Gambar persegi atau tinggi akan dipotong menjadi kartu lebar, jadi jaga bagian penting tetap di tengah. Kalkulator rasio aspek menunjukkan apa yang tersisa dari potongan tengah.

Nyatakan juga ukurannya di dalam tag. Meta meminta og:image:width dan og:image:height agar crawler-nya dapat merender gambar secara langsung, tanpa harus mengunduh dan memprosesnya dulu. Panduan webmaster-nya menyampaikannya dengan sederhana: tentukan tinggi dan lebar agar gambar termuat dengan benar saat pertama kali dibagikan.

Penyebab 4: tag ditambahkan oleh JavaScript

Beberapa pembuat situs dan aplikasi halaman tunggal menambahkan tag meta setelah halaman dimuat, di browser. Crawler yang membaca HTML yang dikirim server Anda mungkin tidak pernah menjalankan kode itu, sehingga tag tersebut tidak pernah terlihat. Periksa sumber halaman (View Source, bukan inspector, yang menampilkan halaman setelah skrip dijalankan). Jika tag tidak ada di sumber, kemungkinan besar crawler juga tidak bisa melihatnya. Perbaikannya ada di pengaturan situs Anda atau template sisi server.

Penyebab 5: karakter khusus merusak tag

Judul dengan tanda kutip ganda di dalamnya, seperti The "only" linen you need, menutup atribut content="..." lebih awal dan sisa judul hilang. Karakter yang bermakna di dalam atribut harus di-escape: " menjadi ", & menjadi &, dan < menjadi <. Browser dan crawler akan mengubahnya kembali menjadi karakter asli saat membaca tag. Generator melakukan ini untuk Anda, dan itu menjadi salah satu alasan utama untuk memakainya.

Penyebab 6: aplikasi mengingat versi lama

Anda sudah memperbaiki tag, membagikan ulang, dan kartu lama masih ada. Itu cache. Aplikasi menyimpan apa yang sudah mereka ambil dan menggunakannya kembali, dan kedua jaringan besar menyediakan alat untuk meminta tampilan baru:

• Facebook: tempel URL ke Sharing Debugger milik Meta. Panduan webmaster Meta menyatakan bahwa alat ini menunjukkan tag mana yang diambil crawler, beserta kesalahan atau peringatannya, dan memicu pengambilan ulang. Praktik terbaik Meta menambahkan bahwa konten yang sudah diambil diperbarui secara standar setiap 24 jam.
• LinkedIn: jalankan URL melalui Post Inspector. Halaman bantuan LinkedIn cukup jelas soal batasannya: penyegaran hanya mengubah pratinjau untuk postingan baru. Postingan yang sudah menyertakan URL tetap memakai pratinjau lama.

Catatan LinkedIn itulah yang perlu diingat sebelum peluncuran. Periksa pratinjaunya sebelum postingan pertama dikirim, karena Anda tidak bisa memperbaiki postingan lama dengan memperbaiki halaman.

Tag twitter:card: satu baris, bukan empat

X juga membaca Open Graph. Referensi markup kartu-nya mencantumkan cadangan untuk setiap tag: twitter:title kembali ke og:title, twitter:description ke og:description, twitter:image ke og:image, dan twitter:image:alt ke og:image:alt. Jadi Anda tidak perlu mengulang semuanya. Satu-satunya baris yang perlu ditambahkan adalah twitter:card: summary_large_image untuk gambar lebar penuh, atau summary untuk gambar persegi kecil. Jika dihilangkan, referensi yang sama menyatakan X mungkin menampilkan kartu ringkasan kecil, itulah sebabnya gambar besar kadang muncul sebagai thumbnail. Referensi yang sama membatasi judul hingga 70 karakter, deskripsi 200, dan teks alt 420.

Pemeriksaan lima menit sebelum peluncuran

1. Lihat sumber halaman dan temukan tag og:. Keempat tag wajib, plus deskripsi.
2. Pastikan og:image dan og:url dimulai dengan https://.
3. Buka URL gambar sendiri di browser. Gambar harus termuat, berukuran 1200 × 630 atau mendekatinya.
4. Tempel URL ke Sharing Debugger dan Post Inspector, lalu baca kartunya.
5. Baru kemudian bagikan.

Di mana Hermoso cocok

Hermoso adalah agen pemasaran AI: ia meneliti iklan yang sudah berhasil di pasar Anda, membuat iklan gambar dan video yang sesuai merek, menjadwalkan postingan ke akun Anda sendiri, dan menjalankan kampanye berbayar di akun iklan Anda sendiri. Pratinjau tautan yang baik adalah yang membuat postingan tersebut layak diklik. Hermoso bekerja di aplikasi web, atau di dalam Claude, ChatGPT dan Cursor melalui server MCP-nya.

Pertanyaan yang sering diajukan

Mengapa tautan saya tidak menampilkan gambar di Facebook atau LinkedIn?

Biasanya tag og:image hilang, memakai jalur relatif alih-alih alamat https:// lengkap, atau menunjuk ke gambar yang terlalu kecil. LinkedIn meminta minimal 1200 × 627 piksel. Setelah memperbaikinya, jalankan URL melalui Sharing Debugger milik Meta atau Post Inspector milik LinkedIn agar mereka mengambilnya ulang.

Berapa ukuran gambar Open Graph seharusnya?

1200 × 630 piksel berfungsi di jaringan besar. Ukuran ini memenuhi minimum 1200 × 627 milik LinkedIn pada sekitar 1,91:1, lebih lebar dari 1080 piksel yang direkomendasikan Meta, dan mendekati 2:1 yang didukung X untuk kartu gambar besar.

Bagaimana cara memperbarui pratinjau tautan LinkedIn?

Perbaiki tag di halaman, lalu masukkan URL ke Post Inspector LinkedIn. Pratinjau yang diperbarui hanya berlaku untuk postingan baru. Postingan yang sudah memuat URL tetap memakai pratinjau lama.

Apakah saya perlu tag twitter: jika sudah punya tag og:?

Hanya twitter:card. X kembali ke og:title, og:description, og:image dan og:image:alt jika versi twitter: tidak ada.