Menyembunyikan Komponen Dengan Css Yang Seo Friendly

I'm back, sobat. Sudah sekian usang blog ini tidak diupdate dengan artikel-artikel bermanfaat. Makara kini saatnya saya sedikit membuatkan hal kecil, tetapi memiliki efek besar, utamanya bagi pertumbuhan SEO blog sobat.

Seperti biasanya diketahui, kita bisa menyembunyikan unsur dengan derma CSS, dan bahkan javascript. Tujuannya yakni agar suatu unsur tertentu, misalnya yang dinaungi oleh <div>, tidak terlihat oleh mata manusia/pengunjung.

Cara paling mudah, yang paling kerap kita gunakan yakni snippet CSS khusus:

visibility: hidden dan
display: none

Keduanya sering digunaan bersamaan, mengingat IE model renta (versi 6, dll) cuma mengerti property visibility. Bagi browser lain, properti ini cuma menyembunyikan (tidak menampakkan) namun properti yang lain masih berlaku (misalnya ada margin, padding) dll, sehingga walaupun unsur tidak tampak, tetapi menyisihkan ruang kosong yang terlihat mengganjal. Sedangkan property display "menghapus" semua yang terlihat sekaligus properti lainnya. Itulah kenapa keduanya sering berpasangan.

Mengapa tidak memakai JS? Satu alasan, agar search engine (Google, dll) tetap melihatnya, alasannya intinya (awalnya) search engine cuma menyaksikan markup tanpa memperhatikan dan me-render unsur lain (JS dan CSS). Oleh alasannya itu, memakai javascript akan menghasilkan unsur di dalamnya tidak cuma "hilang" di mata manusia, tetapi sekaligus search engine.

Penggunaan snippet seperti ini lazim dalam praktek SEO, utamanya blackhat SEO, untuk menjalankan spam.

<div class="elemen">keyword a, keyword, b, c, d, dll</div>

snippet CSS-nya:

.elemen {display: none; visibility: hidden;}

Search engine, utamanya Google, kini kian canggih, Beberapa hal yang pernah saya dapatkan di antaranya yakni kesanggupan untuk mengindeks dan me-render isi komentar Facebook dan membaca isi unsur javascript yang rumit. Nah, di antara kesanggupan gres ini, kini Google telah memikirkan CSS selaku bab dari penentuan ranking menurut user experience, yakni kemanfaatan dan fasilitas penggunaan situs dari sudut pandang pengguna. Salah satu pola dari kesanggupan ini yakni Google kini memikirkan ranking menurut kesanggupan web dalam menghidangkan halamannya kepada pengguna mobile. Istilahnya mobile friendly. Google juga dapat menjadi alat tes apakah situs mobile-friendly. Pada tes itu, engine Google bisa menganggap usability suatu situs untuk pengguna mobile, misalnya, besar kecil teks, responsivitas elemen, eksistensi situs model mobile, javascript, dll.

Dengan kesanggupan menyerupai itu, Google tentu dengan gampang mendeteksi eksistensi teks yang disembunyikan cuma untuk tujuan SEO. Di sini, pekerjaan besar Penguin dan Panda sungguh terlihat.

Tidak semua yang memakai snippet demikian untuk tujuan SEO. Tapi, pada prakteknya, blog/web kawan sanggup terkena pengaruh penurunan ranking alasannya menggunakannya. Tujuannya mungkin baik, agar user tidak menyaksikan unsur tertentu yang bekerjsama tak mau ditampilkan. Misalnya, kawan pake template A dimana ada unsur yang bekerjsama tak mau ditampilkan tetapi tak mau meniadakan unsur itu. Maka kawan tentukan memakai CSS visibility dan display untuk menyembunyikan. Tapi, ini bisa berbahaya untuk SEO blog. Blog bisa dicap selaku spammer.

So bagaimana cara menyembunyikan unsur dengan CSS yang tepat?

Gunakan properti position dan dorong unsur sampai ke posisi yang tidak terlihat, baik ke atas, bawah, atau samping. Dalam hal ini, gunakan value negatif paling tinggi, setinggi-tingginya.

Untuk position, tentukan posisi unsur bisa keluar dari ruang yang terlihat, yakni dengan menjadikannya tidak statis, position:absolute.

Untuk memindah sampai ke luar jalur, eh tujuannya keluar ruang browser, gunakan nilai negatif pada top atau left atau keduanya, misalnya: top: -9999px dan left: - 9999px.

Makara kita dapat: