Alt Text Gambar Blogger: Bedakan Deskripsi, Caption, dan Link Gambar

Alt text gambar Blogger sebaiknya menjelaskan informasi atau fungsi gambar dalam konteks artikel. Caption melayani kebutuhan yang berbeda: keterangan yang terlihat, seperti konteks, sumber, atau penjelasan ilustrasi. Menyalin judul artikel ke semua gambar membuat perbedaan ini hilang. Sebelum mengisi atribut, tentukan dahulu apa yang akan kehilangan makna jika gambar tidak terlihat.

Panduan ini membantu Anda mengambil keputusan untuk gambar informatif, dekoratif, dan gambar yang menjadi tautan. Contohnya bersifat hipotetis, bukan tangkapan layar antarmuka atau hasil audit sebuah template. Persiapan berkas dibahas terpisah dalam panduan optimasi gambar Blogger; di sini fokusnya adalah makna yang disampaikan kepada pembaca.

Mulai dari alasan gambar dimasukkan

Bayangkan Anda menyunting tutorial penyusunan kanal berita. Ada gambar susunan kartu artikel, foto meja kerja, dan diagram hubungan kanal. Ketiganya tidak otomatis memerlukan pola alt yang sama. Catat satu alasan untuk masing-masing: menunjukkan susunan kartu, membangun suasana, atau menerangkan hubungan. Catatan sederhana ini membantu memisahkan informasi penting dari hiasan.

Menurut panduan gambar informatif W3C, alternatif teks menyampaikan makna gambar, bukan selalu seluruh detail visualnya. Untuk contoh susunan kartu hipotetis, alt seperti “Satu berita utama di kiri dan empat kartu berita pendamping di kanan” lebih berguna daripada “gambar template bagus”. Gunakan deskripsi tersebut hanya bila susunannya memang demikian.

Jangan menambahkan hasil yang tidak dapat dibuktikan gambar. Tampilan kartu tidak menunjukkan kecepatan, kualitas kode, atau kemudahan indeks. Foto ilustrasi juga tidak membuktikan kejadian nyata. Untuk diagram rumit, tuliskan hubungan atau penjelasan lengkap dalam isi artikel; jangan memadatkan seluruh pembahasan menjadi satu atribut panjang. Pembaca perlu mendapat jawaban tanpa harus menafsirkan diagram sendirian.

Alt, caption, dan judul gambar memiliki pekerjaan berbeda

Alt berada pada atribut alt milik elemen img. Caption adalah keterangan yang tampil bersama gambar. Dalam HTML, elemen figcaption memberi keterangan untuk isi figure. Mengisi caption tidak dengan sendirinya membuat atribut alt terisi.

Untuk ilustrasi susunan kartu tadi, alt dapat menerangkan posisi kartu, sedangkan caption menjelaskan “Ilustrasi susunan berita, bukan tampilan produk tertentu”. Keduanya saling melengkapi. Jangan memindahkan kredit sumber hanya ke alt karena pembaca yang melihat halaman juga perlu menemukannya. Jika caption sudah menjelaskan informasi visual secara lengkap, pertimbangkan konteks keseluruhan agar pembaca layar tidak menerima pengulangan yang tidak perlu.

Kolom judul gambar atau atribut title juga bukan pengganti alt. Saat memeriksa HTML, cari atribut yang benar-benar tersimpan pada gambar tersebut. Dua kolom dengan teks sama belum membuktikan keduanya menjalankan fungsi yang sama. Mulailah dari kebutuhan pembaca, kemudian tentukan tempat penjelasannya.

Kapan alt kosong tepat, dan kapan perlu diisi?

W3C menjelaskan gambar dekoratif dapat memakai alt="" agar tidak menambah bacaan yang tidak diperlukan. Nilai kosong berbeda dari atribut yang tidak ada. Namun, jangan menjadikan semua gambar dekoratif hanya karena Anda ingin mempercepat pengisian metadata.

Foto meja kerja yang semata-mata menghias tutorial mungkin tidak menambah informasi. Sebaliknya, gambar yang menunjukkan posisi sebuah pengaturan memuat petunjuk yang dibutuhkan pembaca. Ujilah dengan mengabaikan gambar sesaat: apakah pembaca masih memperoleh seluruh informasi dan dapat menyelesaikan langkahnya? Keputusan ditentukan oleh pemakaian gambar pada halaman, bukan nama berkas atau jenis formatnya.

Periksa khusus gambar yang bisa diklik. Bila gambar adalah satu-satunya isi tautan menuju panduan tertentu, alternatif teks perlu menjelaskan tujuannya. Contoh editorialnya adalah “Baca panduan penyusunan kanal berita”, bukan sekadar “ikon buku”. Jika dalam tautan yang sama sudah ada teks tujuan yang lengkap, gambar pelengkapnya dapat memakai alt kosong untuk menghindari pengulangan. Prinsip ini dijelaskan dalam panduan gambar fungsional W3C.

Caption di luar tautan jangan langsung dianggap sebagai nama tautan tersebut. Periksa elemen a beserta isinya. Gambar yang membuka versi lebih besar juga memerlukan penjelasan tujuan yang sesuai; jangan menjanjikan unduhan jika kliknya hanya membuka tampilan gambar.

Contoh HTML untuk satu gambar informatif di Blogger

Berikut contoh gambar tanpa tautan, dengan alt dan caption yang berbeda. Kode ditampilkan sebagai teks untuk dipelajari. Jika ingin menerapkannya, gunakan pada isi satu draf melalui mode HTML, bukan editor tema. Unggah gambar milik Anda terlebih dahulu, lalu gunakan alamat gambar yang benar.

<figure style="margin:1.5em 0;">
  <img src="URL_GAMBAR_ANDA"
       alt="Satu berita utama di kiri dan empat kartu berita pendamping di kanan"
       width="1200" height="675"
       style="display:block;max-width:100%;height:auto;">
  <figcaption>Ilustrasi susunan berita, bukan tampilan produk tertentu.</figcaption>
</figure>

Ganti URL_GAMBAR_ANDA dengan URL hasil unggahan, sesuaikan kedua teks dengan gambar sebenarnya, dan ubah dimensi menurut rasio berkas. Angka 1200 × 675 hanya contoh, bukan ukuran wajib Blogger. Pastikan tidak ada salinan gambar lama tertinggal ketika Anda mengganti pembungkus HTML.

Bantuan Blogger mengenai gambar menjelaskan penyisipan gambar serta pengaturan ukuran, caption, dan perataan. Setelah menyunting, simpan draf, muat ulang editor, lalu periksa lagi elemen gambarnya. Jangan menyimpulkan perubahan tersimpan hanya karena teks terlihat sesaat setelah diketik.

Periksa makna, lalu periksa hasil tersimpan

Baca alt tanpa melihat gambar, lalu bandingkan dengan paragraf di sekitarnya. Hapus kata promosi yang tidak menerangkan informasi. Dua gambar berbeda dalam satu tutorial sebaiknya dapat dibedakan berdasarkan hal yang ditunjukkan. Bila keduanya hanya diberi judul artikel, pembaca sulit mengetahui alasan gambar kedua ditambahkan.

Dalam pratinjau, periksa caption terlihat, urutan bacaan masuk akal, dan gambar sesuai pembahasan. Periksa HTML tersimpan untuk membedakan alt kosong, alt hilang, dan alt yang sudah berisi. Catat keputusan per gambar di lembar penyuntingan: fungsinya, teks akhir, serta hal yang masih perlu diperiksa. Ini memudahkan peninjauan oleh editor lain. Untuk gambar bertautan, gunakan keyboard serta alat bantu yang tersedia guna memeriksa apakah tujuan tautannya dapat dipahami; tampilan visual saja belum cukup.

Dokumentasi gambar Google Search menerangkan bahwa alt membantu Google memahami gambar bersama isi halaman dan analisis visual. Gunakan kata yang relevan secara alami, tanpa menjejalkan variasi keyword. Alt tidak menjamin indeks atau peringkat. Kesesuaian gambar pada data terstruktur merupakan pemeriksaan lain; lanjutkan ke panduan memeriksa gambar pada schema Article bila kebutuhan Anda berada pada bagian tersebut.