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.

© copyright Ahmad Khoirul Azmi, published only for buka-rahasia.blogspot.com.

Menyembunyikan Elemen dengan CSS yang SEO Friendly
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 10 Comment(s):

Abu Zaini said...

Sangat membantu neh buat yang mendalami SEO

Ahmad Khoirul Azmi said...

Benar sekali sob, faktanya sekarang CSS sebuah web bisa diakses (dibaca dan dipelajari Google) dan berpengaruh pada SEO

Akang sam said...

thanks for your sharing mr

Ahmad Khoirul Azmi said...

you're welcome. bro

Hary Wardiansyah said...

dapat ilmu baru tentang SEO, trim tips nya mas , ,

Bang Ringo said...

Wah azmi is back,hehehehe.
Terkait dengan topik,ane engga bisa koment gan,kurang paham tentang SEO,tapi tau itu bagian penunjang kemajuan situs,web dan blog,nanti dipelajari di Buka Rahasia + Taut Web aja kalau uda punya situs,web dan blog yang khusus untuk income utama,thanks ya mas Azmi.

Ahmad Khoirul Azmi said...

Halo bang. Iya nih, sepertinya ranah saya sebaiknya di sharing artikel saja daripada di offline. Haha

bener sekali, karena kaitannya dengan usability. Thanks sudah mampir ya.

Laek Ringo Star said...

Belum pernah sekalipun saya tinggalin blog-blog mas azmi sekalipun jarang update, bukan lebay ini ciyusss mas, hahahahaha, tempat dimana awal saya mengenal blog dan optimasinya, saya pikir bukan itu aja, tatanan dan gaya bahasa penulisan + penyampaian yang baik juga saya pikir saya temukan disini, sekarang saya udah bisa seperti vikinisasi, hahahaha. Mas Khoirul Azmi layak dapat award di SCTV ni mas, sebagai blogger terfavorite di indonesia, eett jangan salah, saya pernah dengan nama mas Azmi disebut jadi favorite IM indonesia terbaik di salah satu TV swasta, sebut saja Jak-TV. terserah mas Azmi mau percaya apa engga, semoga jadi termotivasi lagi nyoret2 di blog y mas, good luck.

Ahmad Khoirul Azmi said...

Wah, luar biasa. Saya apreciate banget and ngucapin banyak terima kasih untuk kebaikan sobat. Semoga nanti saya bisa lebih termotivasi lagi untuk terus berbagi. Thanks banyak sobat. Layak masuk testi nih. Hehe. Sukses juga buat blog-nya ya.

Bung Frangki said...

wah teknik bagus nih, ijin coba bung :D

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap