Apa itu Twitter Card Meta dan Cara Memasangnya di Blog Blogger

Pernahkah Anda membagikan sebuah tautan (link) ke media sosial dan melihat bagaimana tautan tersebut secara otomatis menghasilkan tampilan pratinjau yang kaya (rich snippet)? Di sana Anda bisa melihat gambar besar, judul, beserta deskripsi singkat dari halaman web yang dibagikan.

Hal tersebut tidak terjadi secara kebetulan, melainkan hasil langsung dari pemasangan data meta atau "tag" yang tepat di dalam kode sumber (source code) halaman web tersebut. Khusus untuk platform Twitter/X, dibutuhkan tag spesifik agar cuplikan media tersebut muncul secara sempurna, fitur ini disebut dengan Twitter Cards.

Cara Memasang Kode Twitter Card di Blogger

Tag ini umumnya ditempatkan di antara kode <head> dan </head> pada editor HTML tema Anda. Namun, Anda juga dapat menyisipkannya langsung di dalam sebuah artikel postingan atau halaman statis tertentu. Caranya, ubah mode menulis dari mode Tampilan Menulis (Compose view) ke mode Tampilan HTML (HTML view) saat mengedit artikel, lalu rekatkan kode di bawah ini.

Template Dasar Twitter Card Meta

Salin kode berikut dan pastikan untuk mengganti teks berwarna oranye (@username_twitter) dengan nama pengguna Twitter/X Anda sendiri:

<meta name='twitter:card' content='summary_large_image'/>
<meta name='twitter:site' content='@username_twitter'/>
<meta name='twitter:title' expr:content='data:view.title.escaped'/>
<meta name='twitter:description' expr:content='data:view.description.escaped'/>
<meta name='twitter:creator' content='@username_twitter'/>

<b:if cond='data:view.featuredImage'>
  <meta name='twitter:image' expr:content='resizeImage(data:view.featuredImage, 1200, "1200:630")'/>
<b:elseif cond='data:widgets'/>
  <b:loop values='data:widgets.Blog.first.posts where (p => p.featuredImage) map (p => p.featuredImage)' var='imageUrl'>
    <meta name='twitter:image' expr:content='resizeImage(data:imageUrl, 1200, "1200:630")'/>
  </b:loop>
<b:elseif cond='data:blog.postImageUrl'/>
  <meta name='twitter:image' expr:content='resizeImage(data:blog.postImageUrl, 1200, "1200:630")'/>
</b:if>

🛠️ Alat Penguji Resmi: Anda dapat memeriksa atau melakukan debugging untuk melihat bagaimana visual postingan blog Anda saat dibagikan orang lain dengan mengunjungi microlink.io.

Penjelasan Fungsi Atribut Kode

twitter:card bernilai summary_large_image: Struktur ini memerintahkan Twitter/X untuk menampilkan pratinjau dengan gambar besar beresolusi penuh memenuhi lebar kolom (full-width).
Jika Anda ingin menampilkan gambar kecil di sisi kiri teks (seperti bentuk kotak kecil standar), Anda tinggal mengganti nilai summary_large_image menjadi summary.

Batasan Ukuran Gambar: Tipe summary_large_image membutuhkan dimensi gambar minimal 300x157px, sedangkan tipe summary membutuhkan dimensi minimal 144x144px.
twitter:title & twitter:description: Menarik data judul dan deskripsi ringkas halaman secara dinamis melalui sistem Blogger (data:view.title.escaped dan data:view.description.escaped).
Tips: Jika template Blogger Anda sudah mengaktifkan Opengraph Meta (OG Tags) otomatis, Anda sebenarnya bisa menghapus bagian title, description, dan image pada Twitter Card ini. Bot Twitter/X secara cerdas dapat membaca data dari tag Opengraph tersebut sebagai alternatif cadangan.

twitter:site & twitter:creator: Bagian ini wajib diisi manual dengan akun Twitter/X pemilik situs atau penulis artikel sebagai bentuk atribusi kepemilikan konten.

Cari Blog Ini

Blogger Theme Tutorial