Header Gambar atau teks H1

SEO sangat dibutuhkan oleh sebuah situs untuk membuat situs bersangkutan dikenali dg baik oleh search engine. Namun apa jadinya kalau kebetulan dalam membuat web, kita tidak ingin menggunakan teks di bagian header web. Selalu ada solusinya kalau kita menggunakan trik css

Alasan tidak ingin menggunakan teks di bagian header biasanya : Memperburuk tampilan web; karena teks akan membuat web terkesan kaku dengan bentuknya yang flat. Kalaupun ada teks yang bentuknya bagus, belum tentu komputer visitor kita memiliki font tersebut.

Sebenarnya sih tidak ada masalah dengan menggunakan gambar sebagai pengganti teks di bagian header kalau kita tidak mementingkan optimisasi web. Bahkan secara estetika web kelihatan jadi lebih indah. Namun ada kendala yang sebenarnya sangat fatal. Yakni, kita akan kesulitan untuk mengoptimisasi situs tersebut.

Solusi :


1. Menggunakan alt tags
2. Menggunakan trik CSS

Kelemahan :
1. Dengan menggunakan alt tags, kita bisa “menyembunyikan” teks. Kadang2 juga dimanfaatkan untuk spamming keyword. Namun, kalau menurut saya alt tags di bagian header tidak berfungsi maksimal untuk meningkatkan peringkat situs kita karena kita tdk mungkin utk memanfaatkan H1 disana.
2. Dengan menggunakan trik CSS kita bisa mengatur posisi teks tersebut yakni dengan memanfaatkan fungsi text-indent dan tetap memasang H1 di bagian header web.

Contoh Trik CSS 1
file html :

Seminyak Villas

file css :
#header h1{margin-top:10px;margin-left: 0px;background: url(images/seminyak_villas_teks.png) no-repeat;float: left;text-indent: -9999px; }

Dengan trik css yang pertama ini si text-indent: -9999px pada css akan “menendang” teks seminyak villas yang telah menggunakan H1 keluar dr web. Namun robot search engine akan tetap melihat kalau di situs tersebut terdapat teks H1 sebagai header web. Dengan teks ini pula kita bisa mengejar keyword utama yang kita inginkan untuk dioptimasi.

Namun trik tersebut kelemahannya terletak pada saat fungsi menampilkan gambar pada browser kita matikan. Menurut saya tekhnik kurang human friendly, meskipun syarat utk optimisasi sudah dipenuhi.

Solusi berikutnya :
Agar lebih human friendly namun tdk melupakan fungsi optimisasi untuk search engine saya menampilkan kedua-duanya (teks dan gambar). Hasilnya bisa dilihat pada situs Seminyak Villas yang baru saja di launching. Padahal pada awalnya, saya tidak ingin menampilkan teks H1 tersebut. Namun dengan pertimbangan tadi, akhirnya saya menampilkan keduanya.

Dalam tekhnik css yg digunakan di situs tersebut meskipun image di disable pada browser, pengunjung masih bisa mengetahui konten utama situs tersebut, yakni tentang Villas in Seminyak. Dan saya pun bisa menambahkan konten teks di alt tags image logo tersebut. :D

Dan agar lebih bagus lagi (menurut saya), saya memposisikan element H1 tersebut diatas atau lebih awal dr gambar, diharapkan robot crawler searh engine membacanya lebih awal.

Berikut Contoh Trik CSS 2 :
file html :

Seminyak Villas

file css :
.header_index { height: 109px; width:870px; background-image:url(../images/head_index.png); background-repeat: no-repeat;}
.judul-head h1 { padding: 5px; font-size: 22px; float:right;margin-top: 50px;margin-right: 5px; width:280px;text-align:center;}
.teks-gambar-header {float: left;margin:0 0 0 10px; width: 339px; height:73px; margin-top:25px; margin-right:10px;}

Semoga bermanfaat

Artikel Terkait