Ditulis oleh: Ditulis pada: 11/02/2014
Memasang Meta Twitter Card Markup Di Blogger - Seperti halnya Open Graph tags yang berfungsi untuk memberikan informasi data pada robot crawler jejaring sosial seperti Facebook, Google+, dan lainnya untuk menampilkan data sebuah halaman ketika di-share, maka Twitter Card tags pun memiliki fungsi yang sama yaitu memberikan data halaman sebuah web kepada Twitter's crawler untuk ditampilkan ketika halamannya di-tweet namun harus divalidasi terlebih dahulu agar bisa berfungsi.
Sehingga dengan begitu, URL atau halaman yang di-tweet memiliki content yang lebih kaya dibanding dengan tweet biasa yang tidak menggunakan Twitter Card tags.
Dengan ini, kita bisa menampilkan image, video, judul postingan, deskripsi postingan, penulis, url halaman, dan lain-lain pada tweet. Namun sedikit berbeda cara pemasangan Twitter Card tags ini dibanding dengan Open Graph Facebook. Meta tags Twitter Card memerlukan Card Validasi oleh Twitter untuk memastikan bahwa meta tags Twitter Card bisa dikenali robot crawl Twitter. Namun jika pada template sudah memasang Open Graph, maka pemasangan Twitter Card bisa dikombinasikan dengan Open Graph, tapi tetap harus melalui validasi Twitter agar Twitter mengenali meta tags Twitter Card dan Open Graph.
Sehingga tweet menjadi lebih menarik dan diharapkan akan membawa lebih banyak pembaca. Nah bagi yang ingin mencoba memasang meta tags Twitter Card ini, Anda perlu memerlukan beberapa hal seperti di bawah ini.
1. Memilih Card Type
Ada 7 macam card type yang bisa kita pilih sesuai dengan konten halaman web kita, di antaranya:- Summary Card - Ini adalah default card untuk menampilkan judul, deskripsi, thumbnail, dan atribusi akun Twitter.
- Summary Card with Large Image - Mirip dengan Summary Card, tetapi dengan menampilkan gambar yang lebih besar. Pilih ini jika postingan-postingan Anda menggunakan gambar yang besar.
- Product Card - Hanya menampilkan photo saja.
- Gallery Card - Menampilkan koleksi beberapa photo.
- App Card - Untuk menampilkan detail aplikasi mobile dengan direct download.
- Player Card - Untuk menampilkan video, audio, atau media lain.
- Product Card - Menampilkan informasi produk.
Card Type: https://dev.twitter.com/cards/types
2. Memasang Meta Tags Twitter Card
Di sini saya mencontohkan untuk meta tags Twitter Card yang menggunakan summary card with large image yang sudah saya gunakan. Untuk blog yang tidak memiliki atau tidak menggunakan gambar besar, Anda tinggal mengganti type/content
twitter:card saja.
<meta expr:content='data:blog.title' name="twitter:site"/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='"Silahkan kunjungi " + data:blog.pageTitle + "untuk membaca postingan-postingan menarik."' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' name="twitter:title"/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name="twitter:description"/>
<b:else/>
<meta expr:content='"Silahkan baca artikel " + data:blog.pageName + " ini selengkapnya di " + data:blog.title + ""' 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 content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPXrPbSC3mhLc2Fq-CwXV4QJHrLVogNcHcEzsraOq2h6fEob2AmpVdH5LHeDUPCOsltYi_Df8F9lmdV0dl3FyqkhMoQK_4HmxamUQRiGrIMm2vIxfM2j9UqJgkn263Yt4mm8dixFnrvaVl/s1600/no-image.jpg' name="twitter:image:src"/>
</b:if>
</b:if>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@YourUserName' name='twitter:creator'/>
Untuk blog yang tidak menggunakan gambar besar, kode
summary_large_image pada name='twitter:card' silahkan ganti dengan summary. Nantinya image yang ditampilkan berupa thumbnail di samping deskripsi postingan.
Dan
@YourUserName silahkan ganti dengan user name akun Twitter Anda.
Anda juga bisa mengganti URL image pada
name="twitter:image:src" yang paling bawah dengan URL gambar favicon blog Anda namun dalam ukuran yang besar untuk digunakan ketika postingan tidak memiliki gambar atau ketika halaman homepage kita di-Tweet.
Dan jika Anda sudah memasang Open Graph tags sebelumnya, maka Anda bisa menggabungkan meta tags Twitter Card ini dengan Open Graph dengan cukup menambahkan beberapa Twitter Card yang tidak ada di Open Graph. Twitter's parser akan menggunakan data dari Open Graph jika data dari Twitter Card tidak ditemkan. Di Bawah ini adalah gabungan Twitter Card dan Open Graph yang saya gunakan.
<b:if cond='data:blog.pageType == "item"'>
<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='"Silahkan baca artikel " + data:blog.pageName + " ini selengkapnya di " + data:blog.title + ""' property='og:description'/>
</b:if>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='"Silahkan kunjungi " + data:blog.pageTitle + "Untuk membaca postingan-postingan menarik."' property='og:description'/>
</b:if>
</b:if>
<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK34rJQWFB6QsWqZwSsZPvgZ1OGCYA9SrChv1xUIedVFubeZMNtMoDIUO-mVhyfI3zkV7cDvwGqtRErjDYuYDEm5laq2JY4FPSfMWjQQrt52fP2scKbX_I7LcXFqPY_BpZ-1hvReFnmFKm/s1600/Graphic1.png' property='og:image'/>
</b:if>
</b:if>
<meta content='100006644464463' property='fb:admins'/>
<meta content='480072895444481' property='fb:profile_id'/>
<meta expr:content='data:blog.title' name='twitter:site'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@KompiAjaib' name='twitter:creator'/>
Setelah semuanya selesai, silahkan save template blog Anda.
3. Card Validation
Setelah Anda memasang meta tags Twitter Card seperti langkah 2 di atas, sekarang silahkan Anda lakukan Card Validation dengan validator yang disediakan Twitter dengan login akun Twitter Anda.
Card Validator: https://cards-dev.twitter.com/validator
Silahkan akses url Card Validator di atas, kemudian masukan salah satu url postingan blog kita lalu klik tombol Preview Card. Kemudian silahkan lakukan Twitter Card approval (biasanya akan muncul tombol putih) untuk memberikan informasi hubungan akun Twitter Anda dengan website. Silahkan isikan data-data yang diminta kemudian klik Submit.
Selanjutnya jika Twitter telah menerima Twitter Card approval akan ada email masuk ke kotak masuk email Anda yang memberitahu bahwa Twitter Card Anda telah aktif. Dan perlu diperhatikan bahwa Twitter perlu waktu untuk menampilkan semua summary pada Tweet postingan-postingan blog Anda.
Pastikan juga Anda sudah memasang URL rel canonical di blog Anda, misalnya seperti kode berikut:
<link expr:href='data:blog.url' rel='canonical'/>.
Selamat mencoba... dan happy blogging...