DUNIA BLOG kali ini ingin berbagi informasi tentang Template Super SEO Friendly yang telah diluncurkan oleh CARA GAMPANG. Template Super SEO Friendly ini menurut DUNIA BLOG cukup banyak membantu upaya-upaya kita dalam dunia blogging yang tujuan utamanya membuat blog menjadi populer dan terkenal.Pada bagian header template ini dilengkapi dengan dua model menu navigasi horizontal, yaitu di atas header terdapat menu navigasi horizontal yang langsung dilengkapi dengan fasilitas search dan berwarna biru muda. Pada bagian bawah header, dilengkapi dengan menu navigasi drop-down yang dilengkapi dengan keterangan pendukung.
Tidak kalah pentingnya, template ini telah pula dilengkapi dengan fasilitas widget News Up-date (breaking-news) yang dapat langsung jalan asalkan anda telah memiliki minimal 5 artikel blog (postingan blog). Widget News up-date ini akan menginformasikan kepada para visitor tentang 10 artikel blog terbaru yang ada dalam blog kita atau yang telah anda tuliskan.
Simple template ini juga telah dilengkapi dengan Widget Tab View Menu yang dapat anda ubah sesuai dengan kebutuhan anda. Format standartnya adalah Widget Popular Post, Widget Label dan Widget Archieve Blog. Template ini juga memiliki 3 kolom untuk footernya, dan di atas footer dilengkapi dengan menu navigasi horizontal berwarna merah yang kami sebut dengan Menu Bottomic. Perhatikan gambar di bawah ini.
Template ini telah pula saya lengkapi dengan struktur metatag-heading yang SEO Friendly dan anda tinggal menambahkan Google site verification pada bagian header templatenya. Selanjutnya, template ini telah pula saya lengkapi dengan fasilitas Navigasi Breadcrumb yang pasti akan langsung terindeks oleh Google search engine saat anda menuliskan 3 (tiga) buah artikel. Tambahan fasilitas berikutnya adalah adanya Navigasi Permalink pada bagian akhir tiap-tiap postingan blog, dan selanjutnya anda tinggal menambahkan fitur related-artikel.
Lebih jauh lagi, template ini sangat-sangat akomodatif terhadap Google Webmaster Tools, hal ini dapat anda buktikan sendiri dengan mempergunakan fasilitas Instant Preview dari Google Webmaster Tools yang sangat-sangat membantu untuk mendatangkan unique visitor (dikala blog kita sepi pengunjung).
Bilamana anda berminat untuk menggunakan template ini, berikut adalah link-link yang dapat anda manfaatkan :
Sekian uraian kami tentang Template Super SEO Friendly, semoga bermanfaat, dan bilamana masih ada yang belum dimengerti, silahkan anda menuliskannya lewat kotak komentar.
DUNIA BLOG kali ini akan berbagi informasi tentang seputar template SEO Friendly yang pada dasarnya menurut DUNIA BLOG menjadi impian atau dambaan setiap blogger/webmaster. Template SEO Friendly ini memang banyak membantu kita dalam rangka meraih dan mendapatkan posisi teratas pada hasil pencarian oleh search engine terutama Google search engine (raja search engine dunia).Pada artikel terdahulu pernah saya bahas perihal membuat template menjadi SEO Friendly, yang berfokus pada cara mengganti komposisi metatag-heading sebuah template. Nah pada artikel kali ini saya akan menguraikan agak lebih panjang lebar lagi, yaitu
1. Memasang Navigasi Breadcrumb yang langsung dapat terindeks oleh Google.
Navigasi Breadcrumb ini memiliki fungsi untuk menambah kekuatan pada indeks search engine dengan menambah kategori pada artikel-artikel blog yang kita miliki. Navigasi Breadcrumb ini biasanya terletak di atas judul tiap-tiap postingan blok. Untuk membuatnya silahkan anda membaca ARTIKEL ini.
2. Memasang Navigasi Permalink pada blog.
Sedikit penjelasan dari saya, permalink atau yang biasa juga disebut permanen link adalah sebuah kotak kecil yang berisi pesan dan alamat url atau link postingan yang permanen. Atau dengan kata lain seo permanen link atau sering disingkat dengan seo permalink adalah merupakan salah satu cara optimasi On-Page yang berguna untuk memasang permanen link serta bertujuan untuk menambah internal link pada posting blog, untuk itu memasang permalink seo di blogspot sangat bermanfaat dalam rangka optimasi blog kita.
3. Memasang Navigasi Breaking News atau News Update.
Navigasi Breaking News atau Widget News Update ini berfungsi untuk menginformasikan kepada pengunjung tentang 10 artikel terbaru yang ada pada blog kita. Widget ini banyak membantu kita sekaligus dapat merangsang pengunjung untuk lebih lama berselancar pada blog kita. Widget Breaking News atau News Update ini biasanya diletakkan persis di bawah menu navigasi dropdown bagian atas, sehingga mudah sekali untuk terlihat oleh para pengunjung. Cara membuatnya silahkan LIHAT DI SINI.
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 1Login ke Blogger
Langkah 2
Masuk ke "Dasbor - Template - Edit HTML - Lanjutkan"
Langkah 3
Cari kode dibawah ini:
<head>Langkah 4
...
</head>
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:
Simpan template
Integrasi Tag rel="me" pada Google Plus
Langkah 1Buka 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
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 1Buka link Google Plus Authorship
Langkah 2
Masukan alamat email valid sesuai dengan email yang digunakan untuk login pada Blog, GMail, dan Google Plus
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 1Buka 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:
- 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
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:
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[2] Microsoft (Baik)
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.js[3] CDNJS (Sedang)
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js
http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js[4] jQuery (Kurang)
http://code.jquery.com/jquery.min.js[5] Yandex (Sangat Kurang)
http://code.jquery.com/jquery.js
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 :)
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.
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">Event handler dibawah terlibat ke dalam form:
<input type="text" value="Ini hanya percobaan"/>
<input type="submit" value="Kirim"/>
</form>
<div id="lain">
Pemicu Lain
</div>
$('#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.setOnLoadCallbackkemudian di ganti dengan:
$("#searchform").submitID #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 !1Namun 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 == "/p/pencarian.html"'>Bagaimana conditional tag ini bekerja? Silahkan baca disini.
... Script jQuery Google API CSE ...
</b:if>
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 1Buka 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 == "/p/pencarian.html"'>Langkah 4
<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>
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 :)
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 1Login ke Google dan masuk ke Halaman "Google Penelusuran Khusus"
Langkah 2
Jika anda sudah Login maka akan dihadapkan pada formulir dibawah ini:
- 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"
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 1Pindahkan 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>Perhatian!
<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>
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:mdrcctmncrtdengan 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">Carilah kode diatas pada widget atau template dan hal yang harus diperhatikan adalah sebagai berikut:
<input id="searchq" name="q" type="search" placeholder="Cari..."/>
<input class="searchbutton" name="sa" type="submit" value="Go" />
</form>
- 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:
DUNIA BLOG kali ini akan berbagi pengalaman tentang merubah News-Mojo Template jadi lebih SEO Friendly. Menurut DUNIA BLOG merubah News-Mojo Template jadi lebih SEO Friendly ini memiliki manfaat yang positif, terutama bagi rekan-rekan blogger yang menggunakan template jenis ini. Jangan khawatir, kita akan menjadikannya sebuah template yang SEO Friendly.Memiliki sebuah template blog yang SEO Friendly pada dasarnya adalah merupakan dambaan semua blogger/webmaster (termasuk saya juga). Salah satu manfaat template SEO Friendly adalah memudahkan search engine (mesin pencari) saat melakukan proses crawling terhadap blog yang kita miliki, sehingga blog kita akan lebih mudah terindeks oleh search engine tersebut.
Banyak situs-situs di internet yang menyediakan template-template baik untuk blogger, wordpress maupun joomla. Namun pada artikel ini hanya akan membahas salah satu blogger-template yang memang menjadi favorit saya yaitu NEWS-MOJO Blogger Template, yang rancangan aslinya dibuat oleh “zoom-template”.
Bilamana kita amati secara lebih mendalam, template ini cukup memberikan kesan yang tenang dengan dominasi warna abu-abu muda dan putih serta aksen warna abu-abu tua untuk bagian navigasi drop-down nya. Cukup bagus dan cukup simple, namun template ini memiliki kelemahan yaitu masih kurang SEO Friendly. Nah, oleh karenanya dalam artikel ini (dan artikel-artikel lainnya kalau memungkinkan) kita akan khusus membahas tentang bagaimana cara membuat template NEWS-MOJO ini menjadi lebih SEO Friendly atau kalau boleh saya sebut dengan template "News Mojo SEO Friendly".
Hal pertama yang harus kita lakukan adalah merubah struktur meta-tag head dan menggantinya dengan yang baru yang tentu saja lebih SEO Friendly. Struktur meta-tag head standartnya adalah seperti tersebut di bawah ini :
<head>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>
</b:if>
<!-- Start www.bloggertipandtrick.net: Changing the Blogger Title Tag -->
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>
<!-- End www.bloggertipandtrick.net: Changing the Blogger Title Tag -->
<link href='YOUR-FAVICON-URL' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
<b:skin><
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 1Login ke Blogger
Langkah 2
Masuk ke "Setelan - Preferensi Penelusuran - Tag Meta"
Klik "Edit" pilih "Ya" pada "Aktifkan deskripsi penelusuran?"
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 EntriLangkah 1
Buat sebuah artikel
Langkah 2
Perhatikan pada sidebar editor, harus sudah bertambah satu widget "Deskripsi Penelusuran"
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 3Jika 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 != ""'>Keterangan: Mengenai conditional tag silahkan baca disini
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
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 1Lihat 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:
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?
Integrasi Widget Cumulus pada Blogger
Tidak seperti sebelumnya, Cumulus ini cukup mudah dalam pemasangannya, ikuti langkah dibawah ini:
Langkah 1Login ke Blogger
Langkah 2
Masuk ke Tata Letak
Langkah 3
Tambahkan sebuah Gadget
Pilih "Tambahkan Milik Anda"
Masukan (copy paste) link dibawah ini pada bagian URL kemudian klik "Tambah URL":
http://henscripts.googlecode.com/svn/trunk/tag/cumulus.xmlLangkah 7
Atur konfigurasi dengan menyesuaikan pada Template yang anda gunakan
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 :)
