Side22Press

“Gambar bisa mewakili ribuan kata“. Begitulah pepatah yang umum digunakan untuk memulai pelajaran tentang gambar (selanjutnya : ditulis dengan image) pada halaman HTML. Setelah melakukan sedikit survey kecil-kecilan di lingkungan terdekat pada satu bulan pertama blog ini diluncurkan, adalah sebuah fakta bahwa Image pada sebuah halaman mempunyai pengaruh yang cukup besar bagi pengunjung. Maka tidak mustahil ketika Google juga memasukkan materi tentang image pada panduan Search Engine Optimization miliknya.

Definisi tag <img> dan Penggunaannya

Sebelum mengulas materi image yang baik pada halaman HTML untuk keperluan Search Engine (baca: Google SEO), Sehubungan dengan mulai di”uji-cobakan”nya format HTML 5, tidak ada salahnya mengenal sedikit lebih dalam tentang materi image menurut World Wide Web Consortium W3C.

W3C menerangkan bahwa secara teknis, sebuah image tidak dimasukkan ke dalam halaman HTML (Hmm,.. namanya saja HyperText Mark-Up Language ?!?). Sebuah image hanya sekedar di tautkan saja pada sebuah halaman dengan menggunakan tag <img>. Atau dengan kata lain, tag <img> digunakan untuk meng-embed (penjelasan pada format X(HT)ML) dan atau men-definisikan (penjelasan pada format HTML 5) sebuah image kedalam sebuah halaman HTML.

Sehubungan dengan tugas-tugas tersebut diatas, maka tag <img> minimal memerlukan dua buah atribut utama yaitu :

1. atribut “src”
   Atribut ini bertugas untuk menentukan letak / sumber image yang akan di embed. Pada saat sebuah halaman di load, pada saat itu pula browser akan mencari image dari sumber yang ditentukan pada atribut “src” untuk di tampilkan. Sehubungan dengan hal tersebut sebaiknya :
   1. Image yang ditentukan benar-benar ada, untuk mencegah adanya broken link icon.
   2. Untuk kepentingan accessibility, agar image dapat di load dengan cepat, maka sebaiknya image disimpan pada web server yang sama dengan halaman yang akan menampilkannya. (delay yang terlalu lama pada saat browser me-load sebuah image juga akan menyebabkan timbulnya broken link icon)
2. atribut “alt”
   1. Atribut ini bertugas memberikan teks alternatif apabila image yang akan di embed gagal diload pada browser. Kegagalan ini bisa terjadi karena :
      • Sumber yang di tentukan pada atribut “src” tidak ditemukan.
      • Beberapa expert user sengaja men-disable tampilan image, karena hanya ingin membaca informasi dalam sebuah konten pada sebuah halaman.
   2. atribut “alt”, tidak ditujukan dan tidak dimaksudkan untuk event mouse-over teks, karena ada atribut lain yang khusus diperuntukkan untuk tugas dimaksud yaitu atribut “title”.

Selain dua atribut baku tersebut, tag <img> dapat diikuti beberapa atribut standar, atribut event (mouse events, media events), dan atribut opsional dengan memperhatikan catatan sebagai berikut :

1. Pada halaman dengan format DTD strict, atribut opsional seperti “align“, “border“, “hspace“, “vspace“, sudah tidak disarankan dipergunakan.
2. Pada format HTML 5, W3C menambahkan sekitar 22 atribut baru pada atribut media events.

Berikut adalah contoh penulisan tag <img> pada sebuah halaman.

<img src="file-image" alt="teks-alternatif" />

Atau membiasakan diri belajar menuliskan tag <img> seperti dibawah ini akan lebih baik.

<img src="file-image" alt="teks-alternatif" title="hover-text" />

Rasanya belajar mengingat kembali materi image pada sebuah HTML cukup sekian dulu.

Materi tentang optimasi image dari Google.

Image dapat menjadi komponen langsung sebuah website, site, weblog, tapi penggunaannya dapat dioptimalkan. Setiap image sebaiknya memiliki nama yang berbeda dan atribut “alt”, dua hal tersebut yang harus di manfaatkan. Atribut “alt” dapat digunakan untuk menentukan teks alternatif untuk sebuah image, hal ini bermanfaat jika image tersebut tidak dapat ditampilkan untuk alasan tertentu.

Mengapa harus menggunakan atribut “alt” ? Jika pengunjung melihat sebuah website dengan menggunakan browser yang tidak mendukung tampilan sebuah image, atau pengunjung dimaksud menggunakan teknologi lain, seperti pembaca layar, maka isi dari atribut “alt” yang akan menyediakan informasi tentang image yang digunakan.

Alasan lainnya penggunaan atribut “alt” adalah jika sebuah image difungsikan sebagai sebuah link / tautan. Maka teks alternatif yang ditetapkan dengan atribut “alt” pada sebuah image akan diperlakukan sama seperti Anchor Text pada Text Link. Dengan catatan bahwa Google tetap tidak menyarankan penggunaan image yang terlalu berlebihan jika tujuan penggunaanya hanya untuk sebuah navigasi website, sementara navigasi dengan teks sudah cukup mewakili. Terakhir, optimasi pada nama image dan teks alt akan membuat Google lebih mudah memahami sebuah gambar berhubungan dengan proyek penelusuran gambar seperti Penelusuran Gambar Google.

Belajar optimasi Image menurut Google SEO

1. Nama file dan teks alt harus singkat, tapi deskriptif
   Seperti halnya bagian-bagian lain sebuah halaman yang perlu di optimalkan, nama file image dan teks alternatif yang digunakan juga harus pendek tapi deskriptif, dengan menghindari hal sebagai berikut :
   • Penggunaan nama file yang umum seperti “gambar1.jpg”, “gbr1.gif” (meskipun beberapa situs dengan ribuan gambar mungkin akan mempertimbangkan penamaan secara otomatis)
   • Membuat nama file yang terlalu panjang
   • Memasukkan kata kunci sebagai teks alternatif atau menggunakan seluruh kalimat pada konten kedalam atribut “alt”.
2. Menyediakan teks alt, Pada saat menggunakan image sebagai sebuah link.
   Jika sebuah image lebih difokuskan sebagai sebuah link, maka teks alternatif akan membantu Google lebih memahami tentang halaman yang di tautkan. Untuk bahasan ini, sebaiknya membaca kembali materi Anchor Text. dan berikut adalah hal-hal yang perlu di hindari:
   • Menulis teks alt yang terlalu panjang yang dapat dianggap sebagai spam
   • Membuat navigasi website dengan hanya menggunakan tautan gambar saja
3. Image sebaiknya disimpan pada direktori khusus
   Untuk mempermudah jalur ke gambar, maka penyimpanan image didalam sebuah direktori tersendiri akan lebih powerful dibandingkan jika gambar-gambar tersebut disimpan tersebar di beberapa direktori dan subdirektori di sepanjang domain yang dimiliki.
4. Tipe file Gambar itu penting
   Format gambar yang didukung oleh kebanyakan browser adalah format dengan ekstensi file JPEG, GIF, PNG, dan BMP.
   Maka ketika membuat sebuah gambar, sebaiknya memperhatikan ukuran dan ekstensi file seperti tersebut diatas.

Get the point ?!?

Apabila membaca kembali sebuah quote yang menarik pada tulisan pentingnya sebuah validasi W3C, maka fakta itu kembali muncul pada pembelajaran tentang image pada sebuah website. Bandingkan butir 2, Sub-judul “Belajar optimasi Image menurut Google SEO” diatas, dengan salah satu error report permintaan validasi W3C, yang pernah saya terima seperti berikut “Line XX, Column YY: required attribute “alt” not specified“.

Mempelajari dengan seksama Google SEO Guidelines, sedikit banyak akan merubah sebuah halaman menjadi valid sesuai petunjuk W3C. Bagaimana jika kita gunakan metode terbalik ? Wowww,… sekali merengkuh dayung 2 pulau terlampaui (pulau ke-3 nya ? tinggal pilih, diatas meja komputer, atau diatas keyboard)

Semoga bermanfaat, dan..
Salam valid W3C, Untuk rekan-rekan yang mempunyai opini sama.