Tag Meta Twitter Card

Twitter (X) menetapkan protokol kartu pratinjaunya sendiri sebelum OpenGraph ada dan masih memeliharanya. Meskipun Twitter modern menggunakan tag OG sebagai cadangan saat tag twitter:* tidak ada, deklarasi twitter:card secara eksplisit memberikan tata letak kartu yang paling dapat diprediksi.

Empat jenis kartu: summary (gambar mini di samping judul/deskripsi), summary_large_image (gambar utama selebar kartu), app (pemasangan aplikasi seluler), dan player (video atau audio tersemat). Pilih summary_large_image untuk artikel yang kaya konten.

Jika ada, keduanya menggantikan og:title dan og:description di Twitter. Gunakan saat Anda menginginkan judul yang berbeda untuk audiens Twitter dibandingkan pengguna OpenGraph secara umum; jika tidak, biarkan Twitter menggunakan nilai OG sebagai cadangan.

Untuk kartu summary, gunakan gambar persegi 1:1 dengan ukuran minimal 144x144. Untuk summary_large_image, gunakan gambar 2:1, idealnya berukuran 1200x600 atau lebih besar. Twitter menolak gambar yang berukuran lebih dari 5 MB. Gunakan URL absolut seperti pada og:image — jalur relatif tidak berfungsi.

Teks alternatif untuk gambar kartu, hingga 420 karakter. Ini meningkatkan aksesibilitas bagi pengguna pembaca layar yang menjelajah Twitter dan menyediakan deskripsi cadangan saat gambar gagal dimuat. Selalu sediakan teks ini — manfaatnya besar untuk inklusivitas dengan usaha hanya 30 detik.

twitter:site adalah nama pengguna Twitter situs Anda (dengan tanda @). twitter:creator adalah nama pengguna penulis individu. Dengan mengisinya, Twitter dapat menampilkan "dari @yoursite" dan menautkan baris kredit penulis ke akun yang benar-benar ada.

OpenGraph menggunakan property="og:..."; Twitter menggunakan name="twitter:...". Perbedaannya bersifat historis (RDFa vs HTML5 meta). Keduanya valid secara teknis; penggunaan atribut yang tepat untuk setiap protokol menghindari kasus khusus pada validator yang ketat.

twitter:card="app" memungkinkan Anda mempromosikan aplikasi iOS/Android dengan twitter:app:id:iphone, twitter:app:id:ipad, twitter:app:id:googleplay, dan tautan mendalam twitter:app:url:*. Mengetuk kartu akan membuka App Store/Play Store atau langsung membuka aplikasi jika sudah terpasang.

twitter:card="player" menyematkan pemutar video atau audio langsung di dalam kiriman. Fitur ini memerlukan twitter:player (URL iframe HTTPS), twitter:player:width, dan twitter:player:height. Twitter menyetujui kartu pemutar secara manual untuk mencegah penyalahgunaan — kirimkan pengajuan melalui developer.twitter.com.

Twitter telah menutup antarmuka Card Validator publik, tetapi kartu masih dapat dipratinjau dalam draf kiriman. Tempelkan URL Anda dalam draf pribadi untuk melihat jenis kartu dan gambar yang akan dirender sebelum menerbitkan kiriman sebenarnya.

Selalu sertakan twitter:card dan rangkaian lengkap tag OG. Sebagian besar platform selain Twitter mengabaikan tag twitter:*, sedangkan sebagian besar klien Twitter modern menggunakan OG sebagai cadangan, sehingga kombinasi ini menghasilkan pratinjau yang benar di mana pun dengan duplikasi minimal.

Jika twitter:title tidak ada tetapi og:title tersedia, apa yang muncul pada kartu Twitter?

Kartu Twitter (dideklarasikan melalui name="twitter:card") memberikan pratinjau yang dapat diprediksi untuk halaman di X. Pilih summary_large_image untuk konten editorial, tambahkan twitter:image dengan URL absolut dan twitter:image:alt, cantumkan situs/penulis menggunakan nama pengguna, dan biarkan nilai OG mengisi tag yang tidak Anda ganti.