Manfaatkan Attribut alt | title Pada Image Tag !!!

zoom in zoom out print  20 November 2008 | Tag: ,

Bagi Anda yang sudah familiar dengan HTML tentunya sudah tahu tentang image tag <img> yang digunakan untuk menampilkan gambar pada halaman web.

Image tag ini mendukung 2 attribut yang hampir sama yakni alt dan title, fungsi keduanya adalah untuk mendeskripsikan gambar yang ditampilkan.

Ternyata kedua tag ini sangat berperan penting saat menentukan image search rangking pada mesin pencari seperti Google, Yahoo, MSN, dll. Namun terkadang membingungkan kita, apakah kita menggunakan salah satu atau keduanya saat mendeskripsikan sebuah gambar ? :D

Bagaimana menggunakan attribut ini secara bijak, berikut ini tipsnya :

  • Jika Anda hanya ingin menampilkan gambar tanpa diikuti dengan link (sebagai contoh gambar diatas saya hanya menampilkan begitu saja tanpa ada link) sebaiknya Anda hanya menggunakan attribut title pada image tag-nya.

Berikut contoh source gambar diatas :

<img class=”alignleft size-full wp-image-105″ title=”4Mb” src=”http://patembe.com/wp-content/uploads/2008/11/4mb.png” alt=”" width=”131″ height=”131″ />

  • Sebaliknya jika Anda menampilkan gambar dengan disisipkan link, selain menggunakan attribut title, sebaiknya gunakan juga attribut alt, sebagai contoh gambar dibawah

logo pb08
<a href=”http://www.pestablogger.com/”><img class=”aligncenter size-full wp-image-105″ title=”I Support PB08″ src=”http://iskandarjet.kompasiana.com/files/2008/11/logo-pb08.jpg” alt=”logo pb08″ width=”125″ height=”125″ /></a>

Jika disimpulkan, sebaiknya Anda menggunakan attribut alt untuk gambar yang berisi link. :) Tips ini sebenarnya sudah dituliskan oleh Google di Google SEO Guide [.pdf].

if you do decide to use an image as a link, filling out its alt text helps Google understand more about the page you’re linking to.

Saya sendiri sudah mengaplikasikannya pada blog ini, bagaimana dengan Anda ? :)

- via labnol.org

Berikan komentar | Tautan balik | Lintas beritakan! | Bookmark and share

Tulisan lain yang mungkin berkaitan:

  1. Menonaktifkan Image Thumbnail pada Blog WordPress
  2. Google Maps Image Viewer - Gambar Anda Dengan Google Maps
  3. Mengganti Favicon Blogger ???
  4. Menggunakan Windows Live Writer Untuk Postingan pada Blog
  5. Mempercepat WordPress Dengan Google Gears
  1. hatta16 www.hatta16.wordpress.com
    20 November 2008, pada 21:30
    Balas | Kutip | #1

    Bagus tawwa…..blog ta’

    kunjungan balik salam bloger…..

    makassar bisa tonji

  2. dani daniiswara.net/
    27 April 2009, pada 16:35
    Balas | Kutip | #2

    IMO, dari best practices aksesibilitas W3C (seperti di review bhinneka dot com; maaf, saya bukan fans-nya facebook :) )

    jika gambar hanya dekoratif, cukup pake atribut alt=”[dikosongin]” (screen reader akan mengerti hal ini, bahwa gambar hanya dekoratif saja..).

    jika gambar sbg link, boleh pake atribut alt=”deskripsi-1″ di gambar, dan atribut title=”deskripsi-2″ di link.
    kedua atribut sebaiknya jangan sama persis, karena akan terdengar aneh bagi screen readers,

    mis. jika deskripsinya sama antara title, alt, dan anchor text, maka akan terbaca oleh screen reader (termasuk oleh iTunes, iPod yg punya spoken menus): patembe dot com patembe dot com patembe dot com. :)

    jadi atribut alt dan title, keduanya bisa dibaca oleh screen reader (bukan setelan default utk membaca kedua atribut), bisa juga tidak, tergantung setelan screen reader oleh penggunanya..bahkan ada screen reader lawas yg tidak bisa membaca kedua atribut.

    jd atribut alt dan title itu terkait aksesibilitas…
    jika SEO-nya, sptnya cuman alt saja,..coba cari di google kata (ada di salah satu atribut title) “view all post” di tulisan ini: view all post site:patembe dot com/2008/11/20/manfaatkan-attribut-alt-title-pada-image-tag/ :)

    saya pernah nulisnya di daniiswara dot net/2009/01/17/atribut-title-terkait-aksesibilitas-dan-seo/ :)

    o i a, form komen di blog itu lupa buka krn koneksi yg lelet abid ngedit..skrg dah saya buka kok..makasi mas Andi.. :)

  3. dani daniiswara.net/
    27 April 2009, pada 16:39
    Balas | Kutip | #3

    suer..td saya dah pake enter-spasi ngetiknya biar ngga mepet gitu :) mesti pake tag &l;tp> manual ya..

    coba saya tes ya..bole diapus nanti..
    <p>ini memang pake tag <p> (sengaja saya munculin). ini first paragraph. ini first paragraph. ini first paragraph. ini first paragraph.</p>

    ini paragraf kedua. ini paragraf kedua. ini paragraf kedua. ini paragraf kedua. ini paragraf kedua. ini paragraf kedua.

    let’s see… :)

  4. zam.web.id zam.web.id
    27 Mei 2009, pada 21:10
    Balas | Kutip | #4

    kebetulan atribut alt=”" mutlak diperlukan pada tag img
    untuk validisasi W3C standart

   
ATAS