Apa Itu Alt Tag dan Bagaimana Seharusnya Anda Menggunakannya?

Gambar membantu membuat situs web Anda menarik dan menarik secara visual. Namun, jika Anda tidak mengoptimalkan gambar dengan teks alternatif (juga disebut sebagai "teks alt" atau "tag alt"), Anda akan kehilangan peluang penting untuk meningkatkan pengalaman pengguna dan aksesibilitas situs Anda.

Untuk menggunakannya dengan benar, penting untuk terlebih dahulu memahami apa itu tag alt. Dalam posting ini, kita akan membahas apa itu tag alt dan mengapa mereka digunakan. Kami juga akan menjelaskan cara menambahkan tag alt ke gambar di WordPress, dan memperkenalkan beberapa praktik terbaik untuk melakukannya.

Mari kita mulai!

Berlangganan Saluran Youtube Kami

Apa Itu Alt Tag?

Tag Alt ditambahkan ke gambar dalam HTML, untuk menjelaskan konten dan konteksnya di halaman web. Tag alt juga muncul di dalam wadah gambar saat file media tidak dapat dimuat atau ditampilkan dengan benar:

Tag alternatif membantu orang yang menggunakan pembaca layar, seperti mereka yang memiliki gangguan penglihatan, memahami konten di situs web Anda. Terlebih lagi, bot mesin pencari menggunakannya untuk menafsirkan gambar Anda saat merayapi, mengindeks, dan memberi peringkat situs Anda.

Ditambahkan di dalam tag gambar, tag alt berkualitas adalah deskripsi singkat yang menjelaskan tidak hanya apa yang ditampilkan gambar, tetapi juga tujuannya pada halaman. Saat digunakan dalam kode HTML, tag gambar lengkap terlihat seperti ini:

<img src="motorcycle-sunset.png" alt="Man in black and red checkered shirt riding an orange motorcycle at sunset."/>

Tag alt gambar terkadang dikacaukan dengan judul atau keterangan gambar. Namun, judul gambar adalah jenis atribut yang berbeda. Mereka ditampilkan sebagai teks pop-up ketika seseorang mengarahkan mouse ke gambar. Di sisi lain, keterangan muncul dengan gambar, biasanya di bawahnya, dan memberikan informasi atau detail tambahan tentangnya. Dalam keadaan normal, pengunjung tidak akan pernah melihat tag alt gambar Anda.

Mengapa Menggunakan Alt Tag pada Gambar?

Alt tag melayani beberapa tujuan. Meskipun Anda tidak diharuskan untuk menggunakannya, ada beberapa manfaat utama untuk melakukannya. Karena mereka digunakan oleh perayap mesin pencari dan alat pembaca layar, mereka adalah komponen penting dari aksesibilitas web dan Pengoptimalan Mesin Pencari (SEO).

Mereka Meningkatkan Aksesibilitas Web

Tag Alt membantu memastikan bahwa pengunjung dapat mengakses dan menikmati konten situs web Anda, bahkan saat menggunakan teknologi bantu atau browser teks saja. Saat seseorang dengan gangguan penglihatan mengunjungi situs web Anda, pembaca layar mereka akan membacakan teks di halaman tersebut. Ketika tiba di sebuah gambar, ia akan menggunakan tag alt untuk menggambarkan apa gambar itu.

Jika tag alt tidak ada, pembaca layar dapat membaca nama file gambar sebagai gantinya. Ini tidak hanya biasanya tidak efektif dalam menjelaskan gambar dengan benar, tetapi juga dapat membingungkan dan mengganggu, terutama jika nama file tidak dioptimalkan untuk SEO.

Dalam beberapa kasus, seperti ketika Anda membiarkan bidang tag alt gambar kosong di WordPress, pembaca layar akan melewati gambar itu sama sekali. Dengan asumsi bahwa gambar yang Anda sertakan di halaman web Anda memiliki tujuan, ketidakhadiran ini berarti pengunjung tidak mendapatkan nilai penuh atau pengalaman yang Anda maksudkan saat mengonsumsi konten Anda.

Mereka Dapat Meningkatkan Peringkat Mesin Pencari Anda

Tag alt gambar dapat memudahkan Anda untuk menentukan peringkat untuk kata kunci yang Anda coba targetkan. Bot mesin pencari cerdas, tetapi mereka tidak dapat menafsirkan dan memahami aspek visual dari suatu gambar dengan cara yang sama seperti yang dapat dilakukan manusia.

Atribut Alt menawarkan alternatif berbasis teks untuk menerjemahkan gambar, dan lebih khusus lagi untuk memasukkan kata kunci yang relevan. Deskripsi tekstual yang mengandung kata kunci target dapat meningkatkan peluang Anda untuk mendapatkan peringkat tinggi dalam pencarian gambar.

Untuk menekankan peran penting yang dimainkan gambar (dan, pada gilirannya, tag alt) dalam SEO, pertimbangkan Halaman Hasil Mesin Pencari (SERP) untuk "tempat tidur ukuran raja":

Halaman pertama tidak hanya menghasilkan hasil berbasis teks; ada banyak hasil gambar juga. Ketika dioptimalkan dan digunakan dengan benar, tag alt dapat membantu meningkatkan SEO Anda dan menghasilkan hyperlink, gambar yang dapat diklik untuk muncul dalam pencarian seperti ini. Ini sangat bermanfaat untuk situs e-niaga dan halaman arahan.

Cara Menambahkan Tag Alt Gambar di WordPress

Setelah Anda memahami manfaat menggunakan atribut alt gambar di situs web Anda, inilah saatnya untuk mempelajari cara melakukannya. Untungnya, WordPress membuat tugas ini sangat mudah dan sederhana.

Untuk menambahkan tag alt gambar di WordPress, masuk ke dasbor admin Anda dan navigasikan ke halaman atau pos yang ingin Anda tambahkan gambar Anda. Di dalam editor WordPress, klik ikon plus dan pilih blok Gambar :

Selanjutnya, unggah gambar Anda atau pilih salah satu dari Media Library Anda. Setelah Anda memasukkan gambar ke dalam blok, panel Pengaturan gambar akan terbuka di bilah sisi di sebelah kanan. Anda dapat memasukkan deskripsi Anda di kotak teks Alt :

Setelah selesai, simpan perubahan Anda. Anda juga dapat melakukan ini untuk gambar yang ada. Misalnya, jika Anda ingin memperbarui gambar pada posting yang sudah dipublikasikan di situs Anda, cukup klik gambar dan masukkan tag alt baru Anda di bilah sisi.

Cara Menambahkan Tag Alt Gambar di HTML

Saat Anda menggunakan WordPress atau CMS lain yang menyertakan modul untuk menambahkan dan mengedit tag alt, maka secara otomatis akan menambahkan kode HTML untuk Anda. Namun, jika Anda ingin menambahkan kode sendiri, Anda dapat melakukannya dengan mudah.

Untuk menambahkan HTML tag alt di WordPress, klik pada blok Gambar yang relevan. Di bilah alat blok, pilih tombol dengan tiga titik vertikal dan pilih Edit sebagai HTML :

Kode HTML akan menampilkan tag gambar. Anda akan melihat bahwa atribut alt kosong. Tempatkan teks Anda di dalam tanda kutip:

Setelah selesai, klik tombol Pratinjau untuk kembali ke editor visual, lalu simpan perubahan Anda. Anda dapat menggunakan sintaks dan format yang sama untuk mengedit tag gambar HTML dari file apa pun.

Kiat dan Praktik Terbaik untuk Menulis Tag Alt Gambar

Saat Anda membuat tag alt, ada beberapa poin penting yang perlu diingat. Mematuhi praktik terbaik ini akan membantu membuat tag alt Anda lebih efektif:

• Jadilah spesifik dan deskriptif. Tujuan dari tag alt adalah untuk mendeskripsikan gambar, jadi Anda ingin sespesifik mungkin. Jika Anda tidak yakin apakah deskripsi Anda cukup, pertimbangkan gambar apa yang akan Anda visualisasikan jika Anda hanya melihat baris teks itu.
• Tetap pendek. Meskipun Anda ingin detail, Anda juga tidak perlu membuat tag alt Anda menjadi paragraf yang panjang (atau bahkan kalimat penuh). Bertujuan untuk sekitar 100 hingga 125 karakter maksimum.
• Jangan berlebihan. Untuk memaksimalkan tag alt Anda, Anda tidak ingin memasukkan kata-kata yang tidak perlu. Ini termasuk menambahkan "Gambar" atau "Gambar" sebelum deskripsi. Elemen-elemen ini tidak perlu, karena sudah tersirat.
• Memasukkan kata kunci yang relevan secara alami . Pertimbangkan kata kunci target Anda, dan jika memungkinkan, gabungkan secara organik dalam konteks halaman. Ini lebih mudah bila Anda menggunakan gambar yang sangat relevan yang sesuai dengan teks.
• Hindari isian kata kunci. Meskipun menggunakan kata kunci di tag alt Anda dapat meningkatkan SEO, berhati-hatilah untuk tidak berlebihan. Penjejalan kata kunci sebenarnya dapat merusak SEO Anda dan menghasilkan pengalaman pengguna yang buruk.
• Jangan gunakan gambar sebagai pengganti teks. Tujuan utama dari tag alt adalah untuk menyediakan konteks tekstual untuk mesin yang tidak dapat memproses dan menafsirkan elemen visual pada halaman. Oleh karena itu, tidak masuk akal untuk menggunakan teks di dalam gambar, terutama untuk heading dan judul halaman Anda.

Saat membuat tag alt untuk gambar Anda, selalu ingat bahwa tujuannya adalah untuk menjelaskan gambar kepada mereka yang mungkin tidak dapat melihatnya. Meskipun mempertimbangkan SEO dan kata kunci jelas merupakan ide yang cerdas, menulis tag alt Anda dengan mempertimbangkan pengguna nyata dapat membantu menghasilkan hasil yang lebih positif.

Kesimpulan

Gambar dapat membantu meningkatkan tampilan halaman web Anda dan membuatnya lebih menarik, informatif, dan menarik. Namun, untuk memaksimalkan nilainya, yang terbaik adalah melengkapinya dengan tag alt. Penjelasan singkat namun deskriptif ini memberikan konteks bagi pengguna dan mesin telusur. Tag alt gambar membantu meningkatkan pengalaman pengguna, meningkatkan aksesibilitas, dan membuat peringkat untuk kata kunci yang relevan menjadi lebih mudah.

Apakah Anda memiliki pertanyaan lain tentang apa itu tag alt atau bagaimana cara menambahkannya di WordPress? Beri tahu kami di bagian komentar di bawah!

Gambar unggulan oleh Honza Hruby / shutterstock.com