← Semua tulisan
4 menit baca

Kenapa pratinjau tautanmu tampak rusak (dan cara memperbaikinya)

Pratinjau yang kosong atau salah saat kamu menempelkan tautanmu di Slack, iMessage, atau X hampir selalu bermuara pada segelintir tag Open Graph. Berikut daftar periksanya.

Kamu merilis sebuah halaman, menempelkan tautannya di Slack, dan yang muncul cuma URL polos tanpa gambar — atau lebih parah, judul bulan lalu. Pratinjau tautan digerakkan oleh tag meta Open Graph dan Twitter, dan ketika tag itu hilang atau salah, setiap platform akan menampilkan sesuatu yang buruk sebagai cadangan.

Tag yang menggerakkan pratinjau

<meta property="og:title" content="Your page title" />
<meta property="og:description" content="One clear sentence." />
<meta property="og:image" content="https://yoursite.com/og.png" />
<meta name="twitter:card" content="summary_large_image" />

Biang keladi yang biasa

  • og:image berupa path relatif — seharusnya URL absolut.
  • Gambarnya terlalu kecil; targetkan 1200×630.
  • Tag disuntikkan di sisi klien, jadi crawler tak pernah melihatnya.
  • Ada cache yang menyajikan pratinjau lama — scrape ulang untuk menyegarkannya.

Alat OG Image merender kartu berlogo untuk setiap halaman dan memperlihatkan pratinjau unfurl di Slack, iMessage, X, dan LinkedIn sebelum kamu merilis — lalu skill-nya menyambungkan tag-tagnya ke dalam repo-mu supaya terrender di sisi server.

Kenapa pratinjau tautanmu tampak rusak (dan cara memperbaikinya)