Background
Gambar tidak bisa dipisahkan lagi dari desain web, sebab gambar merupakan salah satu elemen utama yang kini lazim digunakan sebagai bagian dari elemen pembangun layout web. Gambar bisa digunakan sebagai background, tombol navigasi, icon, dan konten web itu sendiri. Nah sebagai bagian dari konten, gambar memiliki fungsi yang sangat besar. Pengunjung dapat memahami suatu hal dan mengintepretasi sedemikian rupa melalui bantua gambar, bahkan kinipun gencar penggunaan infographic sebagai media utama sebuah konten! Akan tetapi, ada kondisi-kondisi tertentu dimana fungsi gambar tidak bisa digunakan atau ditampilkan, di antaranya:
- Orang buta atau rabun yang menggunakan screen reader untuk browsing.
- Pengguna yang mematikan fungsi penampil gambar pada browser.
- Pengguna yang hanya memiliki browser penampil teks, karena berbagai alasan.
- Pengguna yang browsernya mengalami masalah, atau sumber gambar yang tidak dapat dimuat.
- Tentu saja, crawler search engine yang tidak bisa “memahami” (baca: melihat) gambar.
Untungnya, Hypertext Markup Language (HTML) memberikan satu fitur untuk memberikan solusi kecil bagi situasi di atas. Solusi ini bukan berarti gambar kemudian bisa dilihat, tapi setidaknya dipahami melalui sebaris kata, frase, atau kalimat deskriptif sehingga setidaknya browser dapat menampilkan deskripsi tersebut dan pengunjung serta search engine dengan beberapa kondisi di atas dapat memahaminya. Ini semua tidak lain berkat penggunaan atribut alt di dalam tag gambar (image tag), seperti ini:
<img src=”http://blablabla,com/foto-monyetku.png” alt=”foto monyet lucuku” />
Ketika sebuah gambar tidak ditampilkan, maka browser akan menampilkannya sebagai sebaris teks “foto monyet lucuku“.
Atribut alt di dalam tag gambar di atas tentu menjadi faktor signifikan bagi user experience dan merupakan alat penting bagi upaya search engine optimization (SEO). Bagi user yang memiliki keterbatasan fungsional dan teknis seperti telah disebutkan, atribut alt dapat mendeskripsikan apa yang tidak bisa dilihat atau tidak ditampilkan oleh browser. Bagi search engine seperti Google, atribut alt menjadi sumber informasi crawler untuk melihat relevansi dan representasi gambar yang “ditemukannya” di dalam image tag. Sebagai contoh, jika seorang user mencari gambar dengan keyword “monyet lucu” di pencarian gambar search engine, gambar-gambar dengan deskripsi yang berkaitan dengan kata “monyet” lebih memiliki kesempatan untuk tampil di hasil pencarian. Atribut alt dapat diibaratkan sebagai “anchor text” nya gambar, dan bisa berfungsi sebagai anchor text sesungguhnya pada link di dalam gambar.
<a href=”tautweb.com/artikel-tentang-monyet/”><img src=”http:blablabla,com/foto-monyetku.png” alt=”kehebatan monyet lucuku” /></a>
Era Baru Google Image Search
Seperti yang sudah diketahui dan dibicarakan dalam beberapa hari terakhir ini, Google telah mengupdate layout dan menambahkan berbagai fitur pada Google Image Search (mesin pencari gambar Google).
Dengan adanya fitur-fitur tambahan tersebut, sederhananya, Google ingin menampilkan informasi lengkap di balik sebuah gambar: atribusi kepada halaman pemuat gambar, link menuju halaman tersebut, link menuju detil gambar yang sama Google Search, dan link menuju sumber gambar secara langsung (direct link, http://web.com/gambar.jpg).
Tentu ini adalah kesempatan terbaik bagi kita untuk menggunakan Gambar sebagai alat yang lebih ampuh lagi dalam upaya meningkatkan SEO web. Sebagai sumber traffic, gambar tidak bisa ditampilkan begitu saja tanpa memperhatikan detil yang perlu dilengkapi. Inilah tips optimasi SEO gambar dari saya.
Tips Mengoptimalkan Gambar untuk User dan SEO
1. Sebelum mengupload gambar, pastikan ubah nama file gambar agar tidak mengandung nama generik hasil generasi pembuat file gambar atau kamera. Misalnya, jika anda baru saja membuat foto dengan sebuah kamera digital, maka output file yang dihasilkan biasanya seperti ini: DSC10013.JPG. Ini tentu tidak baik, karena setelah gambar diupload, permalink gambar akan memuat nama file yang tidak dapat dipahami, sama halnya dengan url halaman web, ubah nama file agar menjadi clean permalink. Misalnya ubah menjadi pemandangan-pantai-kuta-bali.jpg.
2. Pastikan format file (ekstensi) gambar adalah format-format umum, misalnya jpg, gif, png, png, bmp, svg, dan wepb.
3. Search engine pada umumnya mengindeks gambar dengan berbagai ukuran (file size), namun upayakan file seringan mungkin agar berat loading halaman bisa diminimalisir. Sekali lagi, ini berkaitan dengan user experience dan Google telah berkali-kali menegaskan hal ini. Anda bisa mengurangi berat file dengan mengecilkan ukuran piksel, mengubah jenis file (dari gif png dll ke jpg), atau menggunakan tool kompresi gambar yang mudah ditemukan secara online.
4. Cara lain mempercepat browser dan search engine membaca kehadiran sebuah gambar adalah menspesifikan terlebih dahulu ukuran gambar tersebut, baik untuk menyatakan ukuran asli maupun resize. Dengan demikian proses load bisa diminimalkan.
<img src=”http://blablabla,com/foto-monyetku.png” alt=”foto monyet lucuku” width=”300px” height=”300px” />
Beberapa webmaster lebih senang menggunakan properti CSS untuk mengatur gambar, namun demikian properti ini tidak dapat dibaca (setidaknya dengan baik) oleh search engine. Oleh karena itu, lebih baik gunakan atribut html width dan height seperti contoh di atas untuk menyatakan ukuran gambar.
5. Jika ada teks yang memang sangat penting untuk ditampilkan baik untuk pengunjung maupun SE, lebih baik tampilkan sebagai teks sebenarnya di dalam konten, daripada memasukkannya ke dalam atribut alt.
6. Teks alt sebaiknya merupakan rangkaian kata pendek dan mengandung keyword penting, meskipun tetap harus natural. Jangan paksakan menuliskan kata-kata atau kalimat panjang ke dalam alt.
<img src=”http://blablabla,com/foto-monyetku.png” alt=”monyet” /> => benar, to the point bagi search engine
<img src=”http://blablabla,com/foto-monyetku.png” alt=”foto monyet” /> => benar, spesifikasi dengan kata “foto”
<img src=”http://blablabla,com/foto-monyetku.png” alt=”foto monyetku moni yang lucu” /> => benar, deksriptif, bagi pengunjung dan SE (natural).
<img src=”http:blablabla,com/foto-monyetku.png” alt=”foto monyetku yang sangat lucu, namanya moni, dia suka sekali tidur di kamarku” /> => tidak tepat, terlalu panjang, tidak menonjolkan inti, dan sebaiknya dinyatakan sebagai konten teks.
7. Tampilkan keyword-keyword penting tapi hindari pembanjiran keyword.
Contoh salah dan ngawur:
<img src=”http://blablabla,com/keyword-density.png” alt=”keyword density, fungsi keyword density, apa itu keyword density, dst” />
8. Jika dalam satu halaman anda menampilkan beberapa gambar dari topik yang sama, pastikan gunakan alt berbeda-beda, misalnya jenis, nomer seri, dll.
9. Jika sebuah gambar digunakan sebagai alat navigasi, misalnya button, gunakan alt text sesuai nama link (ancchor text) yang hendak anda berikan pada teks seperti biasanya, misalnya “Kontak Kami”, “Advertise”, dan seterusnya.
10. Jika logo anda menggunakan gambar, pastikan alt mengandung nama website atau nama perusahaan.
11. Jika anda ingin lebih menjelaskan atau memberikan detil dalam sebuah gambar untuk pengunjung, tanpa harus menjelaskan kepada search engine, gunakan atribut title (ini sering dirancukan dengan alt, padahal keduanya memiliki fungsi yang jelas berbeda). Atribut title akan memunculkan sebaris teks ketika user melakukan mouse over ke atas gambar.
<a href=”http://tautweb.com/contact”><img src=”http://tautweb.com/contact-us-icon.jpg” alt=”contact us” title=”klik di sini untuk menghubungi kami” />
Tentang Teks Alt Null (Kosong)
<img src=”http://tautweb.com/contact-us-icon.jpg” alt=”" />
Null, atau kosong (non informatif) pada alt gambar bisa digunakan dan memang penting apabila anda menggunakan gambar sebagai elemen yang tidak perlu diketahui pengunjung atau search engine. Misalnya gambar pemisah antara halaman konten dan sidebar, jika anda tidak membangunnya dengan menggunakan elemen CSS. Namun cara ini biasanya sudah ditinggalkan karena perkembangan dan kelebihan CSS untuk digunakan sebagai pembentuk layout web yang prosesnya tidak terbaca mata manusia dan SE. Sehingga lebih baik gunakan CSS (dalam properti background).
Kesimpulan dan Penutup
Sebagaimana perkembangan Search Engine, terutama Google, atribut alt gambar dapat menjadi elemen yang sangat penting bagi user dan SEO. Pertama, user lebih mendapatkan kemudahan untuk memahami elemen gambar yang tidak dapat ditampilkan. Kedua, elemen gambar yang memiliki deskripsi baik di dalam atribut alt dapat “mencerna” dan “memahami” gambar secara lebih sempurna, sebab inilah cara SE “membaca” sebuah gambar. Ketiga, sebagaimana telah ditekankan oleh Google, user experience adalah nomer satu. Sebagaimana selayaknya memberikan sebuah layanan web yang user-friendly, penggunaan atribut alt yang benar dan tepat akan menyempurnakan fungsi sebuah web.
wah, jadi misalnya dalam 1 artikel terdapat beberapa gambar, text dalam kode alt=”" harus berbeda-beda ya mas…. ????
Ya, jika sama, maka Google menganggapnya sebagai spam, sebab logikanya beda gambar beda deskripsi, ini juga penting untuk user yang tidak bisa melihat gambar jika gambar tidak ditampilkan.
wah saya terlanjur memakai judul artikel di setiap gambar yang ada.
seberapa bahaya-nya tuh mas kalo gitu ?
Kalo sudah terlanjur, ya kira2 mana aja yang bisa diperbaiki, sisanya ya sudahlah
Kalo menggunakan teks yang persis dengan judul, bisa jadi ada anchor text dianggap berlebihan karena punya isi sama dengan title
sudah saya perbaiki mas, tapi baru 150 artikel.
Tinggal 80 lagi, thanks mas jawabannya
yup sama-sama
terima kasih mas atas ilmu2nya saya banyak belajar dari mas
mohon kritik dan sarannya ya di blog baru saya coretandiarys.blogspot.com
Bang Azmi, bagaimana jika saya menggunakan gambar dari Getty Images untuk gambar dalam postingan blog saya ?
Apakah blog saya bisa dikategorikan termasuk melanggar hak cipta oleh Google?
Saya bingung karna saya banyak menemukan portal2 besar Indonesia mengambil gambar di Getty Images dan tidak mengambil gambar di situs resmi misalkan sport (MotoGP, Formula1 dll)
Selama gambar-gambar itu bebas lisensi, tidak masalah. Cek dulu apakah gambar yang dipake bebas lisensi, atau mesti dikasi atribusi atau tidak. Google sebenarnya tidak akan memperkarakan sebuah hak cipta gambar, selama pemilik tidak menuntut Google (atas pemuatan di hasil pencarian Google dan akhirnya Google akan melacak sumber pemakai gambar). Jadi perkirakan saja, kira-kira gambar yang akan anda pakai bermasalah atau tidak.