I'm back, sobat. Sudah sekian lama blog ini tidak diupdate dengan artikel-artikel bermanfaat. Kaprikornus sekarang saatnya saya sedikit mengembangkan hal kecil, tapi berefek besar, khususnya bagi perkembangan SEO blog sobat.
Seperti umumnya diketahui, kita bisa menyembunyikan elemen dengan sumbangan CSS, dan bahkan javascript. Tujuannya yakni biar suatu elemen tertentu, misalnya yang dinaungi oleh <div>, tidak terlihat oleh mata manusia/pengunjung.
Cara paling mudah, yang paling sering kita gunakan yakni snippet CSS khusus:
- visibility: hidden dan
- display: none
Keduanya sering digunaan bersamaan, mengingat IE versi bau tanah (versi 6, dll) hanya mengenali property visibility. Bagi browser lain, properti ini hanya menyembunyikan (tidak menampakkan) tetapi properti lainnya masih berlaku (misalnya ada margin, padding) dll, sehingga meskipun elemen tidak tampak, tapi menyisakan ruang kosong yang terlihat mengganjal. Sedangkan property display "menghapus" semua yang tampak sekaligus properti lainnya. Itulah kenapa keduanya sering berpasangan.
Mengapa tidak menggunakan JS? Satu alasan, biar search engine (Google, dll) tetap melihatnya, alasannya yakni pada dasarnya (awalnya) search engine hanya melihat markup tanpa memperhatikan dan me-render elemen lain (JS dan CSS). Oleh alasannya yakni itu, menggunakan javascript akan membuat elemen di dalamnya tidak hanya "hilang" di mata manusia, tapi sekaligus search engine.
Penggunaan snippet semacam ini lazim dalam praktek SEO, khususnya blackhat SEO, untuk melaksanakan spam.
<div class="elemen">keyword a, keyword, b, c, d, dll</div>
snippet CSS-nya:
.elemen {display: none; visibility: hidden;}
Search engine, khususnya Google, kini semakin canggih, Beberapa hal yang pernah saya temukan di antaranya yakni kemampuan untuk mengindeks dan me-render isi komentar Facebook dan membaca isi elemen javascript yang rumit. Nah, di antara kemampuan gres ini, sekarang Google sudah mempertimbangkan CSS sebagai bab dari penentuan ranking berdasarkan user experience, yaitu kemanfaatan dan fasilitas penggunaan situs dari sudut pandang pengguna. Salah satu pola dari kemampuan ini yakni Google sekarang mempertimbangkan ranking berdasarkan kemampuan web dalam menyuguhkan halamannya terhadap pengguna mobile. Istilahnya mobile friendly. Google juga bisa menjadi alat tes apakah situs mobile-friendly. Pada tes itu, engine Google bisa menilai usability sebuah situs untuk pengguna mobile, misalnya, besar kecil teks, responsivitas elemen, eksistensi situs versi mobile, javascript, dll.
Dengan kemampuan menyerupai itu, Google tentu dengan mudah mendeteksi eksistensi teks yang disembunyikan hanya untuk tujuan SEO. Di sini, tugas besar Penguin dan Panda sangat terlihat.
Tidak semua yang menggunakan snippet demikian untuk tujuan SEO. Tapi, pada prakteknya, blog/web sahabat dapat terkena imbas penurunan ranking alasannya yakni menggunakannya. Tujuannya mungkin baik, biar user tidak melihat elemen tertentu yang sebetulnya tidak ingin ditampilkan. Misalnya, sahabat pake template A dimana ada elemen yang sebetulnya tidak ingin ditampilkan tapi tidak ingin menghapus elemen itu. Maka sahabat memutuskan menggunakan CSS visibility dan display untuk menyembunyikan. Tapi, ini bisa berbahaya untuk SEO blog. Blog bisa dicap sebagai spammer.
So bagaimana cara menyembunyikan elemen dengan CSS yang tepat?
Gunakan properti position dan dorong elemen sampai ke posisi yang tidak terlihat, baik ke atas, bawah, atau samping. Dalam hal ini, gunakan value negatif paling tinggi, setinggi-tingginya.
Untuk position, pastikan posisi elemen bisa keluar dari ruang yang terlihat, yaitu dengan membuatnya tidak statis, position:absolute.
Untuk menggeser sampai ke luar jalur, eh maksudnya keluar ruang browser, gunakan nilai negatif pada top atau left atau keduanya, misalnya: top: -9999px dan left: - 9999px.
Kaprikornus kita dapat:
.elemen {position: absolute; top: -9999 px; left: -9999px;}
Sobat juga bisa menggunakannya pribadi secara inline pada elemen:
<div style="position: absolute; top: -9999px; left: -9999px">elemen yang disembunyikan</div>
Silahkan coba dan praktekkan. That's it. Semoga bermanfaat.
© copyright Ahmad Khoirul Azmi, published only for buka-rahasia.blogspot.com.
© copyright Ahmad Khoirul Azmi, published only for buka-rahasia.blogspot.com.