Cara Memasang Meta Tag Twitter Card di Blogger Agar Tampilan Share Lengkap

Post a Comment
Cara Memasang Meta Tag Twitter Card di Blogger
Cara Lengkap Memasang Meta Tag Twitter Card di Blogger

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 :

Summary Card

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:

Summary Card with Large Image

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='&quot;Silakan kunjungi &quot; + data:blog.pageTitle + &quot;untuk membaca postingan-postingan menarik.&quot;' property='og:description'/> </b:if> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <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='&quot;Silakan baca artikel &quot; + data:blog.pageName + &quot; ini selengkapnya di &quot; + data:blog.title + &quot;&quot;' 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

twitter card validator

2. Masukkan URL (boleh Home Page atau Post Page) ke Kotak Card URL.
3. Klik “Preview Card”. Hasilnya akan seperti ini:

hasil twitter card preview


Demikian Cara Memasang Meta Tag Twitter Card di Blogger Agar Tampilan Share Lengkap.*

Related Posts

Post a Comment

Contact Form

Name

Email *

Message *