Menyembunyikan Elemen dengan CSS yang SEO Friendly

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

Seperti umumnya diketahui, kita bisa menyembunyikan elemen dengan bantuan CSS, dan bahkan javascript. Tujuannya adalah agar suatu elemen tertentu, misalnya yang dinaungi oleh <div>, tidak terlihat oleh mata manusia/pengunjung.

Cara paling mudah, yang paling sering kita gunakan adalah snippet CSS khusus:

visibility: hidden dan

display: none

Keduanya sering digunaan bersamaan, mengingat IE versi tua (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, agar search engine (Google, dll) tetap melihatnya, karena pada dasarnya (awalnya) search engine hanya melihat markup tanpa memperhatikan dan me-render elemen lain (JS dan CSS). Oleh karena 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 melakukan 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 adalah kemampuan untuk mengindeks dan me-render isi komentar Facebook dan membaca isi elemen javascript yang rumit. Nah, di antara kemampuan baru ini, sekarang Google sudah mempertimbangkan CSS sebagai bagian dari penentuan ranking berdasarkan user experience, yaitu kemanfaatan dan kemudahan penggunaan situs dari sudut pandang pengguna. Salah satu contoh dari kemampuan ini adalah 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 mampu menilai usability sebuah situs untuk pengguna mobile, misalnya, besar kecil teks, responsivitas elemen, keberadaan situs versi mobile, javascript, dll.

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

Tidak semua yang menggunakan snippet demikian untuk tujuan SEO. Tapi, pada prakteknya, blog/web sobat dapat terkena imbas penurunan ranking karena menggunakannya. Tujuannya mungkin baik, agar user tidak melihat elemen tertentu yang sebenarnya tidak ingin ditampilkan. Misalnya, sobat pake template A dimana ada elemen yang sebenarnya tidak ingin ditampilkan tapi tidak ingin menghapus elemen itu. Maka sobat 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 hingga 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 hingga ke luar jalur, eh maksudnya keluar ruang browser, gunakan nilai negatif pada top atau left atau keduanya, misalnya: top: -9999px dan left: - 9999px.

Jadi kita dapat:

.elemen {position: absolute; top: -9999 px; left: -9999px;}

Sobat juga bisa menggunakannya langsung 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.