Latest News

Menyembunyikan Elemen dengan CSS yang SEO Friendly



I'm back, sobat. Sudah sekian lama blog ini tidak diupdate dengan artikel-artikel bermanfaat. Makara sekarang saatnya saya sedikit menyebarkan hal kecil, tapi berefek besar, khususnya bagi perkembangan SEO blog sobat.

Seperti umumnya diketahui, kita bisa menyembunyikan elemen dengan dukungan CSS, dan bahkan javascript. Tujuannya yakni semoga 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 renta (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, semoga 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 ibarat 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 teman dapat terkena imbas penurunan ranking alasannya yakni menggunakannya. Tujuannya mungkin baik, semoga user tidak melihat elemen tertentu yang bahwasanya tidak ingin ditampilkan. Misalnya, teman pake template A dimana ada elemen yang bahwasanya tidak ingin ditampilkan tapi tidak ingin menghapus elemen itu. Maka teman 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.

Makara kita dapat:
.elemen {position: absolute; top: -9999 px; left: -9999px;}
Sobat juga bisa menggunakannya eksklusif 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.

0 Response to "Menyembunyikan Elemen dengan CSS yang SEO Friendly"