Pengertian Tentang Meta Twitter Card

Sepertinya kita akan membahas tentang meta tag lagi kali ini. Dan pembahasan tentang meta tag kali ini adalah meta tag "Twitter Card". Twitter juga gak mau kalah sama Facebook dengan Open Graph-nya. Saya juga pernah membahas tentang open graph Facebook sebelumnya di blog ini.

Baca Juga : Memasang Open Graph Facebook Di Blog

Sebenarnya tujuan pemasangan meta tag yang seperti ini kalau menurut pemikiran saya cuman satu, agar pengunjung tertarik dengan artikel yang kita bagikan di sosial media seperti Facebook, Twitter, Google+, istilah lainnya adalah 'Eye Catching'. Itu berarti lebih banyak pengunjung yang mengarah ke blog kita.

Tabel Bacaan

Summary Card Summary Card With Large Image Photo Card Gallery Card App Card Player Card Product Card

Dan untuk meta Twitter card ini ada beberapa jenisnya, salah satubya adalah:

• Summary Card
• Summary Card With Large Image
• Photo Card
• Gallery Card
• App Card
• Player Card
• Product Card

Untuk blog yang bertema seperti blog ini sih rata-rata (seharusnya) menggunakan jenis yang Summary Card. Meskipun kadang-kadang ada juga yang menggunakan jenis Summary Card With Large Image, tapi itu sih tergantung selera masing-masing. Tapi yang paling top untuk menarik pengunjung dari Twitter jenis yang With Large Image-lah yang paling pas. Tapi harus ada persyaratan untuk bisa memakai jenis yang ini, yaitu gambar yang ada di artikel yang kamu publikasi di blog minimal harus berukuran lebar sekitar 280px dan tinggi gambar sekitar 150px, dan ukuran gambar tidak boleh lebih dari 1Mb.

Dan mari kita bahas satu-persatu tentang Meta Twitter Card di blog tercinta kita ini:

1. Summary Card

Tipe Twitter Card yang ini adalah tipe default dari Meta Twitter Card. Bentuknya pun juga simpel, yaitu berupa Judul blog/artikel, deskripsi blog/artikel, thumbnail atau gambar blog/artikel, atribusi akun Twitter yang menulis dan akun blog/website asal artikel tersebut.

Tipe yang ini bisa digunakan oleh banyak jenis blog atau website. Tipe ini di desain untuk mengintip artikel yang kamu bagikan di Twitter nanti. Jadi tipe yang seperti ini nanti yang paling pas untuk para blogger yang mempunyai blog yang bertema sama seperti blog ini.

Contoh Meta Twitter Card tipe ini kira-kira seperti kode dibawah ini:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@AchmadMuharya" />
<meta name="twitter:title" content="Mad Trik" />
<meta name="twitter:description" content="Lihat artikel "Pengertian Tentang Meta Twitter Card" Selanjutnya lihat di blog Mad Trik" />
<meta name="twitter:image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Di2ESVBcue8t_QU-CbfxWPUhq0fhb0qPUDp6VQB8rbLIMQnxTQecKESv0CdjQe5w3oMXIoFPJ2gcd75BUxgLbOliwuwqnNlPdzTupnHEBOZS6NJp3MTnHihrgCkb7LKt3xgEaczoyVFm/s1600/Logo-Mad-Trik.png" />
<meta name="twitter:url" content="http://madtrik.blogspot.com/2015/01/pengertian-tentang-meta-twitter-card.html" />

2. Summary Card With Large Image

Tipe Twitter Card yang ini sebenarnya tidak berbeda jauh seperti tipe nomor satu, Summary Card. Cuman perbedaan yang paling mencolok untuk tipe yang satu ini adalah thumbnail atau gambar untuk tipe ini ukurannya lebih besar, makanya dinamakan 'Large Image'.

Tipe yang seperti ini kalau menurut saya paling pas digunakan untuk blog yang bertema tentang makanan, travelling, atau blog yang suka memasang gambar yang ukurannya besar-besar lah pokoknya.

Contoh Meta Twitter Card untuk tipe ini kira-kira seperti kode dibawah ini:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@AchmadMuharya">
<meta name="twitter:creator" content="@AchmadMuharya">
<meta name="twitter:title" content="Artikelnya Punya Gambar Lebih Besar">
<meta name="twitter:description" content="Entah kenapa artikel disini punya gambar yang lebih besar dari biasanya, ahh sudahlah yang penting punya artikel.">
<meta name="twitter:image:src" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Di2ESVBcue8t_QU-CbfxWPUhq0fhb0qPUDp6VQB8rbLIMQnxTQecKESv0CdjQe5w3oMXIoFPJ2gcd75BUxgLbOliwuwqnNlPdzTupnHEBOZS6NJp3MTnHihrgCkb7LKt3xgEaczoyVFm/s1600/Logo-Mad-Trik.png">

3. Photo Card

Tipe Twitter Card yang ini fungsinya lebih kepada menampilkan gambar atau thumbnail saja dan untuk deskripsinya tidak ditampilkan. Jadi jika blog kamu bertema tentang travelling, foto-foto, makanan, foto selfie kamu gitu paling pas pakai meta Twitter Card yang ini.

Contoh Meta Twitter Card tipe yang ini kira-kira seperti kode yang ada dibawah ini:

<meta name="twitter:card" content="photo" />
<meta name="twitter:site" content="@AchmadMuharya" />
<meta name="twitter:title" content="Foto Ganteng Admin Mad Trik" />
<meta name="twitter:image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Di2ESVBcue8t_QU-CbfxWPUhq0fhb0qPUDp6VQB8rbLIMQnxTQecKESv0CdjQe5w3oMXIoFPJ2gcd75BUxgLbOliwuwqnNlPdzTupnHEBOZS6NJp3MTnHihrgCkb7LKt3xgEaczoyVFm/s1600/Logo-Mad-Trik.png" />
<meta name="twitter:url" content="http://madtrik.blogspot.com/2015/01/pengertian-tentang-meta-twitter-card.html" />

4. Gallery Card

Tipe yang ini juga pas untuk kamu yang suka foto-foto. Dan tipe ini tidak beda jauh dengan tipe Photo Card, cuman disini bedanya adalah foto atau thumbnail ukurannya menjadi kecil, tapi foto atau thumbnail-nya ada banyak atau bermacam-macam tergantung berapa foto yang kamu masukin ke artikel kamu. Maksimal foto yang nantinya akan muncul adalah 4 foto.

Contoh meta Twitter Card untuk tipe ini kira-kira seperti ini:

<meta name="twitter:card" content="gallery" />
<meta name="twitter:site" content="@AchmadMuharya" />
<meta name="twitter:creator" content="@MadTrik" />
<meta name="twitter:title" content="Kumpulan Foto Tutorial Mad Trik">
<meta name="twitter:description" content="Disini adalah kumpulan foto tutorial yang ada di blog Mad Trik.">
<meta name="twitter:url" content="http://madtrik.blogspot.com/2015/01/pengertian-tentang-meta-twitter-card.html" />
<meta name="twitter:image0" content="http://www.fodors.com/ee/files/slideshows/telluride-resized.jpg">  
<meta name="twitter:image1" content="http://www.fodors.com/ee/files/slideshows/shutterstock_18216130-resized.jpg">  
<meta name="twitter:image2" content="http://www.fodors.com/ee/files/slideshows/3-marfa-texas.jpg">  
<meta name="twitter:image3" content="http://www.fodors.com/ee/files/slideshows/4-paia-maui-hawaii.jpg">

5. App Card

Tipe yang ini lebih bagus digunakan untuk website/blog yang bertema aplikasi ponsel ataupun smartphone. Jadi jangan pakai Meta Twitter Card yang ini ya kalau tema blog kamu bukan tema tentang aplikasi.

Contoh Meta Twitter Card kira-kira seperti dibawah ini:

<meta name="twitter:card" content="app">
<meta name="twitter:site" content="@TwitterDev">
<meta name="twitter:description" content="Cannonball is the fun way to create and share stories and poems on your phone. Start with a beautiful image from the gallery, then choose words to complete the story and share it with friends.">
<meta name="twitter:app:country" content="US">
<meta name="twitter:app:name:iphone" content="Cannonball">
<meta name="twitter:app:id:iphone" content="929750075">
<meta name="twitter:app:url:iphone" content="cannonball://poem/5149e249222f9e600a7540ef">
<meta name="twitter:app:name:ipad" content="Cannonball">
<meta name="twitter:app:id:ipad" content="929750075">
<meta name="twitter:app:url:ipad" content="cannonball://poem/5149e249222f9e600a7540ef">
<meta name="twitter:app:name:googleplay" content="Cannonball">
<meta name="twitter:app:id:googleplay" content="io.fabric.samples.cannonball">
<meta name="twitter:app:url:googleplay" content="http://cannonball.fabric.io/poem/5149e249222f9e600a7540ef">

6. Player Card

Seperti nama Meta Twitter Card-nya 'Player'. Pastinya Untuk tipe yang ini paling cocok digunakan untuk website yang memiliki tema foto *Loh* bukan....bukan tema itu yang saya maksud, tipe yang seperti ini paling cocok digunakan untuk website untuk tema musik atau video seperti Soundcloud & YouTube atau website-website musik atau video lainnya.

Untuk contoh kode meta card yang ini di halaman developer Twitter gak dijelaskan secara rinci, jadi kamu bisa cari ke sumber lainnya di website-website lainnya.

7. Product Card

Kalau ada kata produk pasti tidak jauh dari yang namanya jualan atau jual beli atau juga online shopping. Meta Twitter Card yang ini digunakan untuk mengoptimalkan produk atau item yang dijual di website kamu di Twitter. Jadi dengan menggunakan meta Twitter Card yang ini akan ada beberapa rincian tentang barang yang dijual seperti harga, nama barang tentunya, lokasi dijualnya, jenis barang dll.

Dan untuk contoh kode meta Twitter Cardnya kira-kira seperti ini:

<meta name="twitter:card" content="product">
<meta name="twitter:site" content="@iHeartRadio">
<meta name="twitter:creator" content="@iHeartRadio">
<meta name="twitter:domain" content="iheart.com">
<meta name="twitter:title" content="24/7 Beatles — Celebrating 50 years of Beatlemania">
<meta name="twitter:image" content="http://radioedit.iheart.com/service/img/nop()/assets/images/05fbb21d-e5c6-4dfc-af2b-b1056e82a745.png">
<meta name="twitter:label1" content="Genre">
<meta name="twitter:data1" content="Classic Rock">
<meta name="twitter:label2" content="Location">
<meta name="twitter:data2" content="National">

Nah, bagaimana apa sekarang kamu sudah paham dengan Pengertian Meta Twitter Card ini?, saya berani bertaruh kalau diantara kamu-kamu yang lihat artikel ini pasti tidak 'membaca' dengan seksama atau mungkin tidak baca sama sekali (faktor malas detected!). Ya, itu terserah kamu mau mendalami hal ini lebih dalam atau tidak ya terserah lah.

Jika sudah selesai maka saatnya buat kamu untuk mengaktifkan Twitter Card yang sudah kamu pasang tadi.

Jadi kalau ada pertanyaan, lebih baik kamu kunjungi dulu halaman developer Twitter berikut ini [Twitter Developer]. Semoga dengan adanya artikel ini kamu bisa lebih mengerti tantang Meta Twitter Card ini.