Simple Guide: Menggunakan Twitter Card pada Platform Blogspot | Good Ideas. Great Stories. -->
Menggunakan Twitter Card pada Blogger Blogspot

"Eh, blogspot bisa nggak sih make Twitter Card?"

Bisa dong. Bisa banget malahan. Tentu saja kalo kita udah ngerti implementasi dari Twitter card itu sendiri. Sebelumnya, buat lo yang belum tau apa itu Twitter Card, sederhananya bisa liat langsung di aplikasi Twitter mobile maupun web. Pernah lihat nggak ada tampilan snippet atau cuplikan dari link web yang tampil di timeline Twitter lo?
Nah, itu adalah implementasi dari Twitter Card ini tadi. Ya, web atau blog yang dibagikan akan terlihat lebih keren aja dengan adanya snippet ini. Oh iya, di Facebook juga ada kok. Open Graph Facebook gitu.

Kalo ngeblog dengan platform Wordpress, lo udah nggak perlu pusing mikirin Twitter Cardnya lagi. Soalnya secara default udah support Twitter Card, baik yang Wordpress versi gratis maupun berbayar. Bahkan kalo pake hosting Wordpress (yang berbayar), lo bisa dengan mudah menggunakan plugin Yoast SEO dan bebas untuk kustomisasi Twitter Cardnya.



Terus kalo pake platform blogspot gimana? Nah, sayangnya nih ya Blogger nggak nyediain plugin seperti Wordpress. Tapi itu nggak masalah kok, soalnya kita bisa tweak dikit html editornya buat nyisipin coding Twitter Cardnya.


Twitter Card

Card dari Twitter sendiri macem-macem jenisnya. Ada summary berupa snippet kecil sampe app card yang ada tombol click to actionnya. Bisa berupa install atau signup. Nah, kalo app card pastinya udah sering banget lo liat di aplikasi mobile Twitter. Biasanya tambil dalam bentuk iklan dari Twitter.

Tampilan Twitter Card versi mobile
Berbagai jenis Twitter Card untuk aplikasi mobile


Selengkapnya lo bisa baca banyak tentang card ini di situs resmi dari Twitter. Gue lebih suka make Summary Card with Large Image. Selain lebih gede, lebih enak aja liat thumbnail yang fotonya terlihat lebih jelas.

Code

Langsung aja ya, buat kodingnya sendiri cukup gampang dan sederhana kok. Apalagi kalo ngerti conditional tag XML milik Blogger, bisa jadi lebih gampang banget. Atau kalo mau tau lebih banyak, lo bisa baca Layout Data Tags yang didukung oleh Blogger.

Well, understanding the code actually not difficult at all.  It seems more difficult to understand your cranky girlfriend. Ah! Just kidding!

<-- Twitter Card Start -->
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@username' name='twitter:site'/>
<meta content='@username' name='twitter:creator'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
      <meta expr:content='data:blog.url' name='twitter:url'/>
      <meta expr:content='data:blog.pageName' name='twitter:title'/>
      <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
      <b:else/>
      <meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
      <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>

<b:if cond='data:blog.postImageUrl'>
      <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
      <meta expr:content='data:blog.pageName' name='twitter:title'/>
      <b:else/>
      <meta content='#favico-url' name='twitter:image'/>
      <meta expr:content='data:blog.title' name='twitter:title'/>
</b:if>
<-- Twitter Card End -->

Baca juga: Tips Desain Blog dari Blogger Profesional

Koding diatas gue pake buat bikin meta kondisi dan meta konten Twitter Card di blogspot. Silakan copy koding diatas dan paste di html editor kalian dibawah tag <head>. Terus untuk tag kondisional, bisa digabung dengan tag yang sudah ada.

Meta Description

Sekarang, untuk snippet kecil bernama deskripsi, kita bisa menggunakan tag data:blog:metaDescription milik blogspot. Cara settingnya? Gampang, lo bisa make deskripsi penelusuran yang ada di setiap post milik lo.

Deskripsi Penelusuran untuk Twitter Card


Kalo tab itu belum muncul, artinya harus diaktifin terlebih dahulu. Buka Setelan > Preferensi Penelusuran. Kemudian Aktifkan deskripsi penelusuran? Ya.

Nah, tab deskripsi penelusuran tadi bisa dipake buat nampilin snippet deskripsinya. Setelan ini nggak cuman bisa dipake buat post loh, buat page juga bisa kok.

Card Validator

Kalo udah ngelakuin semua langkah di atas, selanjutnya lo bisa melakukan validasi Twitter Card yang udah diimplementasikan menggunakan Twitter Card Validator. Hal ini bertujuan untuk memastikan bahwa Twitter Card yang diatur itu udah bener dan sesuai dengan aturan Twitter Card.

Jangan lupa untuk periksa log dibawahnya buat jaga-jaga kalo ada yang belum beres. Terus lanjut beresin sesuai log error yang terjadi. Make sure everythings are under control :D

Tips

Koding diatas nggak lepas dari masalah. Contohnya, image atau foto yang tampil di card bisa jadi pecah-pecah. Nah, untuk mengatasinya, jangan pernah paksain ukuran gambarnya. Kalo tetep mau responsive, gunakan auto untuk value tinggi sama lebarnya.

Selain itu, ukuran gambar di post aslinya juga usahakan jangan diperkecil. Supaya aman, aturlah foto atau gambar yang digunakan untuk tetap pada original size agar ukurannya nggak terlalu kecil.

Baca juga: Wajib Ngerti: Nyantumin Foto Buat Blog Lo

Gampang kan? Nah, kalo di blogspot atau blogger emang gitu. Walaupun gampang, agak sedikit ribet bagi yang belum terbiasa. Sebab, nggak ada tool maupun plugin dan kita harus berani tweak sendiri. Kalo mau gampang, lo bisa pake layanan hosting dan make Wordpress seperti yang udah gue bilang tadi di atas. Atau bisa juga download template yang Twitter Cardnya udah built-in.

Hope that helps!

Kalo lo punya pertanyaan, let me know in the comments section below. I will reply as soon as possible.


Image credit: pexels.com

Komentar 49

Sampaikan pendapatmu di sini:

  1. Udah nyobain. It works! Thanks for guide! :D

    BalasHapus
  2. Newbie blogger emang gini.. gak tau ada yg begituan.. hehe

    BalasHapus
  3. kayaknya saya kudet banget deh nggak ngerti apa itu twitter card :(

    BalasHapus
  4. Kudu banyak belajar ini aku :-)

    BalasHapus
  5. hahaha bang jung, aku gak paham sama kode kode coding begituan apalagi HTML hahaha enggak paham saya bang :')

    BalasHapus
  6. Terima kasih untuk tutorial, I'll try it first

    BalasHapus
  7. Bisa di pelajari dulu nanti deh hehehe.

    BalasHapus
  8. baru tau ada twitter card.... kpn2 praktekin

    BalasHapus
  9. Sekarang udah ga make wp dan blogspot tapi make tumblr. Gimana dong?

    BalasHapus
    Balasan
    1. Tumblr udah built-in belum ya. Lupa hehe

      Hapus
  10. Waaaahh, aku malah baru tau nih. Makasih infonya, nyobain aahh :D

    BalasHapus
  11. Baru tau ada twitter card. Taunya cuma twitter widget aja. Hehe

    BalasHapus
  12. Mantap bang! Tempo hari aku nyoba banyak errornya :D

    BalasHapus
  13. Hahaa.. Ternyata aku kudet banget. Baru tau apa itu twitter card. Makasih ya Jung untuk share nya. Bakalan nyoba aah... :D

    BalasHapus
  14. Aaaakk. Ku baru tau....makasih yaaa ilmunyaaa :3

    BalasHapus
  15. Baru tau istilah twitter card :D jarang bgt sih pake twitter.. Hehe

    BalasHapus
  16. wah.... sangat membantu. sepertinya akan langsung di coba dan di praktekkan dengan baik. thanks mas

    BalasHapus
  17. Makasih infonya Jungg ๐Ÿ˜

    BalasHapus
  18. Baru tau ada Twitter card.
    Thanks & regards,

    Kandida

    BalasHapus
  19. Pertanyaan terjawab kenapa kalo wp langsung bisa ada twitter card. Terima kasih Jung :D

    BalasHapus
  20. Aku mah apa atuh.. Sama kayak komen di atas-atas. Baru tau twitter card. Hahha.....
    Mau praktekin di blogku ahh....

    BalasHapus
    Balasan
    1. Twitter Card udah lumayan lama kali, Nuy.. ๐Ÿ˜’

      Hapus
  21. Secara awangan, kelihatannya paham. Masih mode hp. Ntar cobain deh

    BalasHapus
  22. Twitter Card ini emang menarik buat dipakai, selain tampilan share blog kita jadi lebih cantik, orang yang lihat pun bakal tertarik buat klik karena pop up gambarnya. Sayang saya belum sempat utak-atik template, bookmark dulu, deh. :D

    BalasHapus
  23. Twitter card itu semacam: post link blog di twitter terus featured imaged blog otomatis kepublish juga yaa ??

    BalasHapus
    Balasan
    1. Yap! Bener banget om. Tapi imagenya gak kepublish jadi pic.twitter.com gitu. Nggak.

      Hapus
  24. Waduh twit card saya malah diilangin tuh.. seabis ganti templete dan sampai sekarang belum dipasang lagi.. muusti punya waktu khusus ngurua blog

    BalasHapus
  25. Paling seneng kalo dapet pengetahuan keren kaya gini *love love*

    BalasHapus
  26. Gede banget ini fontnya di hp. Suer

    BalasHapus
    Balasan
    1. Thanks masukannya teh. Udah dibenerin kok.

      Hapus
  27. Baru tau ada yg beginian. Ihh kudet sekali saya
    Cuma biasanya klo ganti2 koding, blog bs jadi lbh berat

    BalasHapus
  28. Waduh belum sempet buat Twitter Card lagi, dulu pernah coba..

    BalasHapus
  29. Wordpress memang dipermudah segala-gala-galanyaa๐Ÿ˜‚
    Tp tergantung juga plugin nya yg mana. Karena banyaaakk banget plugin buat twitter. Kadang juga sering bingung lebih baik pake yg mana.hmmm

    BalasHapus
  30. Saya udah cobain, tapi kok saya bingung ya. ini gunanya buat apa?

    BalasHapus
    Balasan
    1. Buat bikin card twitternya muncul kalo ada twit yang linknya dicantumkan om. Gitu

      Hapus
  31. Baru tau kalo thumbnail yg nongol di twitter itu namanya twitter card

    BalasHapus
  32. Wah, saya baru tau ttg ini Mas Jung. Ada twitt card segala. Ntar dicoba deh di blog. tengkyuuu

    BalasHapus
  33. oow jadi pas di share di twitter fotonya ada gitu yaa.. andai wordpress jg bisa

    BalasHapus
  34. kereen macam di fb gitu yaa share blog langsung ada fotonya, andai wordpress bisa juga kayak bgtu

    BalasHapus
  35. Aku kurang ngerti beginian :' untung pake wordpress, yang udah default :D

    BalasHapus
    Balasan
    1. Iya, kalo yang gamau ribet yapake yang udah built-in aja hehe

      Hapus
  36. 2020 dan baru nyoba, berhasil! terima kasih...

    BalasHapus

Good Ideas. Great Stories.

Feel free if you want to send an email to me and ask anything, or just to say hello!

hello@jungjawa.com

Copyright © jungjawa 2018