Alt Teks

Apa itu Alt Text?

Teks alternatif (teks alternatif), juga dikenal sebagai "atribut alt", "deskripsi alt", atau secara teknis salah sebagai "tag alt," digunakan dalam kode HTML untuk menggambarkan penampilan dan fungsi gambar pada halaman.

Alt teks menggunakan:

1. Menambahkan teks alternatif ke foto adalah prinsip aksesibilitas web yang pertama dan terutama. Pengguna tunanetra yang menggunakan pembaca layar akan membaca atribut alt untuk lebih memahami gambar pada halaman.

2. Tag alt akan ditampilkan sebagai pengganti gambar jika file gambar tidak dapat dimuat.

3. Tag Alt memberikan konteks / deskripsi gambar yang lebih baik untuk crawler mesin pencari, membantu mereka untuk mengindeks gambar dengan benar.

Teks yang disorot menunjukkan teks alt (atribut alt) dari gambar di sebelah kiri.

Contoh Teks Alt

Format Teks Alt Optimal

Format terbaik untuk teks alt cukup deskriptif tetapi tidak mengandung upaya spam pada isian kata kunci. Jika Anda dapat memejamkan mata, meminta seseorang membacakan teks alt untuk Anda, dan membayangkan versi gambar yang cukup akurat, Anda berada di jalur yang benar.

Mari kita lihat beberapa contoh teks alternatif untuk gambar setumpuk panekuk blueberry yang tampak lezat ini:

Baik:

Teks alt ini hanya "oke" karena tidak terlalu deskriptif. Ya, ini adalah gambar setumpuk pancake. Tapi, ada lagi yang bisa dikatakan tentang gambar ini.

Baik:

Teks alt ini adalah alternatif yang lebih baik karena jauh lebih deskriptif tentang apa yang ada di gambar. Ini bukan hanya setumpuk "pancake" (seperti yang ditunjukkan contoh teks alt pertama); itu setumpuk blueberry pancake dengan debu gula bubuk!

Tidak direkomendasikan:

atau

Tidak satu pun dari contoh ini yang direkomendasikan. Baris pertama kode sebenarnya tidak mengandung teks alt sama sekali (perhatikan tanda kutip kosong), sedangkan contoh kedua menunjukkan isian kata kunci dalam teks alt.

Mengapa Alt Text Penting?

1. Aksesibilitas

Teks alternatif adalah prinsip desain web yang dapat diakses . Tujuan aslinya (dan masih utama) adalah untuk mendeskripsikan gambar kepada pengunjung yang tidak dapat melihatnya. Ini termasuk pembaca layar dan browser yang memblokir gambar, tetapi juga termasuk pengguna yang memiliki keterbatasan penglihatan atau tidak dapat mengidentifikasi gambar secara visual. Termasuk alt teks dengan gambar Anda memastikan semua pengguna, terlepas dari kemampuan visual, dapat menghargai konten di situs Anda.

2. Gambar SEO

Menggunakan teks alternatif pada gambar Anda dapat membuat pengalaman pengguna yang lebih baik, tetapi juga dapat membantu Anda mendapatkan manfaat SEO eksplisit dan implisit. Seiring dengan penerapan judul gambar dan praktik terbaik penamaan file, termasuk teks alternatif juga dapat berkontribusi untuk SEO gambar.

Sementara teknologi pengenalan gambar mesin pencari telah jauh meningkat selama bertahun-tahun, crawler pencarian masih tidak dapat "melihat" gambar pada halaman situs web seperti yang kita bisa, jadi tidak bijaksana untuk membiarkan interpretasi hanya di tangan mereka. Jika mereka tidak mengerti, atau salah, mungkin Anda bisa menentukan peringkat untuk kata kunci yang tidak diinginkan atau kehilangan peringkat sama sekali.

Berikut ini sebuah contoh: Google mungkin melihat gambar berikut dan dapat menguraikan bahwa itu adalah pria yang mengenakan dasi dan kacamata, duduk di meja.

Jim Halpert dari The Office (versi AS)

Namun, jika Anda mencoba memberi peringkat untuk "peniruan Jim Halpert tentang Dwight Schrute," Anda harus memberi bantuan pada mesin pencari.

Dalam arti itu, alt teks menawarkan Anda kesempatan lain untuk memasukkan kata kunci target Anda. Dengan penggunaan kata kunci di halaman yang masih menjadi faktor peringkat mesin pencari , Anda sebaiknya membuat teks alternatif yang menggambarkan gambar dan, jika mungkin, menyertakan kata kunci atau frasa kata kunci yang Anda targetkan.

Bagaimana cara menulis teks alt yang bagus?

Jelaskan gambar sespesifik mungkin. Teks alternatif, pertama dan terpenting, dirancang untuk memberikan penjelasan teks gambar untuk pengguna yang tidak dapat melihatnya. jika suatu gambar benar-benar tidak menyampaikan makna / nilai dan hanya ada untuk tujuan desain, itu harus hidup dalam CSS, bukan HTML.
Buatlah (relatif) singkat. Pembaca layar paling populer memotong teks alt sekitar 125 karakter, jadi disarankan untuk menyimpannya dalam jumlah karakter atau kurang.
Gunakan kata kunci Anda Alt teks memberi Anda kesempatan lain untuk memasukkan kata kunci target Anda pada halaman, dan dengan demikian kesempatan lain untuk memberi sinyal ke mesin pencari bahwa halaman Anda sangat relevan dengan permintaan pencarian tertentu. Meskipun prioritas pertama Anda harus menjelaskan dan memberikan konteks pada gambar, jika masuk akal untuk melakukannya, masukkan kata kunci Anda dalam teks alt setidaknya satu gambar di halaman.
Hindari isian kata kunci. Google tidak akan mencabut poin Anda ke teks alt yang ditulis dengan buruk, tetapi Anda akan berada dalam masalah jika Anda menggunakan teks alt Anda sebagai peluang untuk memasukkan sebanyak mungkin kata kunci yang relevan ke dalamnya. Fokus pada penulisan teks alt deskriptif yang memberikan konteks pada gambar dan jika mungkin, sertakan kata kunci target Anda, dan biarkan saja.
Jangan gunakan gambar sebagai teks. Ini kurang dari praktik terbaik alt-spesifik teks dan lebih dari prinsip pengembangan web SEO-friendly umum. Karena mesin pencari tidak dapat membaca teks dalam gambar Anda, Anda harus menghindari menggunakan gambar sebagai pengganti kata-kata. Jika Anda harus melakukannya, jelaskan apa yang dikatakan foto Anda dalam teks alt Anda.
Jangan sertakan "gambar," "gambar," dll dalam teks alt Anda. Sudah diasumsikan teks alt Anda merujuk ke gambar, jadi tidak perlu menentukannya.
Jangan lupa longdesc = "". Jelajahi menggunakan tag longdesc = "" untuk gambar yang lebih kompleks yang membutuhkan deskripsi yang lebih panjang.
Jangan abaikan tombol form. Jika formulir di situs web Anda menggunakan gambar sebagai tombol "kirim", berikan atribut alt. Tombol gambar harus memiliki atribut alt yang menggambarkan fungsi tombol seperti, "cari", "terapkan sekarang", "daftar," dll.