Cara Mudah Memasang Meta Tag Twitter Card Untuk Blogger

Cara Mudah Memasang Meta Tag Twitter Card Untuk Blogger - Selain Facebook dan Google+, kita juga bisa memanfaatkan Twitter umtuk mempromosikan halaman blog kita ke semua orang. Caranya pun mudah, kita hanya tinggal share artikel atau halaman blog kamu ke Twitter, sehingga blog kamu memiliki kesempatan untuk dikunjungi oleh pengguna Twitter.

Nah, untuk mempermudah penggunanya dalam share atau berbagi artikel, Twitter telah memfasilitasinya dengan membuat kode khusus yang diberi nama Twitter Card, yaitu sebuah kode perintah berupa Meta Tag HTML dengan aturan - aturan khusus yang dapat di letakkan di template blog, baik berplatform Blogger, Wordpress, ataupun yang lainnya.

Dengan menggunakan Twitter Card, kita bisa menampilkan image, video, judul postingan, deskripsi postingan, url postingan, dan lainnya pada tweet. Pemasangan Meta Tag Twitter Card ini sedikit berbeda dengan Open Graph Facebook. Meta Tags Twitter Card memerlukan Card Validasi oleh Twitter untuk memastikan bahwa Meta Tags Twitter Card yang ada pada blog kamu dapat dikenali oleh robot crawl Twitter.

Berikut ini contoh salah satu tweet saya yang menggunakan Meta Tags Twitter Card.

Alasan Kenapa iPhone Selalu Jadi Smartphone Terbaik Hingga Saat Ini: Alasan Kenapa iPhone… https://t.co/JHOgZla9VR
— Dicky Khusnaedy (@DiickyKhusnaedy) 2 Mei 2017

Gimana tampilan tweet-nya? Menarik bukan? Dengan begitu diharapkan bisa mengundang lebih banyak pembaca lagi. Nah, jika kamu ingin membuat tampilan tweet seperti pada demo diatas ketika share artikel ke Twitter, kamu bisa mengikuti tutorial cara memasang Meta Tags Twitter Card Untuk Blogger berikut ini.

Cara Mudah Memasang Meta Tag Twitter Card Untuk Blogger

Ada beberapa tahap yang harus kamu lakukan sebelum menerapkan Meta Tags Twitter Card ini ke blog kamu, yaitu seperti berikut ini.

1. Memilih Card Type

Sebelum memasang Meta Tags Twitter Card ke blog, kamu harus memilih Card Type yang akan kamu terapkan ke blog kamu. Ada 4 Card Type yang bisa kamu pilih sesuai dengan konten blog kamu, yaitu diantaranya :

Summary Card - Twitter Card jenis ini merupakan Twitter Card default atau bawaan dari Twitter yang akan menampilkan judul blog, judul artikel, deskripsi blog, deskripsi artikel, ringkasan artikel, dan thumbnail image atau gambar ilustrasi yang ada di postingan blog.
Summary Card with Large Image - Twitter Card jenis ini hampir sama dengan Summary Card, hanya saja yang membedakannya Twitter Card jenis ini menampilkan gambar dengan ukuran yang lebih besar.
App Card - Twitter Card jenis ini akan menampilkan detail sebuah aplikasi mobile dengan direct download atau link download-nya.
Player Card - Twitter Card jenis ini akan menampilkan audio, video, atau media lain

Untuk info lengkapnya mengenai Card Type kamu bisa mengunjugi link https://dev.twitter.com/cards/types.

2. Memasang Meta Tags Twitter Card

Berikut ini kode Meta Tags Twitter Card jenis Summary Card with Large Image yang saya gunakan pada blog ini. Berikut cara memasangnya.

1. Login ke Blogger > Theme/Tema > Edit HTML.

2. Copy dan paste kode berikut ini dibawah <head>

<!-- Meta Tag SEO Twitter --> <meta content='summary_large_image' name='twitter:card'/> <meta content='@DiickyKhusnaedy' name='twitter:site'/> <meta content='@DiickyKhusnaedy' name='twitter:creator'/> <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <meta expr:content='data:blog.canonicalUrl' name='twitter:url'/> <meta expr:content='data:blog.pageName' name='twitter:title'/> <meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/> <b:else/> <meta expr:content='data:blog.homepageUrl' name='twitter:url'/> <meta expr:content='data:blog.pageTitle' name='twitter:title'/> <meta content='URL-IMAGE' name='twitter:image:src'/> </b:if> <b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription' name='twitter:description'/> <b:else/> <meta expr:content='&quot;Silahkan baca artikel &quot; + data:blog.pageName + &quot; ini selengkapnya di &quot; + data:blog.title + &quot;&quot;' name='twitter:description'/> </b:if> <meta expr:content='data:blog.canonicalUrl' name='twitter:url'/> <!-- Meta Tag SEO Twitter End -->

Note :

Ganti @DiickyKhusnaedy pada twitter:site dan twitter:creator dengan username akun Twitter punya kamu.
Ganti URL-IMAGE dengan URL Image Logo Blog kamu atau images lainnya dengan ukuran 280 X 150 px. Tujuannya untuk menggantikan gambar jika di postingan artikel kamu tidak ada gambar atau bisa dikatakan Gambar Alternatif atau ketika halaman homepage blog kita di tweet.
Jika blog kamu tidak menggunakan gambar dengan ukuran besar, maka kamu bisa mengganti kode summary_large_image dengan kode summary. Nantinya image atau gambar akan tampil dalam bentuk thumbnail disamping deskripsi. (seperti pada contoh tweet diatas)

3. Save Template.

3. Card Validation atau Validasi Twitter Card

Setelah memasang Meta Tags Twitter Card ke dalam blog, hal yang harus kamu lakukan selanjutnya adalah melakukan Card Validation dengan validator yang telah disediakan oleh Twitter. Tujuannya adalah untuk memastikan bahwa Meta Tags Twitter Card yang kamu pasang ke dalam blog dapat berjalan dengan sempurna. Untuk melakukan Card Validation, ikuti langkah - langkah berikut ini.

1. Kunjungi link https://cards-dev.twitter.com/validator. Lalu, login dengan akun Twitter kamu.

2. Masukkan URL Blog kamu. Kemudian klik "Preview Card'.