Relevansi Atribut Alt Gambar bagi SEO dan Pengunjung

Gambar tidak bisa dipisahkan lagi dari desain web, sebab gambar merupakan salah satu elemen utama yang kini lazim digunakan sebagai bagian d...

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:
Tips SEO

  • 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=blablabla.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://blablabla.com/contact><img src=http://blablabla.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.

COMMENTS

Name

Aceh,23,Adsense,8,BBM,3,Biography,1,Bitcoin,4,Blog,21,Blogger,12,Blogging,55,Business,14,Cerita,3,CPNS,1,Delicious,1,Design,1,DeviantART,1,Digg,1,Dollar,3,Dunia,13,Facebook,5,Flickr,1,Friendster,1,Gambar,2,Game,34,Gmail,1,Google+,4,Hosting,1,Inspirasi,2,Instagram,1,Internet,13,Interview,11,Kesehatan,2,LinkedIn,1,Makalah,7,Marketing,12,Meme,8,Money,3,Motivasi,2,MySpace,1,Outlook,1,Path,1,Pendidikan,10,Pengetahuan,4,Pinterest,1,Plugin,5,PNS,1,Reddit,1,Review,4,Seo,53,Smartphone,5,Social Media,38,Sukses,3,Sumatera Barat,16,Sumatera Utara,3,Templates,1,Tips,6,Toko Online,3,Top10,18,Tumblr,1,Tutorial,29,Tutorial Blog,146,Twitter,3,Umum,9,Vimeo,1,VK,1,Weebly,1,WhatsApp,1,Widget,55,Wisata,4,WordPress,14,Yahoo,1,Youtube,3,
ltr
item
Mas Da Bang: Relevansi Atribut Alt Gambar bagi SEO dan Pengunjung
Relevansi Atribut Alt Gambar bagi SEO dan Pengunjung
https://1.bp.blogspot.com/-fBrPWLdikZs/WkpgNHtzqwI/AAAAAAAANf8/HW8cNGXgmKAm5kIbnl29yB7uIpWoeSjBwCLcBGAs/s1600/SEO-Tips-Trick.png
https://1.bp.blogspot.com/-fBrPWLdikZs/WkpgNHtzqwI/AAAAAAAANf8/HW8cNGXgmKAm5kIbnl29yB7uIpWoeSjBwCLcBGAs/s72-c/SEO-Tips-Trick.png
Mas Da Bang
https://blog.itapuih.com/2018/09/relevansi-atribut-alt-gambar-bagi-seo.html
https://blog.itapuih.com/
https://blog.itapuih.com/
https://blog.itapuih.com/2018/09/relevansi-atribut-alt-gambar-bagi-seo.html
true
2732475762120586724
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy