Alt Tag

Apa Itu Alt Tag?

Alt tag adalah kode HTML yang digunakan untuk mendeskripsikan tampilan dan fungsi suatu gambar pada suatu halaman situs web. Alt Tag disebut juga dengan alt text (teks alternatif) atau "atribut alt". Alt Tag ini adalah deskripsi tertulis singkat dari suatu gambar. Dengan alt text maka bisa meningkatkan aksesibilitas bagi pengguna yang tak dapat melihat gambar di halaman web. Termasuk untuk pengguna yang menggunakan pembaca layar atau memiliki koneksi dengan bandwidth rendah.

Poin Penting

• Image alt tag mengacu pada kode HTML yang digunakan untuk mendeskripsikan tampilan dan fungsi gambar pada halaman situs web.
• Alt tag memberikan konteks dan deskripsi gambar yang lebih baik untuk crawler di mesin pencari. Ini membantu pemilik web untuk mengindeks gambar dengan benar.
• Alt tag harus menjelaskan tujuan, niat, dan konteks gambar.
• Saat memilih teks alt, fokuslah untuk membuat konten yang berguna dan kaya informasi yang menggunakan kata kunci dengan tepat dan dalam konteks konten halaman. 
• Hindari mengisi atribut alt dengan kata kunci (penjejalan kata kunci) karena akan menghasilkan pengalaman pengguna yang negatif dan dapat menyebabkan situs Anda terlihat sebagai spam.

Memahami Alt Tag

Alt tag pada halaman web menawarkan alternatif tekstual untuk konten non-teks. Konsep utama di balik tag alt ini adalah bahwa komputer dan pembaca layar tidak dapat menafsirkan gambar untuk memutuskan apa yang diwakilinya. Teks harus diberikan untuk pengguna yang menyajikan konten dan fungsi gambar di konten web sebagai pengembang.

Ada dua cara untuk mendeskripsikan tag alt:

• Di dalam atribut alt elemen img.
• Dalam arti atau pengaturan gambar.

Sebab itu, maka disebutlah sebagai alt tag, meskipun faktanya ini bukan satu-satunya alat untuk menyediakan konten dan fungsionalitas gambar. Detail ini juga dapat digunakan dalam teks di sebelah gambar atau di halaman yang berisi gambar tersebut. Dalam kasus lain, sambungan ke halaman terpisah yang berisi penjelasan yang lebih panjang tentang materi gambar dapat diberikan jika padanannya tidak dapat dijelaskan secara ringkas.

Manfaat Alt Tag

Salah satu keuntungan terpenting dari image alt tag untuk gambar adalah kegunaannya. Ini juga membantu pengguna yang kesulitan mengenali gambar secara visual untuk mengenali materi gambar Anda, selain pengguna dengan gangguan penglihatan. Selain itu, ada beberapa keunggulan lain dari tag alt ini sebagai berikut:

1. Konsep utama kegunaan pada halaman web tertentu adalah menambahkan teks alternatif ke foto atau gambar. Pengguna terbatas yang menggunakan pembaca layar dapat membaca atribut alt untuk mempelajari lebih lanjut tentang gambar di halaman web.

2. Jika file gambar tidak dapat diakses, Alt Tag akan ditampilkan sebagai gambar alternatif.

3. Alt tag menawarkan arti dan definisi gambar yang lebih jelas untuk crawler mesin pencari. Ini membantu webmaster dalam mengindeks gambar dengan benar.

Mengapa Alt Tag Penting?

1. Accessibility

Alt Tag adalah prinsip dari desain web agar mudah diakses . Tujuan utamanya adalah untuk mendeskripsikan gambar kepada pengguna yang memiliki keterbatasan dalam melihat atau pengguna yang tidak dapat mengidentifikasi gambar secara visual.

2. Image SEO

Menggunakan alternative text pada gambar dapat membuat pengalaman pengguna yang lebih baik, tetapi juga dapat membantu pemilik situs untuk mendapatkan manfaat dari SEO dalam bentuk eksplisit dan implisit. Dengan penerapan judul gambar dan penamaan file yang baik, alternative text pada gambar juga dapat berkontribusi untuk SEO.

3. Dapat Meningkatkan Peringkat Pada Google Image

Google Image adalah mesin pencari terbesar kedua di dunia dimana bertanggug jawab atas 20,45% pencarian online yang menempatkannya lebih unggul dari youtube, bing, dan mesin pencarian lainnya. Memberikan alternative text pada gambar juga sangat membantu untuk menaikkan peringkat dalam google image.

4. Sebagai Anchor Text Untuk Tautan Gambar

Anchor text mengacu pada pada kata-kata yang dapat diklik yang menghubungkan satu halaman web ke yang lain. Tetapi tidak semua tautan berbentuk teks, ada juga yang berupa gambar, jika menggunakan gambar sebagai tautan, alt tag membantu Google memahami lebih lanjut tentang halaman yang ditautkan.

Cara Menulis Alt Tag Yang Baik

1. Jelaskan gambar sespesifik mungkin

Alt tag awalnya dirancang untuk memberikan penjelasan teks pada gambar untuk pengguna yang tidak dapat melihatnya. jika suatu gambar benar-benar tidak menyampaikan makna / nilai dan hanya ada untuk tujuan desain, diatur dalam CSS.

2. Buatlah (relatif) singkat

Screen reader paling populer memotong alternative text sekitar 125 karakter, sehingga disarankan untuk menyimpannya dalam jumlah karakter yang lebih sedikit.

3. Gunakan kata kunci

Alt tag memberikan kesempatan lain untuk memasukkan keyword target pada halaman, membuat mesin pencarian merekomendasikan halaman  pemilik karena relevan dengan permintaan pencarian tertentu.

4. Hindari isian kata kunci.

Fokus pada penulisan alternative text deskriptif yang memberikan konteks pada gambar dan jika mungkin, sertakan keyword target.

5. Jangan gunakan gambar sebagai teks

Karena mesin pencari tidak dapat membaca teks dalam gambar, pemilik harus menghindari menggunakan gambar sebagai pengganti kata-kata. Jika ingin menambahkannya, jelaskan apa yang dideskripsikan foto dalam alternative text.

6. Jangan sertakan "gambar," "gambar," dan lain-lain dalam deskripsi

Sudah diasumsikan alternative text berisi deskripsi tentang gambar, sehingga tidak perlu menentukannya.

7. Jangan lupa longdesc = ""

Gunakan tag longdesc = “” untuk gambar yang lebih kompleks yang membutuhkan deskripsi yang lebih panjang.

8. Jangan abaikan tombol form

Jika formulir di situs web menggunakan gambar sebagai tombol “kirim”, berikan atribut alt. Tombol gambar harus memiliki atribut alternative text yang menggambarkan fungsi tombol seperti, “pencarian”, “terapkan sekarang”, “daftar,” dan lain-lain.

Contoh

Buruk (teks alt tidak ada): 

Buruk (isian kata kunci): 

Lebih baik: 

Praktik yang tepat:

Memahami Alt Tag

Alt tag pada halaman web menawarkan alternatif tekstual untuk konten non-teks. Konsep utama di balik tag alt ini adalah bahwa komputer dan pembaca layar tidak dapat menafsirkan gambar untuk memutuskan apa yang diwakilinya. Teks harus diberikan untuk pengguna yang menyajikan konten dan fungsi gambar di konten web sebagai pengembang.

Ada dua cara untuk mendeskripsikan tag alt:

• Di dalam atribut alt elemen img.
• Dalam arti atau pengaturan gambar.

Sebab itu, maka disebutlah sebagai alt tag, meskipun faktanya ini bukan satu-satunya alat untuk menyediakan konten dan fungsionalitas gambar. Detail ini juga dapat digunakan dalam teks di sebelah gambar atau di halaman yang berisi gambar tersebut. Dalam kasus lain, sambungan ke halaman terpisah yang berisi penjelasan yang lebih panjang tentang materi gambar dapat diberikan jika padanannya tidak dapat dijelaskan secara ringkas.

Manfaat Alt Tag

Salah satu keuntungan terpenting dari image alt tag untuk gambar adalah kegunaannya. Ini juga membantu pengguna yang kesulitan mengenali gambar secara visual untuk mengenali materi gambar Anda, selain pengguna dengan gangguan penglihatan. Selain itu, ada beberapa keunggulan lain dari tag alt ini sebagai berikut:

1. Konsep utama kegunaan pada halaman web tertentu adalah menambahkan teks alternatif ke foto atau gambar. Pengguna terbatas yang menggunakan pembaca layar dapat membaca atribut alt untuk mempelajari lebih lanjut tentang gambar di halaman web.

2. Jika file gambar tidak dapat diakses, Alt Tag akan ditampilkan sebagai gambar alternatif.

3. Alt tag menawarkan arti dan definisi gambar yang lebih jelas untuk crawler mesin pencari. Ini membantu webmaster dalam mengindeks gambar dengan benar.

Mengapa Alt Tag Penting?

1. Accessibility

Alt Tag adalah prinsip dari desain web agar mudah diakses . Tujuan utamanya adalah untuk mendeskripsikan gambar kepada pengguna yang memiliki keterbatasan dalam melihat atau pengguna yang tidak dapat mengidentifikasi gambar secara visual.

2. Image SEO

Menggunakan alternative text pada gambar dapat membuat pengalaman pengguna yang lebih baik, tetapi juga dapat membantu pemilik situs untuk mendapatkan manfaat dari SEO dalam bentuk eksplisit dan implisit. Dengan penerapan judul gambar dan penamaan file yang baik, alternative text pada gambar juga dapat berkontribusi untuk SEO.

3. Dapat Meningkatkan Peringkat Pada Google Image

Google Image adalah mesin pencari terbesar kedua di dunia dimana bertanggug jawab atas 20,45% pencarian online yang menempatkannya lebih unggul dari youtube, bing, dan mesin pencarian lainnya. Memberikan alternative text pada gambar juga sangat membantu untuk menaikkan peringkat dalam google image.

4. Sebagai Anchor Text Untuk Tautan Gambar

Anchor text mengacu pada pada kata-kata yang dapat diklik yang menghubungkan satu halaman web ke yang lain. Tetapi tidak semua tautan berbentuk teks, ada juga yang berupa gambar, jika menggunakan gambar sebagai tautan, alt tag membantu Google memahami lebih lanjut tentang halaman yang ditautkan.

Cara Menulis Alt Tag Yang Baik

1. Jelaskan gambar sespesifik mungkin

Alt tag awalnya dirancang untuk memberikan penjelasan teks pada gambar untuk pengguna yang tidak dapat melihatnya. jika suatu gambar benar-benar tidak menyampaikan makna / nilai dan hanya ada untuk tujuan desain, diatur dalam CSS.

2. Buatlah (relatif) singkat

Screen reader paling populer memotong alternative text sekitar 125 karakter, sehingga disarankan untuk menyimpannya dalam jumlah karakter yang lebih sedikit.

3. Gunakan kata kunci

Alt tag memberikan kesempatan lain untuk memasukkan keyword target pada halaman, membuat mesin pencarian merekomendasikan halaman  pemilik karena relevan dengan permintaan pencarian tertentu.

4. Hindari isian kata kunci.

Fokus pada penulisan alternative text deskriptif yang memberikan konteks pada gambar dan jika mungkin, sertakan keyword target.

5. Jangan gunakan gambar sebagai teks

Karena mesin pencari tidak dapat membaca teks dalam gambar, pemilik harus menghindari menggunakan gambar sebagai pengganti kata-kata. Jika ingin menambahkannya, jelaskan apa yang dideskripsikan foto dalam alternative text.

6. Jangan sertakan "gambar," "gambar," dan lain-lain dalam deskripsi

Sudah diasumsikan alternative text berisi deskripsi tentang gambar, sehingga tidak perlu menentukannya.

7. Jangan lupa longdesc = ""

Gunakan tag longdesc = “” untuk gambar yang lebih kompleks yang membutuhkan deskripsi yang lebih panjang.

8. Jangan abaikan tombol form

Jika formulir di situs web menggunakan gambar sebagai tombol “kirim”, berikan atribut alt. Tombol gambar harus memiliki atribut alternative text yang menggambarkan fungsi tombol seperti, “pencarian”, “terapkan sekarang”, “daftar,” dan lain-lain.

Contoh

Buruk (teks alt tidak ada): 

<img src = "/asset/img/seo-activity-at-cmlabs-env.jpg" />

Buruk (isian kata kunci): 

<img src = "/asset/img/seo-activity-at-cmlabs-env.jpg" alt = "cmlabs cmlabs malang cmlabs indonesia cmlabs" />

Lebih baik: 

<img src = "/asset/img/seo-activity-at-cmlabs-env.jpg" alt = "cmlabs" />

Praktik yang tepat:

<img src = "/asset/img/seo-activity-at-cmlabs-env.jpg" alt = "cmlabs membantu perusahaan untuk melihat lebih dekat Pemasaran SEO" />