Menambahkan & Menampilkan Snippet Twitter Cards Untuk Blogger

cara memasang twitter cards blogger lengkap
Twitter Cards diperkenalkan Twitter di Awal 2012 lalu. Sudah banyak yang menggunakan sehingga banyak pula yang mendapatkan keuntungan dari Twitter Cards ini. Memahami Twitter Cards hampir sama dengan memahami Schema yang selama ini kita gunakan untuk mengoptimasi tampilan snippet konten di search engine (rich snippets). Sosial media lain seperti Facebook dan Google+ misalnya, telah lebih dulu mengandalkan meta opengraph untuk menampilkan snippet halaman website atau konten website di dalam timelinenya. Twitter Cards sedikit bergantung pada opengraph meskipun memiliki kode snippet sendiri. Disusul kemudian oleh Pinterest dan beberapa platform social media lain yang juga mengandalkan opengraph.

Nah, karena platform lain seperti WordPress memiliki berbagai plugin untuk menambahkan opengraph dan Twitter Cards, maka menampilkan snippet Twitter Cards adalah hal gampang. Tidak heran jika berbagai website dan blog berbasis WordPress bisa dibilang 90% telah menggunakan fitur ini. Sedangkan untuk platform Blogger, karena harus melakukan hack tersendiri, belum banyak yang menerapkannya. Dalam kesempatan ini saya ingin menyerukan, cieee.. mengajak sobat semua untuk mengoptimasikan kontennya di Twitter dengan lebih baik, salah satunya dengan Twitter Cards ini.

Jenis Twitter Cards


Twitter memiliki 7 jenis cards, yang masing-masing memiliki fungsi dan ditampilkan dengan cara berbeda:
  1. Summary Card: Sifatnya default atau merupakan setting bawaan, dii dalamnya ada judul, deskripsi, gambar thumbnail, akun terkait (link akun twitter untuk situs dan penulis), dan link atribusi (link pada judul dan di bawah snippets [view on the web], meski semuanya dalam bentuk shortlinknya twitter).
  2. Summary Card With Large Image: Sama seperti di atas, tapi menggunakan gambar yang lebih besar, berada di atas, diikuti snippet lain di bawahnya.
  3. Photo Card: Isinya hanya gambar yang diunggulkan (featured image)
  4. Gallery Card: Snippet untuk konten yang berisi galeri gambar, yang ditampilkan di snippet ada 4 gambar.
  5. App Card: Snippet aplikasi mobile lengkap dengan link downloadnya
  6. Player Card: Snippet untuk menampilkan konten audio/video
  7. Product Card: Snippet yang dioptimasikan untuk menampilkan informasi produk.
Dari ke 7 di atas, Untuk konten yang lazim ditemui pada blog Blogger hanya dua, yaitu Summary (dengan gambar thumbnail berada di samping) dan Summary Large Image (gambar besar di atas snippet). Jadi di sini saya hanya akan bahas dan berikan snippet untuk kedua jenis itu.

Menambahkan Kode Snippet Twitter Cards di Blogger


Meskipun tidak secara otomatis, untungnya Blogger memiliki berbagai kode otomatis (XML tags) tersendiri untuk print (mencetak) berbagai informasi konten, misalnya judul, deskripsi, gambar post, dan lain sebagainya (meta exp:content="xmlTags"). Selain itu Blogger juga memiliki Conditional Tags yang bisa digunakan dan diterapkan pada jenis hack ini.

Kode snippet dasar yang bisa dipakai adalah (default Summary Card):

      <meta content='summary' name='twitter:card'/>
      <meta content='@bukarahasiablog' name='twitter:site'/>
      <meta content='@ahkhoazmi' name='twitter:creator'/>
      <meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
      <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
      <meta expr:content='data:post.title' name='twitter:title'/>
      <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
       <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src' />

Snippet di atas sudah cukup untuk bisa menampilkan snippet post dengan jenis Summary Card, yaitu dengan thumbnail di samping.

Tapi bagaimana dengan yang tidak memiliki meta deskripsi pada post? Bagaimana jika ingin mengkhususnya pada halaman post saja? Nah, kita butuh conditional tags di sini. Jadi kita kembangkan. Perhatikan pada bagian meta description juga.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
      <meta content='summary' name='twitter:card'/>
      <meta content='@bukarahasiablog' name='twitter:site'/>
      <meta content='@ahkhoazmi' name='twitter:creator'/>
      <meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
      <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
      <meta expr:content='data:post.title' name='twitter:title'/>
       <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src' />
<b:if cond='data:blog.metaDescription'>
       <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
       <meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
</b:if>

Snippet di atas adalah untuk menampilkan snippet khusus halaman pos, dan jika tidak ada (else) meta deskripsi pada pos (ditambahkan melalui fitur meta deskripsi per post), akan ditampilkan beberapa kata dari paragraf awal pos. Gunakan snippet ini jika ingin menampilkan dalam bentuk snippet sederhana.

Untuk yang lebih kompleks, kita bisa menggunakan berbagai conditional tags milik Blogger. Gunakan snippet berikut untuk menampilkan snippet dalam bentuk Summary Large Image. Akan sangat kompleks dan panjang untuk dijelaskan, jadi silahkan langsung digunakan atau bisa dipelajari sendiri. Hehe...

<b:if cond='data:blog.pageType == "item"'>
<meta content='summary_large_image' name='twitter:card'/>
<b:else/>
<meta content='summary' name='twitter:card'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.title' name='twitter:title'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<meta content='@bukarahasiablog' name='twitter:site'/>
<meta content='@ahkhoazmi' name='twitter:creator'/>
<b:if cond='data:blog.metaDescription'>
 <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta content='435' name='twitter:image:width'/>
<meta content='375' name='twitter:image:height'/>
</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 expr:content='data:blog.blogspotFaviconUrl' name='twitter:image:src'/>
</b:if>
</b:if>
Contoh hasilnya:
Silahkan gunakan salah satu dari kedua jenis snippet di atas. Pastikan untuk mengubah beberapa poin berikut:

  • Ganti @bukarahasiablog dengan akun blog/situs anda.
  • Ganti @ahkhoazmi  dengan akun pribadi (penulis), jika sama, berarti kedua akun bisa ditulis sama.
  • 435 adalah nilai lebar gambar (dalam piksel), ini ukuran default sesuai lebar halaman konten twitter. Biarkan jika ingin lebarnya sesuai defaultnya.
  • 375 adalah nilai tinggi gambar (dalam piksel), bisa anda ubah sesuka hati.

Cara Menambahkan Via Edit HTML Blogger

1. Masuk Dashboard > Template > Edit HTML
2. Cari / Ctrl+F <head>, letakkan (paste) snippet salah satu kode snippet yang anda pilih di bawah <head>, atau bisa di bawah meta tags lain yang sudah anda tambahkan,
3. Save.

Validasi Twitter Cards


Untuk melihat apakah snippet yang anda tambahkan sudah tepat dan benar, gunakan fitur validasi Twitter. Fitur ini dulu juga digunakan untuk mendaftarkan situs yang telah mengandung kode snippetnya, tapi kini tidak perlu lagi. Setiap halaman web yang sudah mengandung snippet Twitter Cards otomatis tervalidasi. Fitur ini kini digunakan untuk melihat hasil tampilan snippet. Silahkan kunjungi halaman Card Validator, masukkan url salah satu post dan klik "Preview Card".

Catatan:

1. Sebaiknya fitur meta deskripsi setiap pos diaktifkan dan diisi agar snippet deskripsi tidak terpotong (tidak mengambil dari teks awal pos).
2. Jika menggunakan summary large image, pastikan ukuran resolusinya tidak terlalu kecil agar gambar tidak pecah.

That's it.

© copyright Ahmad Khoirul Azmi, published only for buka-rahasia.blogspot.com.

Menambahkan & Menampilkan Snippet Twitter Cards Untuk Blogger
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 4 Comment(s):

Elang Duta said...

menarik artikelnya

Mas Basrun said...

joss lah pokoknya

Ayib Prihatin said...

Manyap

Chanief Nugroho said...

Inspiratif !

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap