Twitter sebagai salah satu jaringan informasi yang sangat populer di dunia bisa menjadi salah satu media yang dapat kita gunakan untuk membantu mempopulerkan halaman blog yang kita miliki, caranya dengan share atau berbagi halaman blog ke twitter, sehingga halaman blog memiliki kesempatan untuk dikunjungi oleh pengguna twitter.

sebagai salah satu situs profesional twitter menyediakan kode khusus yang dapat digunakan untuk memfasilitasi halaman blog agar lebih mudah bisa dishare ke twitter,  kode tersebut dikenal dengan nama twitter card, berupa kode perintah meta tag HTML dengan aturan khusus yang dapat dipasang atau diletakan di template blog, baik blog berflatform blogspot, wordpress maupun flatform blog lainnya.

Baca Juga: Cara Memasang Facebook Open Graph di blogspot.

Ketika pengunjung blog melakukan share artikel blog yang kita miliki ke twitter melalui tombol share twitter yang kita sediakan di halaman blog yang kita miliki, maka twitter akan membaca dan berusaha untuk menemukan kode twitter card yang terpasang pada blog tersebut, jika informasi twittercard ditemukan maka artikel blog akan dishare dihalaman twitter yang share dengan tampilan sesuai pengaturan kode twitter card yang kita pasang.

Mengenal Kode Meta Tag Twitter Card

Berikut beberapa kode meta tag twitter card yang bisa di pasang pada blog anda untuk menyimpan informasi yang dibutuhkan oleh mesin twitter untuk data share:

#1- twitter : card

Untuk menentukan jenis card yang ingin digunakan, ini akan menentukan jenis tampilan share sesuai dengan jenis card type yang kita pilih:

Format:
<'meta name='twitter:card' content='jenis_card'/>
Jenis_card yang bisa anda gunakan adalah sebagai berikut:

a. Summary, menampilkan share dengan thumbnail.
Jenis card ini cocok untuk share artikel postingan blog dengan thumbnail, jika anda memilih card ini maka tampilan share akan terlihat kurang lebih akan terlihat seperti gambar dibawah ini:

tampilan twitter summary card

b. Summary_large_image, menampilkan share dengan large image.
Jenis card ini sangat cocok untuk share artikel blog dengan gambar besar, Jika anda memilih card jenis ini maka tampilan hampir mirip dengan summary namun menampilkan gambar yang lebih besar seperti gambar dibawah ini:

tampilan summary card with large image

c. photo, untuk menampilkan photo saja,
Jenis card ini cocok sekali digunakan untuk share photo saja, tampilan twitter photo card terlihat seperti gambar dibawah ini:

contoh tampilan twitter photo card

d. gallery, dapat menampilkan beberapa koleksi photo
Sama halnya dengan sumary lager image namun menampilkan beberapa foto gallery.

e. app, Untuk share applikasi mobile dengan direct download.

f. Product Card, Untuk Share product

Contoh Penggunaan:
<'meta name='twitter:card' content='summary_large_image'/>

#2 - twitter : url

Digunakan untuk menyimpan informasi url artikel blog anda yang dishare

Contoh Penggunaan:
<meta name="twitter:url" content="http://strukturkode.blogspot.com"/>

#3 - twitter : description

Digunakan untuk menyimpan informasi descripsi share, anda bisa mengisinya dengan descripsi dari artikel yang dishare. atau descripsi apapun yang mewakili isi artikel yang akan dishare.
Contoh Penggunaan:
<meta name="twitter:description" content="ini diisi degan deskripsi yang mewakili artikel secara keseluruhan"/>

#4 - twitter : title

Digunakan untuk menyimpan informasi judul yang mewakili artikel yang dishare
contoh penggunaan:
<meta name="twitter:title" content="letakan judul disini"/>

#5 - twitter : image

Digunakan untuk menyimpan informasi gambar yang akan ditampilkan di halaman share twitter, anda bisa mengisinya dengan gambar yang sesuai dengan gambar yang anda pasang pada artikel blog anda.
Contoh penggunaan:
<meta name="twitter:image" content="url gambar"/>
Untuk lebih detail anda bisa baca disini: https://dev.twitter.com/cards/types

Cara Memasang Meta Tag Twitter Card di Blogspot

Untuk share artikel blog ke halaman twitter, twitter card yang paling cocok digunakan adalah summary atau summary_large_image, jika memilih summary maka share akan menampilkan judul, deskripsi, thumbnail image dan juga atribusi twitter, jika memilih summary_large_image, maka tampilan share mirip dengan summary namun dengan tampilan gambar yang lebih besar.

Summary cocok sekali digunakan jika artikel mengandung gambar yang tidak terlalu besar, sedangkan summary_large_image akan cocok sekali digunakan jika artikel mengandung gambar dengan ukuran yang besar.

Berikut saya akan contohkan cara memasang meta tag twitter card untuk blogspot dengan menggunakan card summary_large_image,  langkah-langkahnya adalah sebagai berikut:

a. Masuk ke Edit HTML Blog anda

c. Cadi kode </head

d. letakan kode twitter card dibawah ini diatas kode </head

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta name='twitter:url' expr:content='data:blog.canonicalUrl'/>
<meta name="twitter:title" expr:content='data:blog.pageName'/>
<b:if cond='data:blog.metaDescription'>
<meta name="twitter:description" expr:content='data:blog.metaDescription' />
<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>
</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 name="twitter:image:src" content='alternatif_image_url' />
</b:if>
</b:if>
<meta name='twitter:card' content='summary_large_image'/>
<meta name='twitter:creator' content='@TwitterUserName' />

Kode diatas akan menghasilkan tampilan share dengan gambar lebih besar, silahkan ganti alternatif_image_url, dengan alamat url gambar yang anda inginkan, ini adalah gambar yang akan digunakan jika didalam artikel yang dishare tidak mengandung gambar.

Jika anda menginginkan gambar menggunakan thumbnail anda bisa ubah text summary_large_image dengan summary.

kemudian silahkan ganti juga @TwitterUserName dengan user name twitter anda untuk identitas creator.

Anda juga bisa mengganti tulisan berwarna biru diatas dengan deskripsi apapunyang anda inginkan, tulisan warna biru adalah alternatif deskripsi share yang akan ditampilkan jika meta deskripsi artikel blog tidak diaktifkan atau artikel blog tidak memiliki meta deskripsi. 

e. Jangan lupa simpan Template blog anda.
 

Kolaborasi Twitter Cards Versus Facebook Open Graph 

Mesin twitter ternyata bisa membaca perintah facebook open graph, Jika di dalam template blogspot anda kebetulan anda sudah memasang facebook open graph anda bisa menggabungkan facebook open graph dengan tambahan sedikit meta tag twitter card, sehingga bisa digunakan untuk facebook share dan juga twitter share dengan kode yang lebih singkat.

Mesin twitter akan membaca informasi yang terdapat didalam perintah meta tag open graph untuk digenerate menjadi konten share twitter jika twitter tidak menemukan perintah meta tag twitter card.

Contoh Berikut adalah kolaborasi antara kode meta tag facebook open graph dan kode meta twitter card menggunakan summary large image, langkah-langkahnya adalah sebagai berikut:

a. Masuk ke Edit HTML Blog anda

c. Cadi kode </head

d. letakan kode twitter card dibawah ini diatas kode </head

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='&quot;Silahkan baca artikel &quot; + data:blog.pageName + &quot; ini selengkapnya di &quot; + data:blog.title + &quot;&quot;' property='og:description'/>
</b:if>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>

<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='Alternatif_image_url' property='og:image'/>
</b:if>
</b:if>
<meta content='fb_admin' property='fb:admins'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@Twitter_User_Name' name='twitter:creator'/>

 Kode diatas bisa digunakan untuk share facebook dan juga share twitter dengan summary_large image,

Silahkan anda ganti tulisan warna biru diatas dengan deskripsi yang anda inginkan atau biarkan saja, tulisan warna biru untuk alternatif deskripsi jika didalam artikel yang anda share tidak terdapat meta deskripsi.

Alternatif_image_url, silahkan anda ganti dengan url gambar pengganti jika didalam artikel yang anda share tidak menyertakan gambar apapun.

fb_admin, anda bisa ganti dengan id facebook anda, untuk mendapatkan id Facebook anda bisa masuk ke halaman facebook anda, pada menu dengan tulisan nama anda yang letaknya disamping kiri menu beranda, silahkan anda klik kanan kemudian pilih sub menu salin lokasi tautan, anda akan mendapatkan seperti  https://facebook.com/ajidin, silahkan anda gunakan dengan menghilangkan https://facebook.com/ untuk mengganti fb_admin, sebagai contoh untuk id facebook saya adalah:
<meta content='ajidin' property='fb:admins'/>
@Twitter_User_Name anda bisa ganti dengan user name twitter anda atau halaman twitter yang mewakili halaman blog diteitter sebagai identitas creator.
  
e. Jangan lupa simpan template anda


Validasi Twitter Card Anda 

 Setelah anda berhasil memasang meta tag twitter card di template blogspot anda, langkah selanjutnya adalah melakukan card validasi dengan menggunakan card validator yang disediakan oleh twitter. tujuannya adalah memastikan bahwa twitter card yang anda pasang sudah benar dan sesuai dengan tampilan share yang anda inginkan

langkah-langkahnya adalah sebagai berikut:

a. Masuk ke halaman twitter card validator.

b. Silahkan masukan salah satu url artikel blog anda,

c. Tekan tombol "Preview Card", anda akan melihat tampilan share dari artikel blog anda, disertai dengan informasi log, apakah kode perintah twitter card yang anda gunakan sudah benar atau tidak, jika terdapat warning silahkan anda perbaiki sesuai dengan petunjuk yang diberikan.

Demikian artikel mengenai Cara Memasang Meta Tag Twitter Card di Blogspot : lengkap, semoga bermanfaat. 
 

7 komentar:

  1. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. yang warna biru tidak diganti tidak masalah gan, untuk alternatife image url harus agan isi dengan link ke gambar yang nanti akan menggantikan gambar jika di dalam postingan artikel yang dishare tidak mengandung gambar

      Delete
  2. Maaf, apa ada pengaruhnya bagi blog memasang meta tag Twitter ? Mengapa blog ini tidak memasang meta tag Twitter maupun Facebook Open Graph ? Tidak ada dampak positif dalam hal SEO ? Btw, kalau bisa saya request artikel cara mengembalikan trafik blog agar kembali banyak pada blog yang dijahili oleh orang nakal. Terima kasih.

    ReplyDelete
    Replies
    1. hanya untuk blog yang memasang tombol share twitter,

      Tag twitter dipasang tujuannya adalah agar blog ketika dishare melalui tombol share pada blog agan, bisa tampil di status twitter sesuai dengan yang kita atur.

      Delete
    2. Itu blognya dijahili kenapa emang gan?

      Delete
  3. Gan saya sudah pasang, tapi kok setelah di share lewat button share tidak seperti yang di preview ya? Apa harus diganti juga kode button share di blog saya gan? Thanks sebelumnya.

    ReplyDelete

Silahkan berkomentar yang sesuai dengan topik, Mohon Maaf komentar dengan nama komentator dan isi komentar yang berbau P*RN*GRAFI, OB*T, H*CK, J*DI dan komentar yang mengandung link aktif, Tidak akan ditampilkan!