Twitter Cards for Your Blog

Sunday, January 10, 2016

Twitter Cards for Your Blog
Beberapa hal berbau digital sempat saya bahas di blog ini, mulai dari membuat nama twitter client yang unik, pembahasan mengenai internet, juga pembuatan windows 10 apps tanpa coding. Beberapa tulisan tentang digital yang agak mengharumkan nama saya juga bisa kamu cek di sini, di sini, dan di sini. Sebagai tanggung jawab moral atas beberapa postingan yang rada ngawur belakangan ini, di kesempatan kali ini saya ingin berbagi sedikit ilmu tentang digital yaitu pemanfaatan media sosial untuk blog yang kita miliki. Ahzek!

Kalo diliat-liat, maraknya penggunaan media sosial tuh udah cukup lama sebenernya. Seiring dengan pesatnya perdagangan smart phone di pasaran telepon seluler dan ditambah dengan bertebarannya paket internet yang seolah saling berlomba untuk memberikan harga paket internetan yang murah dan bervariasi, penggunaan media sosial sekarang ini pun semakin meningkat karena yang tadinya internetan cuma via desktop atau laptop, sekarang ini internetan udah segampang sms-an via hand phone! Udah bukan hal yang aneh kalo satu kepala punya beberapa akun media sosial baik itu untuk platform yang sama ataupun platform yang berbeda. Bahkan bukan hal yang aneh pula kalau satu kepala sering gonta ganti nomer telepon, dengan alasan paket internet dari provider tertentu jauh lebih bersahabat dengan isi dompet. Yoi nggak?

Kalo diliat-liat (lagi), perkembangan untuk tiap platform media sosial pun bener-bener dinamis. Mulai dari tampilan, kegunaan, integrasi, dan analitiknya -boleh dibilang- dari waktu ke waktu selalu ada improvement yang kontinyu untuk setiap platform media sosial yang ada. Selain untuk diferensiasi dari masing-masing platform media sosial yang ada, pastinya tiap platform media sosial ini juga sebetulnya tengah bersaing agar tetap bisa bertahan dan bisa memberikan benefit lebih bagi penggunanya. Woits, jangan salah! Beberapa platform media sosial juga banyak kok yang kandas. Sebut saja friendster dan orkut yang pada akhirnya harus mengucapkan salam perpisahan dengan para penggunanya. Ya kan kita tau sendiri, sekarang ini penggunaan media sosial bukan cuma untuk kebutuhan pertemanan ataupun ‘virtual silaturahim’ namun juga udah jadi tempatnya beragam brand untuk memasarkan produknya. So, kalo media sosial nggak ada improvement dan nggak bisa ngasih benefit, udah pasti bakal ditinggalin, dan user bakal beralih ke media sosial yang lebih seru dan lebih asyik!

Nahhhh.. Kita sebagai social media user apalagi sebagai seorang blogger, harus jeli dalam memanfaatkan kedinamisan ini dong! Salah satu media sosial yang (menurut saya) kedinamisan improvement-nya selalu menarik perhatian adalah twitter. Apa aja improvement twitter? Bisa kamu baca-baca sendiri deh, kan ada internet, yoi nggak? Hahahaha.. Hellauw, udah tahun 2016 nih! Masa masih mau pake twitter cuma buat nyinyir dan ngegalau doang, coba deh banyak baca-baca untuk gali ilmu lebih banyak, supaya jadi manusia yang bermanfaat dan menjadi social media user yang lebih cerdas, sakinah, mawaddah, dan warrohmah. Ngulik lah dikit gaes! *syaelah sok banget ya saya* *kemudian digebukin massa* Hahaha.. 

Untuk aku, kamu, iya, kita-kita kawula muda yang suka nulis di blog atau lazim disebut blogger, ada sebuah fitur ciamik yang bisa kita manfaatkan dari platform media sosial dengan logo burung biru ini lho! Yeap! Seperti judul postingan ini Twitter Cards for Your Blog, udah jelas banget kalo salah satu fitur yang bisa banget kita manfaatkan untuk blog kita adalah fitur Twitter Cards lah yaaa..


Nggg... Twitter Cards itu sejenis umbi-umbian apa ya Mba Nola?
Aduuuuhhh euy.. Pasti kamu kebanyakan breakfast pake ubi cilembu dan hui boled ini mah.. Hahahaha.. Twitter Cards itu adalah salah satu fitur multimedia persembahan dari Twitter developers yang memungkinkan user yang menggunakan fitur ini pada blog-nya DAN membagikan url blog-nya melalui akun twitter-nya bukan hanya bisa menampilakn nama penulis blog, namun juga bisa menampilkan media dan deskripsi singkat dari tulisan di blognya. 
With Twitter Cards, you can attach rich photos, videos and media experience to Tweets that drive traffic to your website. Simply add a few lines of HTML to your webpage, and users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to all of their followers. Source: https://dev.twitter.com/cards/overview
Fitur ini sebenernya udah cukup lama saya ketahui dan saya gunakan untuk pekerjaan sih, saya nya aja yang baru sempet ngulik untuk keperluan pribadi. Ya tau sendiri lah ya, saya sibuknya kayak apa.. Heu.. *ngeles teruuuus Nooool.. hahaha..*

Jadi kenapa saya share mengenai twitter cards di postingan kali ini? Pertama, karena saya sudah berhasil memasang twitter cards di blog saya ini. Kedua, rasanya eksperimen saya -yang-alhamdulillah-berhasil-ini- perlu dan layak untuk dibagikan, meskipun mungkin udah banyak orang lain yang berbagi mengenai tutorial semacam ini, meskipun mungkin juga udah banyak blogger yang pake fitur twitter cards ini untuk blognya, dan meskipun saya juga masih cupu mengenai seluk beluk dan detail mengenai twitter cards ini. Hehe.. Ya bagi-bagi ilmu buat sesama blogger lah, kan mungkin juga ada yang belum tau dan belum pake fitur twitter cards ini.. Soalnya blogger kan biasanya kalo udah nulis pasti share tulisannya tuh.. Nah, share tulisan kan tujuannya supaya orang lain bisa baca dan tentunya nambah traffic ke blognya toh? Nah, dengan memanfaatkan fitur twitter cards ini, selain akan membuat tampilan sharing blog post kamu melalui twitter menjadi lebih kaya dan lebih elegan, konon katanya penggunaan twitter cards ini bisa meningkatkan traffic ke blog lho! 

Twitter cards ada macem-macem nih gaes! Dari yang saya baca sih, total ada 7 macem twitter cards yang bisa kita implementasikan:
1. Summary Card: fitur ini berguna untuk menampilkan konten blog berupa judul, deskripsi, thumbnail, nama domain, dan akun twitter atribusi dengan thumbnail kecil.
2. Summary Card with Large Image: fitur ini memiliki kegunaan yang hampir serupa dengan summary card, namun menawarkan tampilan gambar dengan ukuran yang lebih besar. 
3. Photo Card: fitur ini berguna untuk menampilkan foto tunggal yang berasal dari eksternal link seperti dari flickr, dll.
4. Gallery Card: fitur ini berguna untuk menampilkan koleksi foto dalam sebuah gallery yang akan menampilkan beberapa foto yang berasal dari galeri foto.
5. App Card: fitur ini berguna untuk menampilkan profil dari sebuah aplikasi. 
6. Player Card: fitur ini berguna untuk menampilkan video/audio/media player pada tweet.
7. Product Card: fitur ini berguna untuk menampilkan beberapa konten produk, misalnya harga dan unit.

Sampai sini cukup jelas ya pemirsa? Apa? Masih nggak kebayang? Oke, untuk bayangan kamu lihat deh dua gambar di bawah ini hasil eksperimen saya menggunakan twitter cards dengan tipe summary card untuk blog saya yang masih blogspot tulen. Coba, kerenan mana sharing blogpost url dengan twitter cards atau tanpa twitter cards? Ihhiiiiyyy.. ;)
Twitter Cards for Your Blog Preview

sharing blogpost url TANPA twitter cards
Twitter Cards for Your Blog Preview Blog Share

sharing blogpost url MENGGUNAKAN twitter cards - tipe summary card

Nggg... Memangnya ada benefit apa lagi sih kalo kita pake twitter cards untuk blog kita Mba Nola?
Selain kekecean yang hakiki dan menambah reputasi blog kamu, dengan menggunakan twitter cards:
Twitter Cards for Your Blog Penjelasan
1. Kita bisa memperlihatkan konten postingan di blog dengan cara yang lebih engaging. Kenapa? Kan udah dijelasin barusan, dengan menggunakan twitter cards, terutama tipe summary card, untuk setiap url blogpost yang kita bagikan via twitter akan menampilkan thumbnail, judul tulisan, dan deskripsi dari tulisan.

Twitter Cards for Your Blog Pinned on Twitter

2. Ketika tweet yang berisi blog post url di-pin to top di twitter, maka informasi dari twitter cards akan terpampang secara auto expand. Sementara jika tidak di-pint to top, untuk melihat twitter cards harus expand secara manual dengan cara klik tulisan 'summary' di pojok kanan bawah tiap tweet.

Twitter Cards for Your Blog Langkah Pembuatan

3. Kita bisa memanfaatkan twitter cards analytics untuk mengetahui performa dari url blog yang kita bagikan via twitter.

Nggg... Jadi gimana cara pasang Twitter Card di blog kita ya Mba Nola?

Yakin mau pasang twitter cards di blog kamu? Bismillah dulu ya, ini akan sedikit ngotak-ngatik template html code blog kamu soalnya. Oh iya, berhubung platform blog saya adalah blogspot tulen, jadi di postingan ini saya hanya akan kasih tau cara memasang twitter cards untuk blogspot ya. Udah siap? Udah siap aja atau udah siap banget? Well kalo kamu udah siap, udah yakin, dan udah kebelet sampe ubun-ubun pengen banget blog kamu lebih gemilang di tahun 2016 ini, yok diayok ikutin 3 cara mudah pasang twitter cards di blog berikut ini:



1. Pilih tipe twitter cards yang ingin kamu gunakan. 

Created with flickr slideshow.

Di atas saya sudah menginformasikan 7 macam tipe twitter cards tuh. Pada kesempatan kali ini saya memilih tipe pertama, yaitu Summary Card. Kenapa saya pilih tipe ini? Karena tipe ini adalah tipe idaman, baik, sholeh, tampan, mapan, dan setia. BUKAN! Itu tipe jodoh! Maksud saya, saya memilih tipe Summary Card karena ini merupakan tipe twitter cards paling standar dan pastinya ini adalah sebuah eksperimen ngeri-ngeri sedap yang kesekian kalinya dalam mengotak atik html code. Jadi, kalo eksperimen ini sukses, baru deh nanti saya cobain tipe twitter cards yang lainnya. Gitu.

2. Tambahkan meta tag dari tipe twitter cards yang ingin kamu gunakan ke blogmu. 
APA LAGI INI META TAG MBA NOLA????!!!! Tenang sayang! Meta tag ini adalah semacam kode yang mesti kita sisipkan di blog kita, supaya ketika kita share blog post di twitter, twitter cards nya akan muncul. Dan twitter developers udah kasih meta tag untuk setiap tipe cards yang kita pilih, dan kita hanya perlu copy paste meta tag tersebut ke blog kita. 
Bagaimana cara menyisipkan meta tag ini di blog kita?
Twitter Cards for Your Blog Setting HTML Blogspot
a. Login ke akun blogger.com,
b. Back up terlebih dahulu template blog, kemudian pilih Template kemudian Edit HTML,
c. Tekan Ctrl F untuk windows atau Cmd F untuk mac dan cari kode </head> pada template blog, 
d. Untuk Twitter Cards dengan tipe Summary Card yang saya pilih untuk blog saya, saya menyisipkan kode meta tag berikut ini di atas kode </head> pada template blog saya:
<!-- twitter cards -->
<meta content='summary' name='twitter:card'/>
<meta content='@NAMA_AKUN_TWITTER_KAMU' name='twitter:site'/>
<meta content='@NAMA_AKUN_TWITTER_PENULIS' 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.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<meta expr:content='data:blog.title' name='twitter:title'/>
<b:else/>
<meta content='URL_FAVICON_BLOG_KAMU' name='twitter:image'/>
<meta expr:content='data:blog.title' name='twitter:title'/>
</b:if>
*Cara melihat favicon blog kamu adalah dengan menuliskan: www.domain.com/favicon.ico di browsermu. Kata 'domain' kamu ganti dengan nama (dan domain) blog kamu. Misalnya untuk blog dengan alamat www.gubalgabel.blogspot.com maka 'gubalgabel.blogspot' lah yang merupakan domain blog.
e. Save template. 

3. Uji twitter cards yang sudah kamu pasang di blog-mu dengan menggunakan twitter cards validator tool. Cara vaidasi twitter card gampang banget: 
Twitter Cards for Your Blog Twitter Validation

b. Masukan URL blog kamu atau salah satu URL blog postingan yang ada meta dekskripsinya, dan
c. Klik tombol 'preview card'. Maka dalam hitungan detik, twitter akan memvalidasi url yang sudah kamu masukkan dan akan langsung meberitahukan apakah twitter cards kamu sukses atau tidak.
Twitter Cards for Your Blog Twitter Validator
Selesai! Sekarang kalau kamu share url blog via akun twitter, akan ada tampilan twitter cards dalam bentuk summary card! Yeay! Selamat ya!

Nggg... Sudah ngikutin semua step tapi kok saya pasang Twitter Card di blog saya nggak sukses ya, Mba Nola?
Alhamdulillah saya sukses dalam melakukan eksperimen ini. Apa? Kamu belum sukses? Sabar. Sebelum kamu memasang twitter cards untuk akun blogspot kamu, kamu harus memperhatikan beberapa hal berikut:
1. Sebelum memasang twitter cards untuk blog dengan platform blogspot, kamu harus terlebih dahulu mengaktifkan setting-an 'meta tag description' di blog kamu. Gimana caranya? Coba googling ya sayang! :)
2. Kamu juga harus memperhatikan setting-an 'robots.txt' untuk blog kamu. Ini penting lho! Coba deh googling gimana caranya ngurusin robots.txt untuk blog kamu ya cinta!
3. Jangan lupa juga isi kolom 'search description' di post settings dari setiap postingan di blog kamu.
Kalo masih belum sukses, kamu perhatikan notification yang diberikan oleh 'card validator'. Kalo ternyata masalah error-nya ada di kode meta tag, saya sarankan kamu untuk googling lebih lanjut [kamu bisa cek di sini] atau minta bantuan ahli, atau lebih baik lagi langsung restore html blog kamu dengan html template blog yang sudah kamu back up sebelum melakukan pemasangan twitter cards ini.

Nggg... Platform blog saya bukan blogspot nih Mba Nola. Gimana dong?
Tenang, sayang! Don't rich people difficult, jangan kaya orang susah! Pertama, ada teknologi yang namanya internet, yang bisa kamu ubek-ubek untuk cari informasi seputar pemasangan twitter cards di blogging platform lain selain blogspot. Kedua, twitter developers nggak pelit kasih informasi untuk kamu kok.. Coba cek di blognya twitter developer aja deh untuk tau cara pasang twitter cards di platform blogging lain selain blogspot ya! ;)

Nah udah ya.. Kayanya udah cukup banyak saya jelasin di sini mengenai pemanfaatan twitter cards terutama tipe summary card untuk blog. Kalau ada koreksi atau ada yang mau nambahin boleh loh.. Kalau ada yang mau nanya juga boleh, kalo saya bisa bantu, saya usahain jawab ya.. Overall sih masang twitter cards di blog ini termasuk gampang dan nggak pake ribet kok.. Nggak seribet tutorial bikin nama twitter client yang udah pernah saya bagiin di blog ini kan? Hehehe..

Yaudah ya.. Segini dulu postingan dari saya.. Semoga postingan kali ini bermanfaat..

Selamat mencoba dan sampai jumpa di postingan lainnya ya! *kalo sempet*

Mwachk!

4 comments:

  1. Iya mbak, saya juga udah pake. Jadi ada Summary di twitter y ang bisa dibaca pengunjung twitter.

    ReplyDelete
  2. thanks infonya menarik dan bermanfaat
    serta berkesan menambah wawasan

    ReplyDelete
  3. bagus teh infonya, makin ngerti deh biar blog makin kece , thx ya

    ReplyDelete
  4. Wah seringkali saya share tulisan orang yang langsung terkoneksi dg akun twitter-nya penulis. Baru tau kalau namanya twitter card, hahah... Pikir saya udah bawaan orok eh template-nya. Nanti kalau senggang saya mau pasang deh. Thanks Mba.

    ReplyDelete