Simple Guide: Menggunakan Twitter Card pada Platform Blogspot

Oleh Arif Munandar pada tanggal Maret 27, 2016

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?

Baca juga: Loh, Kok Ada Normal 0 False False False EN-US X-NONE X-NONE di Blog Post Saya?

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.

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.