Menyembunyikan Elemen dengan CSS yang SEO Friendly

I'm back, sobat. Sudah sekian usang blog ini tidak diupdate dengan artikel-artikel bermanfaat. Kaprikornus kini saatnya saya sedikit membuatkan hal kecil, tapi berefek besar, khususnya bagi perkembangan SEO blog sobat.

Seperti umumnya diketahui, kita bisa menyembunyikan elemen dengan pertolongan CSS, dan bahkan javascript. Tujuannya yakni semoga suatu elemen tertentu, contohnya 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 memakai JS? Satu alasan, semoga search engine (Google, dll) tetap melihatnya, alasannya yakni intinya (awalnya) search engine hanya melihat markup tanpa memperhatikan dan me-render elemen lain (JS dan CSS). Oleh alasannya yakni itu, memakai javascript akan menciptakan 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, kini Google sudah mempertimbangkan CSS sebagai bab dari penentuan ranking menurut user experience, yaitu kemanfaatan dan fasilitas penggunaan situs dari sudut pandang pengguna. Salah satu teladan dari kemampuan ini yakni Google kini mempertimbangkan ranking menurut 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, keberadaan situs versi mobile, javascript, dll. 

Dengan kemampuan menyerupai itu, Google tentu dengan gampang mendeteksi keberadaan teks yang disembunyikan hanya untuk tujuan SEO. Di sini, tugas besar Penguin dan Panda sangat terlihat. 

Tidak semua yang memakai snippet demikian untuk tujuan SEO. Tapi, pada prakteknya, blog/web teman sanggup terkena pengaruh penurunan ranking alasannya yakni menggunakannya. Tujuannya mungkin baik, semoga user tidak melihat elemen tertentu yang sebetulnya tidak ingin ditampilkan. Misalnya, teman pake template A dimana ada elemen yang sebetulnya tidak ingin ditampilkan tapi tidak ingin menghapus elemen itu. Maka teman memutuskan memakai 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.

Tweet

Subscribe to receive free email updates: