Twitter Card adalah sebuah kode perintah Meta Tag HTML khusus yang dapat diterapkan di blog. Menurut situs resmi Pengenalan Twitter Card, dengan menggunakan Twitter Card, kita dapat menambahkan Foto atau Video dengan pengalaman baru yang dapat mengarahkan menuju situs blog dengan cara yang berbeda dan unik.
1. Card Types
Twitter card untuk blog atau website ada dua jenis, yakni gambar kecil dan gambar besar.
a. Summary Card Jika kita menggukan tipe card ini, maka yang akan ditampilkan adalah judul, deskripsi, thumbnail, dan Twitter akun atribusi. Hasilnya seperti ini :
b. Summary Card with Large Image
Jika menggukan tipe cards ini, yang akan ditampilkan masih seperti Summary Card, hanya saja pada tipe ini, ukuran thumbnail lebih besar. Hasilnya seperti ini:
Ada juga yang disebut App Card --untuk pengembangan aplikasi-- dan Player Card --untuk menampilkan video, audio, dan media (foto dan kumpulan foto). Selengkapnya: https://dev.twitter.com/cards/types
4. Simpan Template!
b. Summary Card with Large Image
Jika menggukan tipe cards ini, yang akan ditampilkan masih seperti Summary Card, hanya saja pada tipe ini, ukuran thumbnail lebih besar. Hasilnya seperti ini:
Ada juga yang disebut App Card --untuk pengembangan aplikasi-- dan Player Card --untuk menampilkan video, audio, dan media (foto dan kumpulan foto). Selengkapnya: https://dev.twitter.com/cards/types
Cara Memasang Meta Tag Twitter Card di Blogger/Blogspot
1. Template > Edit HTML
2. Cari kode <head>
3. Copas kode berikut ini tepat di bawah kode <head>
<!-- [ Twitter card meta tag ] -->
<meta expr:content='data:blog.title' name='twitter:site'/> <b:if cond='data:blog.url == data:blog.homepageUrl'> <meta expr:content='data:blog.title' name='twitter:title'/> <b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription' property='og:description'/> <b:else/> <meta expr:content='"Silakan kunjungi " + data:blog.pageTitle + "untuk membaca postingan-postingan menarik."' property='og:description'/> </b:if> </b:if> <b:if cond='data:blog.pageType == "item"'> <meta expr:content='data:blog.pageName' name='twitter:title'/> <b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription' name='twitter:description'/> <b:else/> <meta expr:content='"Silakan baca artikel " + data:blog.pageName + " ini selengkapnya di " + data:blog.title + ""' name='twitter:description'/> </b:if> </b:if> <b:if cond='data:blog.postImageUrl'> <meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/> <b:else/> <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='data:blog.postThumbnailUrl' name='twitter:image:src'/> <b:else/> <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCB8p4Jk8HqaA55C3OYVgtPTd4tyJhyphenhyphenLO0n-R2wR3jVRBBloomqtxUXz9aRQgHhhYv15wu6l0n5Ub19Aw_STfWBkJY_UAKfOP27Z5ycAkxMqXYfMarLpX5sG02THAu4BTNw0_O61yvWtYk/s1600/twittercards.png' name='twitter:image:src'/> </b:if> </b:if> <meta content='summary_large_image' name='twitter:card'/> <meta content='@username' name='twitter:creator'/>
4. Simpan Template!
Untuk menguji apakah Meta Tag Twitter sudah berfungsi:
1. Login ke akun Twitter. Lalu buka https://cards-dev.twitter.com/validator
1. Login ke akun Twitter. Lalu buka https://cards-dev.twitter.com/validator
2. Masukkan URL (boleh Home Page atau Post Page) ke Kotak Card URL.
3. Klik “Preview Card”. Hasilnya akan seperti ini:
3. Klik “Preview Card”. Hasilnya akan seperti ini:
Demikian Cara Memasang Meta Tag Twitter Card di Blogger Agar Tampilan Share Lengkap.*
Post a Comment
Post a Comment