Draftcamp

Pratinjau Open Graph

Lihat bagaimana URL tampil saat dibagikan, dan tag mana yang digunakan tiap platform

Masukkan URL untuk melihat kartunya

Kami mengambil halaman, menyelesaikan tag seperti yang dilakukan platform, dan menampilkan kartu beserta apa yang kurang.

Apa yang sebenarnya dibaca platform

Saat tautan ditempel di Slack, LinkedIn, X, atau iMessage, platform tersebut mengambil halaman dan membuat kartu dari tag meta-nya. Mereka tidak menjalankan JavaScript-mu dan tidak melihat CSS-mu - hanya membaca tag di bagian head saja.

Rangkaian cadangan

Kebanyakan platform menyelesaikannya dalam urutan yang sama, dan pratinjau ini mengikutinya:

  • Judul - twitter:title, lalu og:title, lalu <title>
  • Deskripsi - twitter:description, lalu og:description, lalu meta deskripsi
  • Gambar - twitter:image, lalu og:image, lalu tidak ada apa-apa

Itulah kenapa menggandakan setiap tag Open Graph sebagai tag Twitter biasanya sia-sia. Yang benar-benar perlu diatur terpisah adalah twitter:card, karena ini menentukan pilihan antara gambar besar dan thumbnail kecil.

Tiga kegagalan yang menyebabkan sebagian besar kartu rusak

  • og:image relatif. Crawler tidak punya konteks halaman untuk menyelesaikannya. Gunakan URL HTTPS absolut atau tidak sama sekali.
  • Gambar yang tidak bisa dijangkau. Di balik autentikasi, diblokir di robots.txt, atau disajikan dari host yang menolak user agent tidak dikenal.
  • Caching agresif. Kamu sudah memperbaiki tag tapi kartu lama tetap muncul berhari-hari. Facebook Sharing Debugger dan LinkedIn Post Inspector memaksa pengambilan ulang; cache X hanya perlu kedaluwarsa.

Bukan fitur SEO

Tag-tag ini bukan faktor peringkat. Mereka menentukan apakah sebuah tautan terlihat menarik untuk diklik saat dibagikan - dan tautan yang tampil sebagai kotak abu-abu dengan URL polos dibagikan dan diklik jauh lebih sedikit.

Untuk menulis tag sejak awal, gunakan generator meta tag sebagai gantinya.

Pertanyaan umum

Kenapa tautanku tidak menampilkan gambar saat dibagikan?
Hampir selalu karena og:image hilang, menggunakan path relatif bukan URL HTTPS absolut, atau mengarah ke sesuatu yang platform tidak bisa ambil - di balik autentikasi, diblokir oleh robots.txt, atau terlalu besar. Crawler yang mengambil kartu tidak punya konteks halaman, jadi path relatif tidak bisa diselesaikan.
Ukuran gambar berapa yang harus saya gunakan?
1200 x 630 piksel, kurang dari sekitar 5MB. Platform memotong gambar berbeda-beda, jadi jauhkan teks dan wajah dari tepi. Di bawah 600 x 315, sebagian besar platform menurunkan ke thumbnail kotak kecil tanpa memandang pengaturan twitter:card kamu.
Saya sudah memperbarui tag tapi kartu lama masih muncul.
Platform menyimpan cache dengan agresif, seringkali berhari-hari. Gunakan Facebook Sharing Debugger dan LinkedIn Post Inspector untuk memaksa pengambilan ulang. X tidak punya alat publik serupa, jadi cache-nya harus kadaluarsa sendiri.
Apakah saya perlu tag twitter: jika sudah punya Open Graph?
Sebagian besar tidak - X menggunakan Open Graph untuk judul, deskripsi, dan gambar. Pengecualian adalah twitter:card, yang menentukan antara gambar besar dan thumbnail kecil. Ini mengubah kartu secara signifikan dan layak diatur secara eksplisit.
Apakah ini berpengaruh pada SEO?
Tidak langsung. Tag Open Graph bukan faktor peringkat. Mereka memengaruhi apakah tautan yang dibagikan terlihat menarik untuk diklik, yang memengaruhi lalu lintas dan sinyal sekunder yang mengikuti - dan tautan yang tampil sebagai kotak abu-abu polos di Slack jelas dibagikan lebih sedikit.