Rich Snippets - Blogger Authorship

Bismillah. Alhamdulillah. Walau menggunakan Netbook tapi Blogger Tune-Up masih bisa menulis artikel-artikel tentang blog walau bersifat sederhana, setelah beberapa minggu yang lalu, Laptop kesayangan penulis mengalami kerusakan total dan tak bisa lagi diperbaiki (100% mati). Bahkan beberapa proyek yang masih dalam tahap pengembangan, ikut menghilang. Namun bukan berarti ngeblog berhenti total, karena berbagai cara dilakukan agar kegiatan ngeblog tetap aktif dengan konsekwensi frekuensi penerbitan artikel menjadi sangat lambat dan beberapa percobaan yang bersifat online juga menjadi tersendat.

Deskripsi

Artikel kali ini masih membahas tentang Rich Snippets yaitu penambahan sisipan konten tentang kepemilikan blog pada hasil pencarian search engine, atau pihak Google menyebutnya dengan Authorship. Ketika kita melakukan pencarian dengan kata kunci tertentu pada mesin pencari, kadang kita menemukan beberapa deret situs pada hasil pencarian yang mampu menampilkan photo profile, nama penulis dan jumlah teman dalam lingkaran (circle) Google Plus. Hal ini sangat membantu keakuratan blog yang kita tuju, karena sisipan ini sangat membantu kita dalam pencarian. Authorship atau kepemilikan blog memiliki nilai tambah pada hasil pencarian karena para pengunjung biasanya jika sudah mengenal seseorang dengan baik maka tanpa pikir panjang mereka percaya dengan artikel yang disusun oleh penulis tersebut. Misal kita mencari suatu artikel dengan kata kunci "New 30 day challenge" dan hasil pencarian Google menampilkan sederet hasil pencarian seperti dibawah ini:

Dari sederet artikel tersebut anggaplah kita mengenal salah satu penulisnya dengan baik. Misal; Matt Cutts. Maka saya tidak akan lagi mengklik situs lain dalam sederetan hasil pencarian tersebut, karena saya tahu betul bagaimana seorang Matt Cutts menuliskan artikel. Paham betul loyalitas Matt Cutts pada dunia internet dan lain sebagainya. Sisipan kaya atau Rich Snippet ini tentunya memberikan nilai tambah atas kualitas sebuah blog. Atau justru sebaliknya; Kita paham betul karakter seorang penulis artikel yang hobi-nya copy paste atau hanya menulis ulang artikel orang lain, maka kita enggan untuk mengklik link tersebut. Rinch Snippet Authorship walau hanya terdiri dari beberapa baris informasi, namun memiliki manfaat hebat untuk memberikan nilai lebih pada suatu blog.

Konsep Authorship

Google telah memberikan referensi cukup jelas mengenai Authorship, anda bisa menemukan artikel-artikel yang berhubungan dengan Authorship pada bagian akhir artikel ini (Pranala Luar). Bagaimana konsep Authorship tersebut? Perhatikan gambar dibawah ini:

Konsep Authorship ini menggunakan Rich Snippet dengan standar Microformats, yaitu menggunakan tag rel (relationship) dalam implementasinya. Mesin pencari Google akan mengumpulkan informasi dari halaman blog dan kemudian menguraikannya untuk memeriksa link-link eksternal yang secara sengaja dikaitkan dengan halaman lain diluar blog tersebut. Dalam kasus authorsip, mesin pencari Google hanya mengenali relationship dengan Google Plus untuk Rich Snippets hasil pencarian. Ketika mesin pencari melakukan crawler (merayapi) halaman-halaman blog, robots spider akan mencari link-link yang memiliki hubungan (relation) dengan halaman-halaman terkait terutama halaman Google Plus. Suatu halaman eksternal yang dikaitkan secara sengaja (dalam kasus ini Google Plus) dengan halaman blog akan dirayapi ulang untuk melihat keterkaitannya dengan blog yang sebelumnya telah dirayapi.

Memahami Tag Rel

Dari konsep diatas dapat kita ambil kesimpulan bahwa robots spider mesin pencari pada mulanya melakukan crawling (perayapan) pada halaman blog, kemudian robots ini menemukan suatu link yang dikaitkan keluar yaitu link yang disisipi tag rel="auhor". Misal seperti contoh dibawah ini:

<a href="https://plus.google.com/12345" rel="author">Hendriono</a>

Maka kemudian robot spider akan melakukan perayapan terhadap halaman yang dituju (dalam contoh; https://plus.google.com/12345) hingga ditemukan suatu link pada halaman tersebut yang memiliki keterkaitan yaitu link yang memiliki tag rel="me". Misal seperti contoh dibawah ini:

<a href="http://modification-blog.blogspot.com/" rel="me">Blogger Tune-Up</a>

Ketentuan Authorship

Dari penjelasan diatas berarti ada ketentuan yang harus dipenuhi jika kita ingin Rich Snippets Authorship mampu menampilkan; Photo Profile, Nama Penulis dan Jumlah teman dalam lingkaran (circle) pada deret halaman hasil pencarian Google, yaitu:

• Halaman blog harus memiliki link tautan menuju halaman Google Plus dengan menyisipkan tag rel="author" pada link tautan tersebut
• Halaman Google Plus harus memiliki link tautan menuju halaman blog dengan menyisipkan tag rel="me" pada link tautan tersebut
• Halaman blog dan halaman Google Plus harus melewati proses otentikasi dengan alamat email yang valid untuk mencegah klaim kepemilikan oleh pihak lain.

Jika tiga ketentuan tersebut dipenuhi, dalam beberapa hari Rich Snippet Authorship akan ditampilkan pada halaman hasil pencarian. Lalu bagaimana proses integrasinya?

Integrasi Tag rel="author" pada Blog

Untuk menyisipkan link tautan eksternal yang menuju ke halaman Google Plus, ikuti langkah dibawah ini:

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Dasbor - Template - Edit HTML - Lanjutkan"
Langkah 3
Cari kode dibawah ini:

<head>
...
</head>

Langkah 4
Sisipkan (copy paste) kode dibawah ini diantara tag/kode pada langkah 3:

<link href="https://plus.google.com/ID_Profile" rel="author"/>

Ganti ID_Profile dengan ID Profile Google Plus anda (klik disini) yang bisa dilihat pada address bar, seperti contoh dibawah ini:

Langkah 5
Simpan template

Integrasi Tag rel="me" pada Google Plus

Langkah 1
Buka halaman Profile Google+ Anda
Langkah 2
Klik tombol "Edit Profile" atau klik link ini
Langkah 3
Pilih bagian "Contibute to" atau "Kontributor pada", kemudian isi dengan Link URL Blog

Langkah 6
Klik tombol "Done Editing"
Keterangan: Tag rel="me" secara otomatis ditambahkan tanpa harus dimasukan secara manual. Ketika kita menambahkan suatu link pada bagian "Contribute to" maka didalamnya sudah mengandung tag rel="me".

Verifikasi Email Author

Setelah proses integrasi tag rel pada link tautan Blog dan Google Plus, lakukan proses otentikasi authorship seperti langkah dibawah ini:

Langkah 1
Buka link Google Plus Authorship
Langkah 2

Masukan alamat email valid sesuai dengan email yang digunakan untuk login pada Blog, GMail, dan Google Plus

Langkah 3
Klik tombol "Signup for Authorship"
Langkah 4

Tunggu proses verifikasi, kemudian buka profile Google Plus anda. Pada bagian "Work email" harus ada tanpa cheklist yang berarti bahwa author telah terverifikasi.

Pemeriksaan Rich Snippets Authorship

Setelah tiga ketentuan diatas selesai dilakukan maka lakukan pengecekan, bahwa Rich Snippets Authorship telah berhasil. Ikuti langkah dibawah ini:

Langkah 1
Buka halaman Rich Snippets Testing Tools
Langkah 2
Masukan (copy paste) URL halaman blog anda pada kotak yang tersedia
Langkah 3
Klik tombol "Preview" dan tunggu proses...
Langkah 4
Perhatikan preview yang dihasilkan oleh Rinch Snippet Webmaster Tools seperti contoh dibawah ini:

Hal yang harus diperhatikan adalah:

• Photo Profile yang tampil sama dengan yang digunakan pada profile Google Plus yang disertai nama author
• Verified: Authorship markup is verified for this page. Yang berarti bahwa author telah terverifikasi dengan baik

Langkah 5

Sabar menunggu, hingga mesin pencari Google melakukan Re-Index pada halaman blog anda atau lakukan proses Re-Index blog melalui Google Web Master Tools milik anda. Dalam beberapa hari atau minggu maka Rich Snippets Author ditampilkan pada hasil pencarian mesin pencari.

Kesimpulan

Para webmaster menyebutkan "embrace authorsip" atau rangkul dan klaim kepemilikan blog dengan mengikuti ketentuan dari pemilik mesin pencari, karena sampai hari ini Google adalah penguasa mesin pencari. Dan lagi pula, ketentuan diatas sesuai dengan standar Rich Snippets yang disepakati bersama, yaitu standar microformats sehingga ada kemungkinan mesin pencari lain akan mengikuti metode yang sama. Matt Cutts bercanda pada videonya "sampai hari ini, saya tidak tahu apakah ada mesin pencari lain?". Lalu apakah artikel ini termasuk teknik SEO? Lagi-lagi Blogger Tune Up menegaskan, bahwa kami menulis artikel ini bukan bertujuan untuk SEO, kami hanya menulis artikel sesuai dengan ketentuan semantic web sebagai cara pendekatan pada mesin pencari. Mengenai "apakah berpengaruh pada rangking pencarian?" Blogger Tune Up tidak menjamin dan tidak tahu. Tanpa SEO adalah SEO sebenarnya yang murni tanpa intimidasi. Sampai ketemu dipembahasan berikutnya. Happy Blogging :)

Pranala Luar:

• Microformats rel author
• Author information in search results

Read More

jQuery CDN Failover

Bismillah. Alhamdulillah. CDN atau Content Distribution Network (atau ada juga yang menyebutnya Content Delivery Network) seperti pernah dibahas pada artikel sebelumnya, bahwa jQuery sebagai salah satu framework javascript yang paling populer dan banyak digunakan membuat beberapa situs besar merasa perlu untuk menyediakan salinan file utamanya. Salinan ini sama persis dengan file asli yang tersimpan pada file server jQuery. Hal ini memberikan kemudahan kepada para penggunanya untuk memanfaatkan salinan-salinan tersebut, sehingga kita tidak perlu untuk menyimpannya pada file server milik sendiri. Terutama memberikan keuntungan besar bagi para pengguna hosting berbayar yang memiliki limit bandwidth akses.

Deskripsi

CDN Failover adalah metode pengalihan lokasi framework jQuery dari satu host menuju ke host alternatif (cadangan). Metode failover sangat bermanfaat ketika host utama mengalami kendala akses baik itu karena limit bandwidth atau karena memang benar-benar mengalami masalah. Jika kita tidak menggunakan metode pengalihan (failover) ketika host utama mengalami kendala maka hal tersebut akan mempengaruhi kondisi situs yang kita kelola, apalagi jika situs tersebut menggunakan jQuery Ajax, jelas situs akan down total atau tidak bisa diakses. Hal ini sangat merugikan dan akan mempengaruhi kenyamanan pengunjung situs, ujung-ujungnya para pengunjung enggan kembali lagi untuk menulusuri situs. Mencegah hal tersebut maka kita perlu menyediakan cadangan framework agar masalah down host utama bisa teratasi. CDN Failover adalah cara terbaik untuk mengatasi masalah diatas.

Lokasi CDN jQuery

Untuk menggunakan metode CDN Failover berarti kita membutuhkan dua lokasi penyimpanan framework. Satu lokasi (link) digunakan sebagai link utama dan satu lokasi digunakan sebagai cadangan ketika host utama mengalami masalah. Bagi para pengguna hosting berbayar maka bisa menggunakan skenario; lokasi framework utama diambil dari situs penyedia CDN dan lokasi framework cadangan ditempatkan pada filehosting milik sendiri. Keuntungan skenario tersebut akan mampu mengirit trafik bandwidth ke filehosting sendiri, namun ketika CDN utama mengalami masalah (down) barulah lokasi cadangan (filehost milik sendiri) diakses. Dibawah ini beberapa situs besar penyedia CDN jQuery yang bisa anda manfaatkan. Beberapa situs dibawah ini merupakan rekomendasi para desainer web, diantaranya:

[1] Google (Sangat Baik)

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js

[2] Microsoft (Baik)

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js

[3] CDNJS (Sedang)

http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js

[4] jQuery (Kurang)

http://code.jquery.com/jquery.min.js
http://code.jquery.com/jquery.js

[5] Yandex (Sangat Kurang)

http://yandex.st/jquery/1.7.2/jquery.js
http://yandex.st/jquery/1.7.2/jquery.min.js

CDN jQuery diatas merupakan alternatif untuk metode failover. Blogger Tune Up pun melakukan tes sendiri terhadap kecepatan akses (load) dari masing-masing lokasi CDN tersebut dengan hasil akhir tes sebagai berikut:

• CDN Google rata-rata waktu load 228ms
• CDN jQuery rata-rata waktu load 439ms
• CDN-JS rata-rata waktu load 340ms
• CDN Yandex rata-rata waktu load 575ms
• CDN Microsoft rata-rata waktu load 334ms

Namun, kemungkinan akan berbeda hasil akhir jika anda melakukan test load dari wilayah lain, hal ini karena dipengaruhi banyak faktor. Ada kemungkinan untuk wilayah Indonesia, CDN Yandex memiliki kecepatan akses sangat jelek, namun besar kemungkinan menjadi lebih baik jika diakses dari wilayah diluar Indonesia. (Mungkin perlu dilakukan pooling internasional)

Integrasi jQuery CDN Failover

Dibawah ini akan dijelaskan beberapa alternatif penggunaan metode CDN Failover. Silahkan anda memilih salah satunya yang dianggap paling mudah untuk diterapkan pada situs yang anda kelola. Secara garis besar ada dua cara metode CDN Failover, yaitu:

Direct CDN Failover (CDN Failover Langsung)

Direct CDN Failover adalah metode penulisan script load failover (pengalihan) lokasi framework secara langsung pada situs. Biasanya menggunakan statement javascript if else untuk failover-nya. Ketika halaman diload maka script akan melakukan pemeriksaan keadaan, "apakah framework jQuery dari CDN utama berhasil diload? Jika ternyata framework CDN utama tidak berhasil diload, maka link lokasi utama dialihkan ke link lokasi cadangan". Dibawah ini beberapa metode direct CDN failover:

CDN Failover Metode 1

Script dibawah ini merupakan yang metode failover yang paling sederhana. Script akan melakukan pemeriksaan ketersediaan framework, jika ternyata framework tidak berhasil di-load, maka lokasi framework dialihkan.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript"> 
if (jQuery) {  
 // jika jQuery berhasil di-load maka fungsi disini akan dijalankan...
} else {
 // jika jQuery gagal di-load, maka framework akan dialihkan ke lokal...
 document.write('script type="text/javascript" src="/local/jquery-1.7.2.min.js"><\/script>');
}
</script>

CDN Failover Metode 2

Metode ke-2 ini hampir mirip dengan metode ke-1, perbedaannya hanya pada statement pemeriksaan keadaan. Script hanya akan melakukan pengalihan jika keadaan halaman tidak mampu me-load framework, jika berhasil maka script tidak akan menjalankan perintah pengalihan lokasi framework.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript"> 
if (typeof jQuery == 'undefined') {  
    // jika jQuery gagal di-load, maka framework akan dialihkan ke lokal...
 document.write('script type="text/javascript" src="/local/jquery-1.7.2.min.js"><\/script>'); 
} else {
    // jika jQuery berhasil di-load maka fungsi disini akan dijalankan...
}
</script>

CDN Failover Metode 3

Metode ke-3 ini merupakan metode yang banyak digunakan oleh situs-situs jejaring sosial media dalam memanggil framework-nya. Metode ini sebenarnya merupakan pengembangan dari CDN Failover metode ke-2.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">  
 if (typeof jQuery === 'undefined') {  
    var e = document.createElement('script');  
    e.src = '/local/jquery-1.7.2.min.js';  
    e.type='text/javascript';  
    document.getElementsByTagName("head")[0].appendChild(e);  
 }
</script>

Indirect CDN Failover (CDN Failover Tidak Langsung)

Indirect CDN Failover adalah metode pengalihan CDN framework jQuery dengan memanfaatkan framework lain dalam pemeriksaan kondisinya. Berarti halaman membutuhkan framework lain untuk memeriksa keadaan framework jQuery. Metode seperti ini banyak dimanfaatkan dan digabungkan dengan DOM Event Listener atau sering disebut juga Lazy Load framework. (Hiks... Mulai membingungkan... Saran penulis, baca artikelnya malam hari jadi bisa sambil ngopi...)

Menggunakan framework lain untuk memeriksa kondisi framework jQuery sangat bermanfaat dalam meningkatkan waktu respon halaman. Metode Direct CDN Failover mempunyai kelemahan dalam hal waktu respon. Maksudnya, ketika CDN utama mengalami delay yang cukup lama dalam penyediaan perpustakaan jQuery maka halaman juga akan menunggu hingga perpustakaan berhasil dimuat dengan sempurna. Jika load CDN memiliki respon yang sangat lama, maka waktu load halaman situs juga akan relatif lebih lama. Lazy Load framework digunakan untuk mengatasi masalah delay respon.

Framework lain (anggaplah framework A) digunakan selain untuk CDN failover (pengalihan) juga digunakan untuk Lazy Load (pemeriksaan delay respon) framework. Ketika CDN jQuery tersedia namun ternyata memiliki respon yang sangat lambat, maka framework A akan mengalihkan framework jQuery tersebut pada CDN cadangan yang telah disiapkan. Sebuah metode yang tidak bisa dilakukan oleh Direct CDN Failover.

Dibawah ini beberapa framework lain yang dapat digunakan sebagai CDN Failover dan Lazy Load Framework, diantaranya:

Modernizr

Modernizr merupakan framework yang sedang hangat-hangatnya dibicarakan karena kemampuannya dalam menyederhanakan fungsi CSS3 dan HTML5. Baru-baru ini para developer Modernizr memasukan fungsi YepNope pada perpustakaan Modernizr. (Dibahas lengkap pada artikel terpisah)

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js"></script>
<script type="text/javascript">
Modernizr.load([
 {
  load: 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
  complete: function () {
   if (!window.jQuery) {
    Modernizr.load('/local/jquery-1.7.2.min.js');
   }
  }
 }
]);
</script>

LABjs

Framework LABjs merupakan script loader cikal bakal dari berbagai framework lain dalam menangani dan memanajemen CDN Failover maupun Lazy Load Framework, bahkan YepNope diciptakan karena inspirasi dari LABjs. (Dibahas lengkap pada artikel terpisah)

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js"></script>
<script type="text/javascript">
$LAB.script("http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js").wait(function () {
    if (typeof window.jQuery === "undefined") {
        $LAB.script("/local/jquery-1.7.2.min.js");
    }
});
</script>

Kesimpulan

Dari beberapa metode jQuery CDN Failover diatas, kita bisa memilah salah satu metode yang dianggap cocok dengan karakter situs yang kita kelola. Sedangkan untuk CDN Failover dengan metode Indirect CDN Failover akan dibahas secara rinci pada artikel terpisah. Metode diatas hanya gambaran sepintas saja walau sebenarnya bisa digunakan, namun mungkin belum maksimal dalam penggunaannya dan fungsinya. Atau bisa juga digunakan sebagai pancingan bagi anda yang ingin mengembangkan lebih rinci sesuai dengan pemahaman anda. Sampai ketemu dipembahasan artikel berikutnya, dan Happy Blogging :)

Read More

jQuery .submit() & Google Custom Search Engine

Bismillah. Alhamdulillah. Bagaimana dengan artikel sebelumnya tentang 'Membuat dan Memasang Google Custom Search Engine'? Mudah-mudahan telah berhasil dipasang pada blog anda. Kelemahan dari cara tersebut adalah ketika kita mengganti kata kunci (keyword) pada form input maka halaman hasil pencarian akan di-load (di panggil) ulang, dan reload halaman ini terjadi setiap mengganti kata kunci. Hal ini tentunya memperlambat proses pencarian dan kadang membuat kesal saat seseorang telah mencapai lelah untuk mencari sesuatu di internet. Bagaimana caranya agar halaman tidak di reload saat kita mengganti kata kunci lainnya, namun hasil pencarian tetap ditampilkan pada halaman tersebut? Disinilah kita membutuhkan bantuan script jQuery. jQuery .submit() yang akan mengambil alih event handler saat seseorang meng-klik tombol submit.

Demo jQuery Blogger Custom Searchn Engine

Deskripsi

Pada artikel sebelumnya, kita telah membahas tentang integrasi Google Custom Search Engine pada Blogger, namun bahasan materinya terlalu praktis bahkan nyaris tidak ada pemahaman materi yang lebih luas. Artikel tersebut justru hanya akan menjadi materi (copy paste) yang sangat sulit untuk dikembangkan lebih lanjut. Saya hanya berharap, dari setiap artikel yang diterbitkan, janganlah hanya tips trik yang instan tanpa mampu dipahami dengan baik namun lebih jauh anda mengembangkan sendiri sesuai imajinasi atau mungkin lebih sempurna. Mari kita sama-sama pelajari dan pahami.

jQuery .submit()

.submit() adalah metode lain atau metode yang lebih praktis untuk .bind('submit', handler) dalam variasi pertama, dan .trigger('submit') dalam variasi ketiga. Event submit akan dikirimkan ke sebuah elemen ketika pengguna mencoba untuk mengirimkan (submit) formulir (form). Form akan berhasil dikirimkan dengan meng-klik eksplisit <input type="submit">, <input type="image">, atau <button type="submit">, atau dengan menekan tombol Enter jika elemen form memiliki focus.

Harus diperhatikan pula bahwa event pengiriman formulir juga tergantung pada browser. Beberapa browser ada yang mampu mengirimkan formulir hanya dengan menekan tombol Enter jika input formulir berisi satu kolom teks, atau formulir bisa terkirim jika menekan tombol submit. Interface tidaklah harus bergantung pada perilaku tertentu, kecuali hal ini memang memaksa harus dengan mengamati event penekanan tombol untuk tombol Enter.

Sebagai contoh, perhatikan kode HTML dibawah ini:

<form id="target" action="tujuan.html">
 <input type="text" value="Ini hanya percobaan"/>
 <input type="submit" value="Kirim"/>
</form>
<div id="lain">
 Pemicu Lain
</div>

Event handler dibawah terlibat ke dalam form:

$('#target').submit(function() {
 alert('Handler untuk .submit() terpanggil');
 return false;
});

Ketika form (formulir) dikirimkan (submit), pesan akan tampil dengan isi "Handler untuk .submit() terpanggil". Hal ini terjadi sebelum pengiriman form yang sebenarnya, maksudnya seperti ini (sambil dibuka demonya disini):

Ketika kita klik tombol submit (<input type="submit" value="Kirim"/>) untuk mengirimkan input text (<input type="text" value="Ini hanya percobaan"/>) dari form dengan id #target ke halaman tujuan (action="tujuan.html") maka input text tidak akan dikirimkan ke URL tujuan tetapi langsung diambil alih (handle) oleh jQuery .submit() dengan memanfaatkan fungsi .preventDefault(). Atau jika terjadi kesalahan fungsi maka akan dikembalikan pada handle sebelumnya (return false;). Fungsi .preventDefault() sering digunakan untuk menghentikan (pada kasus tertentu dapat mengambil alih) sebuah event agar tidak langsung disampaikan pada tujuan. Contoh penggunaan fungsi .preventDefault() ada pada artikel sebelumnya. [1], [2], [3]. Jika kita menggunakan fungsi event .submit() maka event .preventDefault() sudah termasuk didalamnya tanpa harus dituliskan pada kode. (Lumayan membingungkan... Ngopi dulu...)

Atau, kita juga dapat memanfaatkan pemicu event secara manual ketika elemen lain diklik, contoh script jQuery-nya seperti dibawah ini:

$('#lain').click(function() {
  $('#target').submit();
});

Setelah code diatas dieksekusi, kemudian kita klik pada "Pemicu Lain", hal ini juga akan menampilkan pesan yang sama, yaitu "Handler untuk .submit() terpanggil". Lihat demonya disini. Ingat! Jika tanpa kode jQuery diatas, maka ketika kita klik tombol submit (<input type="submit" value="Kirim"/>) maka browser akan menuju dan membuka halaman URL tujuan (action="tujuan.html"). (Mudah-mudahan ada lampu listrik menyala diatas kepala... Cling...)

Mekanisme Kerja Google Custom Search Engine

Setelah memahami fungsi dari event jQuery .submit(), sekarang kita akan mencoba memahami bagaimana Google Custom Search Engine bekerja. Perhatikan gambar dibawah ini:

Ketika kita membuat sebuah mesin telusur sendiri menggunakan fasilitas Google Custom Search Engine, maka proses index halaman demi halaman blog kita akan segera dimulai. Google Custom Search Engine akan melakukan pengumpulan data pada blog kita secara bertahap dan sesuai edisi yang digunakan. (Untuk Edisi gratis, jumlah index halaman terbatas). Ketika seseorang memasukan sebuah kata kunci (keyword) pada Input Form kemudian mengirimkannya (submit) pada Google API CSE, maka Google API CSE akan mengambil data dari index server Google CSE. Setelah ditemukan kecocokan dengan kata kunci yang dimasukan pada Input Form, Google API CSE akan mengambilnya dari server Google CSE dan kemudian mengirimkan hasil pengambilan data tersebut ke Halaman Hasil Pencarian.

jQuery Google Custom Search Engine

jQuery .submit() sudah dipahami, dan mekanisme kerja Google Custom Search Engine juga sudah dipahami, waktunya kita memodifikasi script bawaan Google Custom Search Engine. Pada artikel sebelumnya kita sudah mengetahui bahwa script dari Form Input dan Google Custom Search Engine seperti dibawah ini:

Kode Form Input

<form id="searchform" action="/p/pencarian.html">
 <input id="searchq" name="q" type="search" placeholder="Cari..."/>
 <input class="searchbutton" name="sa" type="submit" value="Go" />
</form>

Kode Google API Custom Search Engine

google.load("search", "1", {
 language: "id",
 style : google.loader.themes.V2_DEFAULT
});
google.setOnLoadCallback(function () {
    var c = new google.search.CustomSearchControl("012345678901234567890:mdrcctmncrt", {});
    c.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var a = new google.search.DrawOptions;
    a.enableSearchResultsOnly();
    c.draw("cse", a);
    for (var a = {}, e = window.location.search.substr(1).split("&"), d = 0; d < e.length; d++) {
        var b = e[d].split("="),
            f = decodeURIComponent(b[0]);
        a[f] = b[1] ? decodeURIComponent(b[1].replace(/\+/g, " ")) : b[1]
    }
    a.q && c.execute(a.q, null, {
        oq: a.oq,
        aq: a.aq,
        aqi: a.aqi,
        aql: a.aql,
        gs_sm: a.gs_sm,
        gs_upl: a.gs_upl
    })
}, !0);

Hasil Perpaduan

Dibawah ini kode hasil perpaduan antara Google API CSE dengan jQuery .submit(). Saya tidak akan lagi menjelaskan secara detail, silahkan dipelajari untuk dipahami. Berikut hasil perpaduan kodenya:

$(function () {
    $("#searchform").submit(function () {
        var b = new google.search.CustomSearchControl("012345678901234567890:mdrcctmncrt", {});
        b.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
        var a = new google.search.DrawOptions;
        a.enableSearchResultsOnly();
        b.draw("cse", a);
        (a = $("#searchq").val()) && b.execute(a);
        return !1
    })
});

Keterangan:

Pada dasarnya kita hanya mengalihkan proses load dan mengganti proses eksekusi kode Google API CSE. Pada mulanya load dilakukan dengan:

google.setOnLoadCallback

kemudian di ganti dengan:

$("#searchform").submit

ID #searchform diambil dari ID form (Jika memahami penjelasan sebelumnya, pasti paham fungsi event ini)

Kemudian mengganti eksekusi yang pada mulanya seperti dibawah ini:

for (var a = {}, e = window.location.search.substr(1).split("&"), d = 0; d < e.length; d++) {
 var b = e[d].split("="),
  f = decodeURIComponent(b[0]);
 a[f] = b[1] ? decodeURIComponent(b[1].replace(/\+/g, " ")) : b[1]
}
a.q && c.execute(a.q, null, {
 oq: a.oq,
 aq: a.aq,
 aqi: a.aqi,
 aql: a.aql,
 gs_sm: a.gs_sm,
 gs_upl: a.gs_upl
})

menjadi seperti dibawah ini:

(a = $("#searchq").val()) && b.execute(a);
return !1

Namun hati-hati, saya telah melakukan perubahan nama variabel, dengan tujuan untuk membedakan, mana script Google API CSE yang asli, dan mana script Google API CSE hasil perpaduan dengan jQuery. Script hasil perpaduan ini memang harus diperhatikan dan dibandingkan dengan hati-hati.

Conditional Tag

Sudah dibahas diatas bahwa ketika kita menggunakan jQuery .submit() maka URL tujuan tidak akan dibuka oleh browser karena fungsi submit form diambil alih oleh jQuery. Ini akan memunculkan masalah ketika halaman hasil pencarian sedang tidak dibuka, maka keyword apapun yang kita masukan pada input form itu tidak akan menghasilkan apa-apa. Google API CSE tidak akan pernah memproses perintah apapun dari form jika halaman hasil pencarian sedang tidak dibuka. Jika demikian berarti kita membutuhkan suatu kondisi.

Kondisi ini akan mengatur kapan jQuery .submit() harus diload atau dieksekusi. Pada saat halaman yang sedang dibuka bukanlah halaman hasil pencarian maka input form masih menggunakan script Google API CSE aslinya, namun ketika halaman hasil pencarian sedang dibuka, maka jQuery .submit() juga telah dieksekusi dan siap untuk digunakan.

Solusi dari masalah ini adalah dengan menggunakan conditional tag, seperti contoh dibawah ini:

<b:if cond='data:blog.url == &quot;/p/pencarian.html&quot;'>
... Script jQuery Google API CSE ...
</b:if>

Bagaimana conditional tag ini bekerja? Silahkan baca disini.

Integrasi Pada Blog

Masih bingung? Mungkin harus mencoba dulu baru memahaminya. Kode jQuery Google API CSE dibawah ini silahkan digunakan pada blog anda. Ikuti langkahnya:

Langkah 1
Buka template blog anda
Langkah 2
Cari kode dibawah ini:

</body>

Langkah 3
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 2:

<b:if cond='data:blog.url == &quot;/p/pencarian.html&quot;'>
<script type='text/javascript'>
//<![CDATA[
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
$(function () {
    $("#searchform").submit(function () {
        var b = new google.search.CustomSearchControl("012345678901234567890:mdrcctmncrt", {});
        b.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
        var a = new google.search.DrawOptions;
        a.enableSearchResultsOnly();
        b.draw("cse", a);
        (a = $("#searchq").val()) && b.execute(a);
        return !1
    })
});
//]]>
</script>
</b:if>

Langkah 4
Simpan Template

Keterangan:

• Kode Google API CSE yang telah dimasukan sebelumnya jangan dibuang, karena kita membutuhkan loadernya.
• Ganti URL /p/pencarian.html sesuai dengan URL halaman hasil pencarian anda.
• Buang framwork jQuery jika blog anda telah memasang framework jQuery.
• Samakan atau ubah ID #searchform pada jQuery sesuai dengan ID Form Input anda (misal ID form input; <form id="searchform").
• Jangan lupa untuk mengganti 012345678901234567890:mdrcctmncrt sesuai dengan kode yang anda peroleh dari Google CSE.
• Samakan atau ubah ID #searchq pada jQuery sesuai dengan ID Input anda (misal ID Input; <input id="searchq" name="q")

Kesimpulan

Mudah bukan? Dari pembahasan diatas mudah-mudahan anda memahami bagaimana cara kerja jQuery .submit() dan Google API CSE dengan baik, sehingga kedepannya anda bisa melakukan modifikasi dan perbaikan yang lebih baik lagi dari pada apa yang sudah dibahas di atas. Sampai ketemu dipembahasan berikutnya (Rencananya membuat Blogger Search Ajax API). Happy Blogging :)

Read More

Membuat dan Memasang Google Custom Search Engine

Bismillah. Alhamdulillah. Google memberikan keleluasaan kepada para penggunanya untuk melakukan berbagai modifikasi script, fungsi dan fasilitas yang tersedia secara gratis. Salah satu fasilitas yang cukup bagus adalah Google Custom Search Engine. Fasilitas ini disediakan bagi mereka yang ingin membuat sendiri mesin pencari sesuai dengan keinginan penggunanya. Kita bisa membuat mesin pencari layaknya Google Search untuk meng-index artikel atau informasi dari situs yang bisa kita tentukan sendiri atau dari kumpulan situs favorit kita. Bagi para blogger, banyak pula yang menggunakan Google Custom Search Engine ini sebagai mesin pencari blog sendiri yang khusus meng-index artikel pada blog yang dikelolanya. Bagaimana caranya?

Membuat Akun Google Custom Search Engine

Untuk membuat Google Custom Search Engine, maka syarat utamanya kita harus memiliki akun Google atau GMail. Jika sudah memiliki akun, ikuti langkah dibawah ini:

Langkah 1
Login ke Google dan masuk ke Halaman "Google Penelusuran Khusus"
Langkah 2
Jika anda sudah Login maka akan dihadapkan pada formulir dibawah ini:

Keterangan Gambar

• Nama: Isilah dengan dengan Google Custom Search Engine (rekomendasi; sesuaikan dengan nama blog anda)
• Deskripsi: Isi deskripsi mengenai fungsi mesin telusur yang anda buat, karena mesin telusur ini bersifat publik yang siapapun bisa menggunakannnya
• Bahasa: Pilihlah bahasa yang sesuai dengan kemampuan anda (sayangnya tidak ada bahasa Jawa. #LOL)
• Situs yang akan ditelusuri: Masukan alamat URL (tanpa http://) yang akan ditelusuri pada hasil pencarian. Jika khusus untuk blog pribadi, masukan satu URL alamat blog anda saja.
• Edisi: Jika punya uang, beli saja yang $100 per tahun. Kalau seperti saya, tidak ada pilihan lain kecuali Edisi Standar GRATIS!. Perbedaannya antara limited dan unlimited konfigurasi. Silahkan temukan sendiri perbedaannya.
• Jangan lupa checklist "Saya telah membaca dan menyetujui Persyaratan Layanan"

Langkah 3
Klik tombol "Lanjut"
Langkah 4
Lewati langkah ke 2 ini dengan klik tombol "Lanjut"
Langkah 5
Catat kode mesin telusur anda

Integrasi Google Custom Search Engine pada Blogger

Ada dua bagian untuk mengintegrasikan Google Custom Search Engine pada Blogger, yaitu:

A. Halaman Hasil Pencarian

Buatlah sebuah halaman sebagai tempat untuk menampilkan hasil pencarian. Bisa berupa halaman artikel atau halaman statis (pada contoh artikel ini menggunakan halaman statis).

Langkah 1
Pindahkan mode editor pada mode HTML (Jangan pada mode Compose!). Jangan lupa beri judul halaman.
Langkah 2
Masukan (copy paste) kode dibawah ini pada area artikel:

<div id="cse" style="width: 100%;">Tunggu Sebentar...</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
google.load("search", "1", {
 language: "id",
 style : google.loader.themes.V2_DEFAULT
});
google.setOnLoadCallback(function () {
    var c = new google.search.CustomSearchControl("012345678901234567890:mdrcctmncrt", {});
    c.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var a = new google.search.DrawOptions;
    a.enableSearchResultsOnly();
    c.draw("cse", a);
    for (var a = {}, e = window.location.search.substr(1).split("&"), d = 0; d < e.length; d++) {
        var b = e[d].split("="),
            f = decodeURIComponent(b[0]);
        a[f] = b[1] ? decodeURIComponent(b[1].replace(/\+/g, " ")) : b[1]
    }
    a.q && c.execute(a.q, null, {
        oq: a.oq,
        aq: a.aq,
        aqi: a.aqi,
        aql: a.aql,
        gs_sm: a.gs_sm,
        gs_upl: a.gs_upl
    })
}, !0);
//]]></script>

Perhatian!

Kode diatas adalah kode yang sudah disesuaikan dengan karakter Blogger, namun anda bisa saja menggunakan kode bawaan Google Custom Search Engine.

Jangan lupa ganti kode dibawah ini:

012345678901234567890:mdrcctmncrt

dengan kode mesin telusur yang sudah anda peroleh.
Langkah 3
Terbitkan artikel atau halaman dan catat URL artikel atau halaman ini. Lanjutkan ke langkah berikutnya...


B. Form Input Keyword (Kata Kunci)
Jika pada blog anda sudah tersedia form pencarian, biasanya memiliki kode mirip seperti dibawah ini:

<form id="searchform" action="/p/pencarian.html">
 <input id="searchq" name="q" type="search" placeholder="Cari..."/>
 <input class="searchbutton" name="sa" type="submit" value="Go" />
</form>

Carilah kode diatas pada widget atau template dan hal yang harus diperhatikan adalah sebagai berikut:

• action="/p/pencarian.html": ganti /p/pencarian.html dengan URL halaman yang sudah anda buat tadi (lihat A. Halaman Hasil Pencarian)
• name="q": ini tidak bisa di tawar, karena mesin pencari akan menggunakan karakter unik "q" (query) untuk mengeksekusi kata kunci yang dimasukan pada input
• type="submit": ini juga tidak bisa di tawar (bagi yang belum paham form) karena berfungsi untuk mengirimkan kata kunci input pada halaman yang ada pada action
• Sedangkan untuk atribut lainnya silahkan sesuaikan

Proses pencarian ini dilakukan kurang lebih seperti dibawah ini:

Jika seseorang memasukan kata kunci pada form input name="q", kemudian meng-klik tombol type="submit" maka kata kunci akan dikirim pada halaman action="/p/pencarian.html" untuk diproses. Dan halaman /p/pencarian.html akan memproses kata kunci tersebut untuk menampilkan hasil yang relevan dengan menggunakan Google Custom Search Engine.

Template CSS Google Custom Search Engine

Jika anda kurang suka dengan perpaduan warna bawaan Google Custom Search Engine, silahkan lakukan modifikasi pada kode CSS-nya. Namun sebelum melakukan modifikasi pada kode CSS, buanglah kode dibawah ini:

style : google.loader.themes.V2_DEFAULT

dari kode Google Custom Search Engine (lihat A. Halaman Hasil Pencarian), kemudian tambahkan dan lakukan modifikasi pada kode CSS dibawah ini:

.gsc-control-cse {
 font-family: Arial, sans-serif;
 border-color: #FFFFFF;
 background-color: #FFFFFF;
}
.gsc-control-cse .gsc-table-result {
 font-family: Arial, sans-serif;
}
input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
 border-color: #D9D9D9;
}
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
 border-color: #802020;
 background-color: #660000;
 background-image: none;
}
.gsc-tabHeader.gsc-tabhInactive {
 border-color: #CCCCCC;
 background-color: #FFFFFF;
}
.gsc-tabHeader.gsc-tabhActive {
 border-color: #CCCCCC;
 border-bottom-color: #FFFFFF;
 background-color: #FFFFFF;
}
.gsc-tabsArea {
 border-color: #CCCCCC;
}
.gsc-webResult.gsc-result,
.gsc-results .gsc-imageResult {
 border-color: #FFFFFF;
 background-color: #FFFFFF;
}
.gsc-webResult.gsc-result:hover,
.gsc-imageResult:hover {
 border-color: #EEEEEE;
 background-color: #F9F9F9;
}
.gs-webResult.gs-result a.gs-title:link,
.gs-webResult.gs-result a.gs-title:link b,
.gs-imageResult a.gs-title:link,
.gs-imageResult a.gs-title:link b {
 color: #802020;
}
.gs-webResult.gs-result a.gs-title:visited,
.gs-webResult.gs-result a.gs-title:visited b,
.gs-imageResult a.gs-title:visited,
.gs-imageResult a.gs-title:visited b {
 color: #802020;
}
.gs-webResult.gs-result a.gs-title:hover,
.gs-webResult.gs-result a.gs-title:hover b,
.gs-imageResult a.gs-title:hover,
.gs-imageResult a.gs-title:hover b {
 color: #802020;
}
.gs-webResult.gs-result a.gs-title:active,
.gs-webResult.gs-result a.gs-title:active b,
.gs-imageResult a.gs-title:active,
.gs-imageResult a.gs-title:active b {
 color: #802020;
}
.gsc-cursor-page {
 color: #802020;
}
a.gsc-trailing-more-results:link {
 color: #802020;
}
.gs-webResult .gs-snippet,
.gs-imageResult .gs-snippet,
.gs-fileFormatType {
 color: #000000;
}
.gs-webResult div.gs-visibleUrl,
.gs-imageResult div.gs-visibleUrl {
 color: #666666;
}
.gs-webResult div.gs-visibleUrl-short {
 color: #666666;
}
.gs-webResult div.gs-visibleUrl-short {
 display: none;
}
.gs-webResult div.gs-visibleUrl-long {
 display: block;
}
.gs-promotion div.gs-visibleUrl-short {
 display: block;
}
.gs-promotion div.gs-visibleUrl-long {
 display: none;
}
.gsc-cursor-box {
 border-color: #FFFFFF;
}
.gsc-webResult.gsc-result.gsc-promotion {
 border-color: #F6F6F6;
 background-color: #F6F6F6;
}
.gsc-completion-title {
 color: #802020;
}
.gsc-completion-snippet {
 color: #000000;
}
.gs-promotion a.gs-title:link,
.gs-promotion a.gs-title:link *,
.gs-promotion .gs-snippet a:link {
 color: #1155CC;
}
.gs-promotion a.gs-title:visited,
.gs-promotion a.gs-title:visited *,
.gs-promotion .gs-snippet a:visited {
 color: #1155CC;
}
.gs-promotion a.gs-title:hover,
.gs-promotion a.gs-title:hover *,
.gs-promotion .gs-snippet a:hover {
 color: #1155CC;
}
.gs-promotion a.gs-title:active,
.gs-promotion a.gs-title:active *,
.gs-promotion .gs-snippet a:active {
 color: #1155CC;
}
.gs-promotion .gs-snippet,
.gs-promotion .gs-title .gs-promotion-title-right,
.gs-promotion .gs-title .gs-promotion-title-right *  {
 color: #666666;
}
.gs-promotion .gs-visibleUrl,
.gs-promotion .gs-visibleUrl-short {
 color: #009933;
}

Kesimpulan

Google Custom Search Engine ini bisa diintegrasikan dengan Google Adsense jika anda memiliki akunnya. Integrasi dengan Google Adsense dilakukan pada konfigurasi Mesin Telusur bukan pada kode yang telah dibahas diatas. Kelemahan menggunakan mesin telusur ini adalah halaman yang selalu di-reload jika kita mengubah kata kunci pencarian. Bagaimana jika ingin halaman ini tidak di-reload apabila kita mengganti kata kunci? Nantikan pada pembahasan berikutnya. Silahkan anda bereksperimen dan memodifikasinya sendiri sesuai keinginan dan imajinasi. "Bagaimana jika kita membuat sendiri mesin pencari dengan memanfaatkan Blogger JSON API?" In Progress Trial and Error...

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Pranala Luar:

• Membuat Mesin Penelusuran Khusus
• Custom Search Help
• Dokumentasi pengembang
• Google Custom Search Engine Blog
• Google Custom Search Engine TOS
• Video Introduction to Google Custom Search

Read More

Blogger Meta Description

Bismillah. Alhamdulillah. Bagian ini sering terlupakan atau bahkan tidak mendapat perhatian dari para pengguna Blogger. Mereka seakan menganggap meta description sebagai sebuah hal yang biasa saja tanpa pengaruh yang besar. Meta description adalah bagian vital blog yang berisi informasi tentang blog dan artikel-artikel yang ditulis. Meta description tidak akan ditampilkan oleh browser namun diperlukan oleh machine-readable metadata untuk mengurai isi situs. Tanpa meta description maka blog akan sangat sulit dirayapi oleh mesin pencari. Pada bahasan sebelumnya tentang Metadata Open Graph sudah banyak diulas tentang keberadaan dan posisi meta description bagi mesin pencari dan situs lain. Salah satunya bahwa, situs lain akan menampilkan situs blog kita pada situs mereka dengan mengambil informasinya dari meta description.

Deskripsi

Sesuai dengan perubahan kebijakan mesin pencari dalam merayapi suatu situs, maka blogger menyediakan fasilitas meta description agar para pengguna blogger tidak tersisihkan dimata mesin pencari. Bahkan fasilitas ini dikeluarkan ketika Google belum mengeluarkan kebijakan penghapusan meta keyword dari index mesin pencarinya. Matt Cutts sebagai seorang senior engineer di mesin pencari Google menyebutkan bahwa "kami mengabaikan dan tidak lagi menggunakan meta keyword untuk mengindex suatu situs namun kami menggunakan meta description untuk merayapi suatu situs" hal ini menjadi penegasan bahwa mereka (mesin pencari) tidak perlu dan tidak menganggap keberadaan meta keyword namun mereka sangat memperhatikan meta description. Dalam video yang diunggah pada Youtube, Matt Cutts menyebutkan "jangan habiskan waktu anda untuk mengumpulkan berbagai keyword karena kami telah mengabaikan meta keyword, sekarang konsentrasi-lah untuk membuat meta description yang menarik bagi pengunjung".

Perhatikan screenshoot dibawah ini:

Facebook dan Goole Plus menampilkan meta description Blogger Tune-Up. Apa yang ditampilkan pada Facebook dan Google Plus bukanlah paragraph awal atau isi artikel namun itu adalah meta description. Meta description berisi informasi yang unik pada setiap halaman artikel. Ini berarti meta description bersifat dinamis dan berbeda disetiap halaman artikel. Seorang Blogger harus menuliskan meta description pada masing-masing artikel.

Mengaktifkan Meta Description

Jika anda menggunakan template bawaan blogger sudah tentu meta description terintegrasi didalamnya, namun tidak demikian bagi para pengguna custom template. Meta description biasanya harus dimasukan secara manual atau mungkin sebenarnya sudah tersedia namun terkadang tidak tahu maksudnya. Mari kita aktifkan meta description.

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Setelan - Preferensi Penelusuran - Tag Meta"

Langkah 3
Klik "Edit" pilih "Ya" pada "Aktifkan deskripsi penelusuran?"

Langkah 4

Isi meta description dengan karakter maksimum 150 karakter. Setelah di isi klik tombol "Simpan perubahan"

Keterangan: Meta description ini akan digunakan hanya pada halaman utama (halaman index atau halaman beranda) sedangkan untuk masing-masing artikel, kita harus menuliskannya lagi.

Memeriksa Ketersediaan Meta Description

Untuk meyakinkan bahwa meta description telah terintegrasi pada blog kita, lakukan pemeriksaan pada dua lokasi berikut, yaitu:

Pada Editor Entri
Langkah 1
Buat sebuah artikel
Langkah 2
Perhatikan pada sidebar editor, harus sudah bertambah satu widget "Deskripsi Penelusuran"

Langkah 3

Klik "Deskripsi Penelusuran" dan masukan deskripsi artikel pada kotak dibawahnya, setelah itu klik tombol "Selesai"

Keterangan: Deskripsi Penelusuran ini akan menggantikan deskripsi global, dan deskripsi ini akan digunakan mesin pencari untuk mengurai isi artikel anda. Meta Description ibarat ringkasan dari artikel yang anda tulis, makanya, buatlah deskripsi yang menarik. Deskripsi artikel tidak akan ditampilkan pada browser namun akan diambil oleh mesin pencari (machine-readable metadata) dan situs lain (misal Facebook dan Google Plus).

Pada Template
Langkah 1
Masuk ke "Template - Edit HTML - Lanjutkan"
Langkah 2
Scroll hingga di temukan kode dibawah ini:

<meta expr:content='data:blog.metaDescription' name='description'/>

Jika tidak ditemukan berarti blog anda belum menggunakan meta description walau sudah diaktifkan, ikuti langkah penyisipan kode berikutnya.

Langkah 3
Jika template belum menerapkan meta description, cari kode dibawah ini:

<b:include data='blog' name='all-head-content'/>

Langkah 4
Masukan (copy paste) kode dibawah ini tepat dibawah kode pada langkah 3:

<b:if cond='data:blog.metaDescription != &quot;&quot;'>
 <meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

Keterangan: Mengenai conditional tag silahkan baca disini
Langkah 6
Simpan template

Memeriksa Meta Description

Setelah meta description diaktifkan, dan artikel yang disertai meta descriptioan diterbitkan maka lakukan pengecekan untuk memastikan bahwa meta description sudah aktif pada blog anda. Lakukan langkah berikut:

Langkah 1
Lihat artikel yang sudah disertai meta description
Langkah 2

Gunakan kombinasi tombol keyboard CTRL + U (pengguna Firefox dan Chrome) atau klik kanan pada area artikel dan pilih "View source" (pengguna Safari) untuk melihat source code blog anda, dan perhatikan meta deskripsi yang baru saja anda buat. Atau gunakan kata kunci "name='description'" menggunakan pencarian browser. Jika sudah tampil seperti apa yang anda tuliskan pada artikel berarti meta description pada blog anda sudah aktif, lakukan share pada Facebook atau Google Plus, maka yang akan ditampilkan adalah meta description, bukan penggalan artikel.

Video Penggunaan Meta Description

Dibawah ini adalah video yang dijelaskan oleh Matt Cutts tentang penggunaan meta description dan pengabaian meta keyword.

Kesimpulan

Penambahan meta description berarti menambah daftar pekerjaan anda, karena artikel-artikel sebelumnya mungkin tidak disertai meta description. Ini berarti sekarang anda harus memasukannya satu persatu. Huh!!! Sangat melelahkan, bayangkan jika artikel sudah mencapai 500 halaman? Namun itulah sebuah konsekwensi dari sebuah kebijakan. Google memiliki kebijakan maka blogger mau tidak mau harus mengikuti, kecuali jika kita tidak peduli dengan semua perubahan itu.

Apakah meta description adalah salah satu teknik SEO? Ma'af saya bukan ahli SEO dan tidak tahu tentang SEO. Blogger Tune-Up hanya menuliskan artikel sesuai dengan standar yang belaku dan tidak dimaksudkan untuk bermain SEO. Semantic Web adalah pendekatan situs terhadap mesin pencari, dan meta description adalah bagian dari semantic web. Jadi, SEO atau bukan tidaklah menjadi tujuan, tetap menulis untuk konsumsi manusia itu lebih baik dari pada menulis untuk konsumsi mesin.

Pranala Luar:

• Google Does Not Use Keywords Meta Tag in Web Ranking
• How To "Legally" Hide Words On Your Pages For Search Engines
• Serving Filters
• Meta Tags

Read More

Blogger Widget - Cumulus Label Cloud

Bismillah. Alhamdulillah. Rehat dari bahasan berat, kali ini membahas yang ringan dan praktis saja, yaitu memasang widget cumulus label cloud di Blog. Widget cumulus label cloud ini ternyata masih terus dikembangkan setelah pada mulanya dibuat oleh Roy Tanck khusus untuk pengguna Wordpress dengan nama WP Cumulus Tag Cloud. Minimus kemudian mengembangkannya untuk versi Blogger karena pada Blogger tidak ada fasilitas tag jadi mungkin lebih tepatnya diberi nama Blogger Cumulus Label Cloud. Masih tetap menggunakan flash seperti pendahulunya, hanya ditambahkan beberapa fasilitas untuk mempercantik tampilan, seperti; penambahan angka sesuai dengan jumlah artikel pada label tersebut, penambahan kotak label ketika mouse hover, pengaturan warna untuk label, dan semakin mudah dalam penerapannya. Mau mencoba?

Demo Blogger Widget Cumulus Label Cloud

Integrasi Widget Cumulus pada Blogger

Tidak seperti sebelumnya, Cumulus ini cukup mudah dalam pemasangannya, ikuti langkah dibawah ini:

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke Tata Letak
Langkah 3
Tambahkan sebuah Gadget

Langkah 4
Pilih "Tambahkan Milik Anda"

Langkah 5
Masukan (copy paste) link dibawah ini pada bagian URL kemudian klik "Tambah URL":

http://henscripts.googlecode.com/svn/trunk/tag/cumulus.xml

Langkah 7
Atur konfigurasi dengan menyesuaikan pada Template yang anda gunakan

Langkah 8
Simpan widget dan preview blog anda...

Pengaturan

Dibawah ini pengaturan untuk Cumulus Label Cloud. Ubahlah sesuai dengan keinginan anda.

• Judul Label - Ubah sesuai dengan Judul Gadget.
• Tinggi - Ubahlah sesuai tinggi gadget.
• Tinggi Cloud - Ubah tinggi dalam satuan pixel, harus diperhatikan pula tinggi widget yang anda gunakan.
• Lebar Cloud - Ubah lebar dalam satuan pixel, harus diperhatikan pula lebar widget yang anda gunakan.
• Ukuran Huruf Min - Atur ukuran minimum font dari label, ini akan tampil sebagai label cloud terkecil pada widget.
• Ukuran Huruf Maks - Atur ukuran maksimum font dari label, ini akan tampil sebagai label cloud terbesar pada widget.
• Warna Label Min - Aturlah warna label ukuran terkecil. Warna ini akan mempengaruhi warna huruf terkecil saat rotasi pada widget.
• Warna Label Maks - Aturlah warna label ukuran terbesar. Warna ini akan mempengaruhi warna huruf terbesar saat rotasi pada widget.
• Warna Hover - Aturlah warna yang akan muncul saat mouse hover, warna ini mempengaruhi kotak, huruf dan angka label.
• Kecepatan Rotasi - Mengatur kecepatan perputaran awan.
• Warna Latar - Untuk mengatur warna latar belakang (background) label cloud.
• Mode Transparan - Menetapkan warna latara belakang label cloud yang transparan.
• Tampilkan Penanda - Menunjukkan jumlah label ketika Anda menggeser kursor mouse di atas label.

Kesimpulan

Disediakannya Blogger API memang mempermudah konektifitas antara satu aplikasi dengan aplikasi lainnya, lebih cepat dan lebih ringan, dan salah satunya adalah Blogger Cumulus Label Cloud ini. Beberapa masa yang lalu, untuk memasang cumulus label cloud ini sangatlah ribet dan rumit, namun sekarang pengguna awam pun bisa dengan mudah menggunakannya. Widget ini bersifat opsional atau tambahan. Selamat mencoba dan semoga berhasil. Happy Blogging :)

Read More

Rich Snippets - Microformat & Microdata

Bismillah. Alhamdulillah. Berawal dari rasa penasaran dengan perkembangan standar bahasa HTML dan tingkah laku mesin pencari, juga rasa penasaran dengan gencarnya para Blogger membahas "cara menampilkan bintang pada hasil penelusuran Google" yang secara garis besar para Blogger baik lokal maupun global hanya membahas cara-caranya saja tanpa detail maksud dan tujuan hingga memperoleh bintang pada hasil penelusuran. Muncul berbagai pertanyaan dalam benak saya secara pribadi. Untuk apakah jika kita memperoleh bintang? Berpengaruhkan hal tersebut terhadap blog kita dihadapan mesin pencari? dan lain sebagainya. Hingga terjadilah pertemuan dengan istilah Rich Snippet yang sedang hangat dibahas, terutama Google yang gencar memperkenalkan Rich Snippet pada para webmaster. Masih hangat beberapa saat yang lalu, Blogger Tune-Up membahas tentang metadata dengan standar Open Graph, sekarang akan dibahas yang mirip-mirip namanya tetapi berbeda fungsinya yaitu microdata dan microformat. Apa perbedaan microdata dan microformat? Dan apa hubungannya dengan Rich Snippet? Atau justru masih bertanya, apa Rich Snippet? Mari sama-sama menyimak artikel ini.

Apa dan Untuk Apa Rich Snippet?

Jika diterjemahkan perkata mungkin akan menghasilkan persepsi yang berbeda. Rich Snippet dalam bahasa Indonesia berarti sama dengan Sisipan Kaya. Sesuai dengan namanya maka Rich Snippet digunakan untuk memperjelas atau memberikan deskripsi tambahan dari suatu situs agar pengunjung dengan mudah menemukan target yang dicarinya. Silahkan anda perhatikan mesin pencari dalam menampilkan suatu kata kunci, semakin sedikit situs spam yang menggunakan black hat SEO ter-index pada mesin pencari hal ini salah satunya dipengaruhi oleh Rich Snippet. Jika suatu situs menambahkan Rich Snippet sama persis seperti situs resminya maka situs tersebut dianggap sebagai situs sampah. Sisipan Kaya berfungsi untuk menambahkan atau melengkapi informasi yang penting untuk diketahui oleh pengguna internet. Misal; Kita akan mencari suatu aplikasi dengan nama "Tune Up Utilities" namun lupa nama lengkap aplikasi tersebut, yang kita ingat hanya kata "Tune Up". Ketika kita mencari aplikasi tersebut dengan kata kunci "Tune Up" pada mesin pencari maka akan disuguhkan sederet situs yang beragam, beberapa kemungkinan yang bisa saja muncul pada mesin pencari adalah sebagai berikut:

• Tune-Up yang berhubungan dengan blog ini
• Tune-Up yang berhubungan dengan mesin
• Tune-Up yang berhubungan dengan aplikasi

Perhatikan screenshoot hasil pencarian dengan kata kunci "Tune Up" dibawah ini:

Situs mana yang akan diklik? Dapat dipastikan pengguna internet akan meng-klik "Tune Up Utilities 2012 - CNET Download.com" sesuai tujuannya untuk memperoleh informasi lengkap tentang aplikasi tersebut. Nomor 1 itulah yang kemudian dikenal dengan Rich Snippet yang berisi informasi sisipan tentang:

• Rating
• Penulis Ulasan
• Harga
• Sistem Operasi
• Kategori Aplikasi

Dan kecil kemungkinan pengguna nyasar ke situs "Blogger Tune Up". Disinilah fungsi Rich Snippet yang membuat mesin pencari lebih mudah untuk digunakan oleh pengguna yang awam sekalipun. Index mesin pencari pun semakin mendekati sasaran yang benar-benar dibutuhkan oleh pengguna internet. Rich Snippet akan memberikan informasi yang sangat berguna bagi pengguna.

Sedangkan Nomor 2 pada gambar biasanya diambil dari meta description.

Manusia Pertama, Mesin Kedua

Human First, Machines Second adalah kalimat yang selalu ditekankan oleh para webmaster. Intinya, ketika kita membuat sebuah situs maka hal yang pertama harus diperhatikan adalah para pengunjung baik itu dari sisi usability dan accessibility. Sedangkan mesin adalah prioritas kedua dalam membangun sebuah situs. Tim Berners - Lee menyebutkan:

... berbagai informasi penting dalam desain web digunakan untuk konsumsi manusia, dan ... stuktur data tidak ditujukan untuk robot web browsing. ... Semantic Web disusun dalam membantu pendekatan bahasa untuk mengekspresikan informasi kedalam sebuah mesin pemrosesan formulir.

Tim Berners - Lee

Dari penjelasan diatas dapat diambil kesimpulan bahwa pada dasarnya desain web itu mengutamakan manusia namun ketika kita menyusun web dengan aturan semantic berarti kita juga melakukan pendekatan pada mesin. Semantic berada diantara web desainer dan mesin yang digunakan sebagai media untuk saling berkomunikasi dan Rich Snippet harus disusun sesuai dengan Semantic Web.

Kenapa Harus Menambahkan Rich Snippet?

Kebanyakan para webmaster sangat familiar dengan tag HTML dalam menyusun halam web. Dan biasanya tag HTML ditulis untuk memberitahu browser bagaimana menampilkan informasi yang ada didalam tag. Sebagai contoh; <h1>Tune Up</h1>. Tag ini berarti memberitahu browser untuk menampilkan string teks "Tune Up" dalam format heading 1 (Judul 1). Namun, tag HTML ini tidak memberikan informasi apa-apa tentang arti string teks tersebut. Apakah string teks "Tune Up" tersebut merupakan sebuah aplikasi, sebuah blog, atau tentang mesin? Sehingga hal ini menjadi sangat sulit bagi mesin pencari untuk menampilkan informasi yang relevan kepada pengguna internet. Dimulai dari permasalah inilah kemudian mesin pencari (Google, Yahoo!, Microsoft dan Yandex) memperkenalkan Rich Snippet agar hasil pencarian mereka menjadi lebih relevan sesuai dengan apa yang dicari pengguna internet.

Seperti dijelaskan diatas bahwa untuk menyusun Rich Snippet, kita harus mengikuti aturan main semantic agar web yang kita susun mampu dengan mudah dibaca oleh mesin pencari. Dalam menyusun Rich Snippet para webmaster menyarankan dua format yaitu microdata dan microformat. Format microdata dan microformat sebenarnya merupakan pengembangan dari bahasa mark up, sehingga dalam penggunaannya pun terintegrasi didalam tag-tag HTML yang sudah ada. Namun tidak menutup kemungkinan untuk menyusun Rich Snippet didalam tag HTML secara terpisah.

Apa Microformat dan Microdata?

Microdata hampir sama dengan microformat, karena keduanya merupakan perkembangan bahasa markup yang masih termasuk kedalam machine-readable metadata (mesin pembaca metadata) untuk menguraikan konten web. Tag HTML, Microdata dan Microformat adalah bahasa markup unik yang saling melengkapi satu sama lain dan ketiganya sangat membantu mesin pencari dalam merayapi halaman-halaman web. Diantara ketiganya, microdata merupakan perkembangan bahasa markup terbaru yang keberadaannya memberikan persaingan selaras terhadap microformat yang menggunakan standar RDFa. Dalam penggunaannya, sebenarnya para webmaster bebas untuk menentukan format markup-nya, boleh menggunakan microformat saja, microdata saja atau menggunakan keduanya. Namun webmaster terutama Google menyarankan penggunaan kedua format tersebut.

Microformat didesain untuk berbagai jenis konten web secara umum. Mereka terintegrasi didalam markup dan atribut yang sebenarnya mudah untuk dipahami dan digunakan. Dan mereka sangatlah sederhana karena menggunakan kosakata pre-defined, misal; fn, author, rel, vcard, updated, dan sebagainya. Microformat menggunakan format standar yang didefinisikan oleh microformat.org.

Contoh penggunaan microformat:

<dl class="vcard">
 <dt class="fn"><a href="http://modification-blog.blogspot.com" class="url">Hendriono</a></dt>
 <dd class="title">Web Desain</dd>
 <dd class="adr"><span class="locality">Ciamis</span>, <abbr title="Jawa Barat" class="region">JABAR</abbr> <span class="postal-code">46383</span></dd>
</dl>

Perhatikan nilai dari atribut class (vcard, fn, url, title, adr, locality, region, postal-code). Dari contoh diatas dapat diambil kesimpulan bahwa microformat bisa diintegrasikan didalam atribut class, dan dapat digunakan bersama dengan CSS. (Insya Allah artikel berikutnya akan membahas tentang Microformat secara detail)

Microdata adalah bagian dari spesifikasi HTML5. Namun juga tergantung pada perubahan kosakata dan atribut baru dalam penerapan metadata. Dan itu tidak dibatasi untuk setiap jenis tertentu dari konten web, untuk dapat menjelaskan konten unik yang tidak mampu ditangani oleh Microformat. Selanjutnya, microdata dapat menggunakan notasi DOM, yang dapat membuat parsing metadata lebih mudah.

Ada dua standar kosakata microdata yang digunakan saat ini yaitu kosakata dari data-vocabulary.org dan kosakata dari schema.org. Namun dari keduanya, beberapa webmaster terutama Google menyarankan penggunaan kosakata dari schema.org, dengan alasan kosakata schema.org lebih banyak dan lebih fleksibel dari pada kosakata data-vocabulary. Walau contoh yang diberikan oleh Google masih menggunakan data-vocabulary namun disarankan pada webmaster untuk menggunakan Schema yang lebih banyak kosakatanya dan kemungkinan kedepannya, data-vocabulary tidak lagi digunakan.

Contoh penggunaan microdata:

<dl itemscope itemtype="http://schema.org/Person">
 <dt itemprop="name"><a href="http://modification-blog.blogspot.com" itemprop="url">Hendriono</a></dt>
 <dd itemprop="title">Web Desain</dd>
 <dd itemprop="address" itemscope itemtype="http://schema.org/Address">
  <span itemprop="locality">Ciamis</span>, <abbr title="Jawa Barat" itemprop="region">JABAR</abbr> <span itemprop="postal-code">46383</span>
 </dd>
</dl>

Nah, sekarang kita bisa membedakan, mana syntaks microformat dan mana syntaks microdata. Keduanya jelas memiliki perbedaan syntaks, microdata menggunakan itemscope untuk sinkronisasi dengan kosakata dan itemtype untuk deklarasi spesifik kosakata yang akan digunakan. Sedangkan itemprop adalah deklarasi masing-masing item yang harus sesuai dengan jenis kosakata (itemtype) yang digunakan.

Misal contoh diatas jika saya baca sebagai mesin; Tujuannya adalah memperkenalkan siapa Hendriono, maka syntaks wajibnya adalah itemscope. Kemudian menentukan jenis kosakata yang akan digunakan dalam memperkenalkan diri, maka syntaks itemtype spesifik mengarah pada perpustakaan http://schema.org/Person. Sedangkan itemprop adalah deklarasi masing-masing item; name, title dan address. Disana ada lagi penambahan kosakata lain yaitu http://schema.org/Address karena alamat memiliki begitu banyak item lainnya (dalam contoh; locality, region, postal-code). Apakah susunannya harus selalu seperti itu? Tidak...

Contoh diatas hanya menggunakan logika sederhana;

• Siapa namanya? Hendriono
• Apa hobinya? Web Desain
• Dimana alamatnya? (Nah, pada pertanyaan ini, kita akan membutuhkan banyak sekali item jawaban, misal; Kabupaten, Propinsi, Kode POS, Nomor Telephone dan lain sebagainya, maka dibutuhkan sebuah kosakata lagi)

Jika masih bingung, Insya Allah kedepan tentang microdata ini akan dibahas lebih detail.

Walaupun memiliki perbedaan syntaks dan perbedaan standar namun microdata dan microformat bisa di-integrasikan secara bersama-sama. Dibawah ini contoh perpaduan Microformat dan Microdata:

<dl class="vcard" itemscope itemtype="http://data-vocabulary.org/Person">
 <dt class="fn" itemprop="name"><a href="http://modification-blog.blogspot.com" itemprop="url">Hendriono</a></dt>
 <dd class="title" itemprop="title">Web Desainer</dd>
 <dd class="adr" itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
  <span class="locality" itemprop="locality">Ciamis</span>, <abbr title="Jawa Barat" class="region" itemprop="region">JABAR</abbr> <span class="postal-code" itemprop="postal-code">46383</span>
 </dd>
</dl>

Warning Microformat Google Webmaster Rich Snippets

Saya secara pribadi sempat bingung dengan beberapa warning yang ditampilkan saat melakukan pemeriksaan Rich Snippet. Namun warning default yang ditampilkan Tool Rich Snippet biasanya terdiri dari tiga jenis (tidak menutup kemungkinan lebih banyak lagi) warning dan semua itu kesalahan secara default dari microformat blogger (bukan dari microdata):

Warning: Missing required hCard "author"

<span class='post-author vcard'>
 <a class='url fn' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><data:post.author/></a>
</span>

Warning ini diatasi dengan menambahkan kode class='url fn'. url menunjukan link url author dan fn menunjukan nama lengkap (full name)

Warning: Missing required field "updated"

<abbr class='updated published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr>

Warning ini diatas dengan menambahkan kode class='updated published' yang menunjukan waktu diterbitkan dan waktu diupdatenya artikel.

Warning: Missing required field "entry-title"

<h2 class='post-title entry-title'>

Warning diatas diatasi dengan menambahkan entry-title pada class, untuk menunjukan judul artikel.

Situs wiki microformats.org menuliskan beberapa issue untuk para pengguna blogger, diantaranya:

• Template baru menggunakan "main" untuk identifikasi global semua artikel (entri)
• Template baru menggunakan "post" untuk identifikasi masing-masing artikel blog
• Template baru menggunakn "post-title" untuk identifikasi judul artikel

Untuk mengetahui issue baru silahkan kunjungi secara teratur situs wiki microformats.org.

Video Rich Snippet dari Google Webmaster

Video dibawah ini dibahas oleh tim Google Webmaster khusus tentang Rich Snippet. Video-video terbaru akan ditambahkan kemudian.

Introduction to Rich Snippets

Types of Rich Snippets

Rich Snippets - Product Search

Rich Snippets - Reviews

Rich Snippets - Recipe markup

Rich Snippets - Events

Rich Snippets - Breadcrumbs

Rich Snippets - Apps

Rich Snippets - Notifying Google

Rich Snippets - Troubleshooting

When will Rich Snippets become widely available?

Kesimpulan

Artikel diatas mungkin belum memenuhi harapan akan keingintahuan tentang semantic microformat dan microdata. Artikel ini hanya pancingan agar kita jangan telalu cepat menggunakan trik-trik yang dibahas luas oleh pada blogger tanpa tahu tujuannya dan efeknya untuk blog kita. Hati-hati dalam menerapkan kode, script atau tutorial sepintas tanpa penjelasan, karena ketidaktahuan fungsi bisa membuat kita masuk dalam kotak sebagai bagian dari Blogger yang menerapkan Black Hat SEO. Dan Black Hat SEO membuat blog kita dianggap sampah oleh mesin pencari.

Lalu apakah microformat dan microdata adalah bagian dari teknik SEO. Ma'af saya bukan ahli SEO dan tidak tahu tentang SEO, saya menulis artikel ini hanya mengikuti aturan main dan standar yang ada. Blogger Tune-Up masih tetap berkomitmen "Tanpa SEO adalah SEO sebenarnya yang murni tanpa intimidasi". Sampai ketemu pada pembahasan berikutnya. Happy Blogging :)

Read More