Twitter Cards diperkenalkan Twitter di Awal 2012 lalu. Sudah banyak yang memakai sehingga banyak pula yang mendapat laba 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 ibarat 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 mempunyai arahan snippet sendiri. Disusul kemudian oleh Pinterest dan beberapa platform social media lain yang juga mengandalkan opengraph.
Nah, alasannya ialah platform lain ibarat WordPress mempunyai aneka macam plugin untuk menambahkan opengraph dan Twitter Cards, maka menampilkan snippet Twitter Cards ialah hal gampang. Tidak heran jikalau aneka macam website dan blog berbasis WordPress dapat dibilang 90% telah memakai fitur ini. Sedangkan untuk platform Blogger, alasannya ialah harus melaksanakan hack tersendiri, belum banyak yang menerapkannya. Dalam kesempatan ini saya ingin menyerukan, cieee.. mengajak sahabat semua untuk mengoptimasikan kontennya di Twitter dengan lebih baik, salah satunya dengan Twitter Cards ini.
Jenis Twitter Cards
Twitter mempunyai 7 jenis cards, yang masing-masing mempunyai fungsi dan ditampilkan dengan cara berbeda:
- 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).
- Summary Card With Large Image: Sama ibarat di atas, tapi memakai gambar yang lebih besar, berada di atas, diikuti snippet lain di bawahnya.
- Photo Card: Isinya hanya gambar yang diunggulkan (featured image)
- Gallery Card: Snippet untuk konten yang berisi galeri gambar, yang ditampilkan di snippet ada 4 gambar.
- App Card: Snippet aplikasi mobile lengkap dengan link downloadnya
- Player Card: Snippet untuk menampilkan konten audio/video
- 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). Makara 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 mempunyai aneka macam arahan otomatis (XML tags) tersendiri untuk print (mencetak) aneka macam informasi konten, contohnya judul, deskripsi, gambar post, dan lain sebagainya (meta exp:content="xmlTags"). Selain itu Blogger juga mempunyai Conditional Tags yang dapat digunakan dan diterapkan pada jenis hack ini.
Kode snippet dasar yang dapat digunakan ialah (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 dapat menampilkan snippet post dengan jenis Summary Card, yaitu dengan thumbnail di samping.
Tapi bagaimana dengan yang tidak mempunyai meta deskripsi pada post? Bagaimana jikalau ingin mengkhususnya pada halaman post saja? Nah, kita butuh conditional tags di sini. Makara kita kembangkan. Perhatikan pada bab meta description juga.
<b:if cond='data:blog.pageType == "item"'>
<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 ialah untuk menampilkan snippet khusus halaman pos, dan jikalau 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 jikalau ingin menampilkan dalam bentuk snippet sederhana.
Untuk yang lebih kompleks, kita dapat memakai aneka macam conditional tags milik Blogger. Gunakan snippet berikut untuk menampilkan snippet dalam bentuk Summary Large Image. Akan sangat kompleks dan panjang untuk dijelaskan, jadi silahkan eksklusif digunakan atau dapat 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), jikalau sama, berarti kedua akun dapat ditulis sama.
- 435 adalah nilai lebar gambar (dalam piksel), ini ukuran default sesuai lebar halaman konten twitter. Biarkan jikalau ingin lebarnya sesuai defaultnya.
- 375 adalah nilai tinggi gambar (dalam piksel), dapat 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 arahan snippet yang anda pilih di bawah <head>, atau dapat di bawah meta tags lain yang sudah anda tambahkan,
3. Save.Validasi Twitter Cards
Untuk melihat apakah snippet yang anda tambahkan sudah sempurna dan benar, gunakan fitur validasi Twitter. Fitur ini dulu juga digunakan untuk mendaftarkan situs yang telah mengandung arahan snippetnya, tapi sekarang tidak perlu lagi. Setiap halaman web yang sudah mengandung snippet Twitter Cards otomatis tervalidasi. Fitur ini sekarang 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 biar snippet deskripsi tidak terpotong (tidak mengambil dari teks awal pos).
2. Jika memakai summary large image, pastikan ukuran resolusinya tidak terlalu kecil biar gambar tidak pecah.
0 Response to "Menambahkan & Menampilkan Snippet Twitter Cards Untuk Blogger"
Post a Comment