Maret 06, 2014

Menambah Twitter Cards Pada Platform Blogger

Menambah Twitter Cards Pada Platform Blogger - Dengan menambahkan twitter cards pada website atau blog anda yang ber-platform blogger, website atau blog anda akan lebih terlihat menarik dan professional ketika di share melalui twitter. Hal ini untuk mengurangi rasa jenuh pembaca yang bersumber dari twitter. Sehingga sebagai harapannya akan menarik pengunjung dari twitter sobat. Dengan twitter cards ini blog sobat akan memiliki nilai lebih dimata follower dan pembaca setia dari account twitter sobat. Semakin besar daya tarik blog sobat akan semakin besar peluang untuk menarik visitor masuk ke blog sobat. Untuk mengenal apa itu twitter card silahkan simak penjelasan dibawah ini.

DEMO TWITTER CARDS
(silahkan tekan tombol diatas untuk melihat hasilnya)

Penjelasan Singkat Twitter Cards


Twitter Cards Blogger

Twiter cards adalah fitur multimedia dari twitter developers yang digunakan untuk menampilkan berbagai konten blog ketika url blog di share di twitter. Pada blog yang terpasang twitter cards, ketika url blog tersebut di share ke twitter, maka akan tampil Gambar, Diskripsi, Penulis dan nama domain pada twitter post. Fungsi twitter cards ini mirip dengan opengraph facebook, yaitu untuk membuat tampilan thumbnail ketika blog sobat di share ke twitter, sehingga tidak membuat pembaca merasa bosan dengan tampilan twitter post sobat. Selain itu, dengan menggunakan fitur ini blog kita akan memiliki nilai lebih, dalam artian semakin banyak domain kita di share ke social media akan semakin besar pula nilai domain kita. Ini dibuktikan ketika sobat melihat pada layanan siteprice, kebanyakan pada situs layanan tersebut nilai yang diberikan juga mencakup berapa banyak domain kita di share ke social media, ini sebagai parameter seberapa terkenal domain sobat.

Twitter Cards dapat digunakan untuk berbagai jenis konten web, dari posting blog, artikel berita, photo, video, produk ataupun restoran. Fungsi dari twitter card ini hampir mirip dengan fitur yang dimiliki facebook opengraph. Pada twitter card ini kita bisa mengatur konten apa saja yang akan masuk ke dalam twitter pos ketika url blog kita di share ke twitter. Tampilan twitter post blog sobat akan lebih terlihat menarik dan proffesional hanya dengan memasang kode twitter card pada blog sobat. Card ini dirancang untuk memberikan pembaca preview konten sebelum mengklik website sobat.

Mengapa Menggunakan Twitter Cards

Sebagai seorang blogger sudah sewajarnya kita menyajikan informasi yang dikemas secara menarik. Twitter Cards ini membantu kita untuk menampilakan konten sepeti Gambar, foto, video, dan sebagainya ketika blog atau artikel kita di share melalui twitter sehingga tidak menampilkan kesan text yang kaku. Pembaca yang berasal dari twitter tidak akan merasa jenuh dengan tampilan post kita ketika kita promosi blog melalui twitter.

Jenis - Jenis Twitter Cards

Ada 7 jenis kartu yang dapat dilampirkan ke Tweet, masing-masing memiliki pengalaman konsumsi yang indah dibangun untuk web Twitter dan klien mobile:

1. Summary Card:

Ini adalah summary card default, berfungsi untuk menampilkan konten blog berupa judul, deskripsi, thumbnail, nama domain dan akun Twitter atribusi dengan thumnail kecil.


Twitter Cards untuk Blogger
Summary Card - Source : twitter card developers

2. Summary Card with Large Image:

Mirip dengan Summary Card, namun menawarkan kemampuan untuk menonjolkan fitur gambar dengan ukuran besar.

Twitter Cards untuk Blogger
Summary Card with Large Images - Source : twitter card developers

3. Photo Card:

Fitur untuk menampilkan share photo tunggal seperti flickr, picasa, dll.

Twitter Cards untuk Blogger
Gallery Cards - Source : twitter card developers

4. Gallery Card:

Tweet Card ini digunakan untuk menampilkan konten yang berhubungan dengan koleksi foto. sehingga ketika Gallery blog sobat di share secara otomatis tweet post sobat akan menampilkan beberapa photo dari gallery photo tersebut.

Twitter Cards untuk Blogger
Gallery Card - Source : twitter card developers

5. App Card:

Tweet card ini adalah untuk menyediakan profil dari sebuah aplikasi. lihat gambar untuk lebih jelasnya.

Twitter Cards untuk Blogger
App Card - Source : twitter card developers

6. Player Card:

Digunakan untuk mengatur tampilan video Tweet berukuran video / audio / media player.

Twitter Cards untuk Blogger
Player Card - Source : twitter card developers

7. Product Card:

Twitter card ini digunakan untuk menampilkan beberapa konten produk seperti harga dan unit. lebih cocok untuk shop online.

Twitter Cards untuk Blogger
Player Card - Source : twitter card developers

Meta tag Default Untuk Twitter Cards

Cara memasang twitter cards pada blog kita sebenarnya sangat mudah sekali. Kita hanya perlu menambahkan beberapa meta tag saja agar blog kita lebih terlihat profesional ketika di share di twitter.
Berikut ini ada meta tag yang harus kita tambahkan dibawah <head>.

meta tag twitter cards untuk summary card (Default Twitter Card) :


<meta name='twitter:card' content='summary'/>
<meta name='twitter:site' content='@Devilzart'/>
<meta name='twitter:creator' content='@Rian Kid'/>
<meta name='twitter:title' content='JUDUL BLOG'/>
<meta name='twitter:description' content='DESKRIPSI ANDA'/>
<meta name='twitter:image' content='IMAGE BLOG/LOGO ANDA'/>   

meta tag twitter cards untuk Summary Card with Large Image :


<meta name='twitter:card' content='summary_large_image'/>
<meta name='twitter:site' content='@Devilzart'/>
<meta name='twitter:creator' content='@Rian Kid'/>
<meta name='twitter:title' content='JUDUL BLOG'/>
<meta name='twitter:description' content='DESKRIPSI BLOG ANDA'/>
<meta name='twitter:image:src' content='IMAGES BLOG/LOGO ANDA'/>

meta tag twitter cards untuk photo card :


<meta name='twitter:card' content='summary_large_image'/>
<meta name='twitter:site' content='@Devilzart'/>
<meta name='twitter:creator' content='@Rian Kid'/>
<meta name='twitter:title' content='JUDUL BLOG'/>
<meta name='twitter:image' content='GAMBAR YANG INGIN DITAMPILKAN'/>
<meta name='twitter:image:width' content='610'/>
<meta name='twitter:image:height' content='610'/>

meta tag twitter cards untuk Gallery :


<meta name='twitter:card' content='summary_large_image'/>
<meta name='twitter:site' content='@Devilzart'/>
<meta name='twitter:creator' content='@Rian Kid'/>
<meta name='twitter:title' content='JUDUL BLOG'/>
<meta name='twitter:description' content='DESKRIPSI BLOG ANDA'/>
<meta name='twitter:image0' content='GAMBAR 1'/>
<meta name='twitter:image1' content='GAMBAR 2'/>
<meta name='twitter:image2' content='GAMBAR 3'/>
<meta name='twitter:image3' content='GAMBAR 4'/>

meta tag twitter cards untuk App :


<meta name='twitter:card' content='app'/>
<meta name='twitter:description' content='DESKRIPSI'/>
<meta name='twitter:app:id:iphone' content='ID IPHONE APP'/>
<meta name='twitter:app:url:iphone' content='URL APP IPHONE'/>
<meta name='twitter:app:name:ipad' content='NAMA APP IPAD'/>
<meta name='twitter:app:url:ipad' content='URL NAMA APP IPAD'/>
<meta name='twitter:app:id:googleplay' content='ID GOOGLE PLAY'/>
<meta name='twitter:app:url:googleplay' content='URL APP DI GOOGLE PLAY'/>

meta tag twitter cards untuk Player Card :


<meta name='twitter:card' content='player'/>
<meta name='twitter:site' content='@examplevideosite'/>
<meta name='twitter:title' content='JUDUL VIDEO'/>
<meta name='twitter:description' content='DESKRIPSI VIDEO'/>
<meta name='twitter:image' content='GAMBAR VIDEO/ THUMBNAIL VIDEO'/>
<meta name='twitter:player' content='URL VIDEO'/>
<meta name='twitter:player:width' content='435'/>
<meta name='twitter:player:height' content='251'/>

meta tag twitter cards untuk Product Card :


<meta name='twitter:card' content='product'/>
<meta name='twitter:site' content='@Devilzart'/>
<meta name='twitter:creator' content='@Rian Kid'/>
<meta name='twitter:title' content='NAMA PRODUCT'/>
<meta name='twitter:description' content='DESKRIPSI PRODUCT'/>
<meta name='twitter:image' content='GAMBAR PRODUCT'/>
<meta name='twitter:data1' content='$3'/>
<meta name='twitter:label1' content='Price'/>
<meta name='twitter:data2' content='Black'/>
<meta name='twitter:label2' content='Color'/>

Twitter Cards diatas adalah meta tag default dari twitter developer, sobat dapat mengimplemetasikannya baik secara langsung atau memodifikasinya terlebih dahulu untuk blog sobat. Jika sobat menggunakannya secara langsung, ketika halaman post sobat di share, yang akan ditampilkan hanyalah data blog sobat secara static dan bukan dinamis. Artinya data yang dishare pada setiap halaman akan sama. Jika sobat tertarik untuk membuat twitter cards dinamis silahkan baca artikel saya selanjutnya tentang cara membuat "twitter card dinamis untuk blogger" dan "conditional tag untuk blogger" agar sobat dapat mempelajarinya, meimplementasikan dan memodifikasi meta tag twitter cards diatas. Sekian tips blogging terbaru dari devilzart.com, terima kasih telah berkunjung.


Sumber : https://dev.twitter.com/

3 comments » Menambah Twitter Cards Pada Platform Blogger

punya saya deskripsinya gak muncul >.<

Balas

pasti ada salah penulisan atau coba pake open graph sob meta tag nya. :D

Balas

top markotop. langsung berhasil di ujicoba. thanks banget info nya.

Balas

Mohon maaf komentar pada blog ini kami moderasi dan tidak akan langsung ditampilkan. Silahkan berikan komentar sesuai judul dan isi artikel. Komentar yang mengandung link aktif / live link, iklan, pornografi, dan semacamnya akan dihapus atau kami masukan pada kategori SPAM.

Catatan :
1. Untuk menyisipkan kode gunakan  <i rel="code">kode yang akan disisipkan</i>
2. Untuk menyisipkan kode panjang gunakan <i rel="pre">kode yang akan disisipkan</i>
3. Untuk menyisipkan quote gunakan <b rel="quote">catatan anda</b>
4. Untuk menyisipkan gambar gunakan <i rel="image">URL gambar</i>
5. Untuk menyisipkan video gunakan <i rel="youtube">URL Video youtube</i>

Keterangan :
Gunakan HTML konverter sebelum menyisipkan kode.
Contoh link image : http://blablabla.com/image.jpg.

Profile yang mengandung broken link akan dihapus tanpa pemberitahuan terlebih dahulu.
Konversi Kode

Top