SEO pada Image sebuah Website yang baik

seo-image-website"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 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 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 sebaiknya menyediakan teks alternatif. 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

    Penyimpanan image ini dimaksudkan 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) :D :D

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

SEO pada Image sebuah Website yang baik

Published on : Nov 08, 2009. Last modified at : Sep 19, 2010.


Click to share on twitter , digg it, or save this article to del.icio.us.

article Navigation

Related to “SEO pada Image sebuah Website yang baik”.

5 Opinion for “SEO pada Image sebuah Website yang baik”.

Sedikit tambahan, kangmas:
Atribut height dan width pada tag img katanya membantu kecepatan loading juga.

Pemakaian atribut alt dan title pada tag img sering duplikasi. :)

Setau saya Google juga sudah mempertimbangkan nama file sebagai keyword, jadi atribut alt kosong juga gak begitu masalah asal nama filenya relevan.

Saya setuju dengan Mas Fandy (fanari), bahwa nama berkas diperhitungkan oleh mesin telusur Internet. Lebih spesifiknya, dalam bahasa awam saya, jika nama berkas terdiri dari dua kata, maka kata kunci pada kata pertama lebih berbobot dibanding kata kedua. Seperti pada post title. CMIIW

Tambahan lagi, atribut alt untuk gambar dekoratif, dibiarkan kosong (alt=""). Jika gambar/tabel/grafik sudah dideskripsikan/dinarasikan di konten, maka alt menjadi sekadar formalitas/boleh tidak terlalu deskriptif. Agar tidak menjadi duplikasi informasi. :)

Rayimas Dokter
Terima kasih sudah mengingatkan kembali.

Terlupanya menulis materi atribut height dan width pada posting ini, karena tercampurnya materi pembelajaran saya tentang HTML sebagai format antar muka dan CSS sebagai pelengkapnya (tema dhea-beta v.5.3 juga masih kebingungan antara menempatkan image sebagai format background pada CSS ataukah format image pada HTML <img> tag).
Ditambah lagi WordPress dengan segala kemudahannya, membuat beberapa penggunanya menjadi semakin malas (“mungkin”, tetapi saya sendiri sampai saat ini memang benar) untuk menuliskan secara manual ketika akan meng-embed sebuah image ke dalam sebuah posting.
Tetapi saya yakin, rekan-rekan yang peduli dengan hal ini pasti akan memperhitungkan terlebih dahulu dimensi dan ukuran gambar yang akan di-embed ke dalam sebuah halaman untuk tujuan estetika.

Tentang penambahan kecepatan loading sebuah halaman yang mengikutsertakan atribut “width” dan “height” didalam sebuah atau beberapa image bukan “katanya” lagi, dengan catatan image tersebut tidak diberlakukan dengan script-script tambahan, yang membuat kecepatan tersebut kembali menjadi sangat relatif dan kondisional, karena penanganan scripting yang “client side”.

Belajar tentang duplikasi atribut alt dan title.
Entah sampai kapan orientasi Google SEO dan Google SERPs akan di jadikan sebuah acuan diatas bumi ini. Tetapi jika melihat fakta bahwa sampai saat ini hal tersebut ternyata “masih”, termasuk Google SERPs pada pemodelan gambar. maka menurut saya pemenang-pemenang semua perlombaan ini sepertinya rekan-rekan yang juga bisa memanfaatkan kedua atribut alt dan title tersebut secara bijaksana dan maksimal (mungkin salah-satu triknya adalah menghindari duplikasi tersebut)

Maaf lho ya, tidak bermaksud membantah atau yang lain. Sekali lagi ini juga hanya sebuah opini pribadi.

Mas Fandy
Saya hampir akan menuliskan opini seperti yang mas sampaikan. Tetapi akhirnya saya lebih suka beropini pada sebuah materi dan hasil pembelajaran yang benar dan baku saja dulu. Takut dibilang ngajari yang nggak bener,.. repot. :) :)

Rayimas Dokter dan Mas Fandy
Mudah-mudahan bisa menjadi seperti kalian berdua.
Thanks for both of you.

[…] konteks dan tujuan yang berbeda, blog ini pernah menyinggung atribut alt pada tulisan berjudul image yang baik pada sebuah halaman web. Sementara, pembelajaran ini tidak bermaksud lagi menghubungkannya dengan […]

Leave an Opinion

Important : LOW isn't intended to on topic opinions, just be polite. You may use strict markup only. Opinions failing these requirement will be edited. Spam opinion won't get published.
Please, enter your real name and your valid email address (in required field). Don't worry, i'll kept your email private.










Random Learning