Teks alt: Panduan SEO dan Aksesibiliti

Gambaran keseluruhan

Teks alt (atribut alt pada elemen <img>) ialah deskripsi teks ringkas bagi imej yang ditujukan terutamanya untuk kebolehcapaian dan sebagai gantian apabila imej gagal dimuat. Pembaca skrin membacakan teks alt kepada pengguna yang buta atau berpenglihatan rendah, dan enjin carian menggunakan teks alt sebagai salah satu isyarat teks tentang subjek imej. Teks alt membantu pengindeksan dengan menyediakan teks yang boleh dianalisis untuk imej, tetapi ia hanyalah satu isyarat daripada banyak yang mempengaruhi kedudukan dan kebolehlihatan.

Tulis teks alt untuk menghuraikan maklumat yang imej sampaikan kepada audiens yang disasarkan. Untuk imej semata-mata hiasan, gunakan atribut alt kosong (<img src="..." alt="">) supaya pembaca skrin mengabaikannya. Untuk visual kompleks—graf carta, infografik, diagram—sediakan ringkasan teks berdekatan atau gunakan teknik ARIA/HTML untuk menyampaikan huraian yang lebih panjang.

Langkah demi langkah

1) Kenal pasti peranan imej: tentukan sama ada imej itu informatif, fungsional (contoh: butang), atau hiasan. Imej informatif dan fungsional memerlukan teks alt yang deskriptif; imej hiasan harus menggunakan atribut alt kosong.

2) Huraikan kandungan penting secara ringkas: tulis apa yang pengguna perlu tahu daripada imej. Kekalkan teks alt ringkas—sasarkan untuk menyampaikan idea utama dalam satu ayat atau frasa. Contoh alt informatif standard: <img src="/photos/harbor.jpg" alt="Bot nelayan merah berlabuh di pelabuhan berbatu ketika matahari terbit">.

3) Elakkan pengisian kata kunci (keyword stuffing) dan frasa berulang. Jangan letakkan awalan seperti “image of” atau “picture of”—pembaca skrin sudah mengumumkan peranan imej. Jadikan teks berguna kepada pembaca manusia dan bukan untukperayap.

4) Tangani imej fungsional dan kawalan: jika imej ialah pautan atau butang, terangkan tindakan yang dilakukannya. Contoh: <img src="/icons/download.svg" alt="Muat turun helaian data produk">. Jika kawalan mempunyai teks yang boleh dilihat, alt harus sepadan dengan tujuannya atau kosong jika teks itu sudah menyampaikan tindakan.

5) Sediakan huraian lebih panjang untuk imej kompleks: gunakan kapsyen bersebelahan, pautan kepada huraian terperinci, aria-describedby, atau teks HTML yang kelihatan untuk mengembangkan carta atau infografik. Untuk butiran setara cetakan (jadual data, label paksi), masukkan maklumat penting dalam teks halaman.

6) Gunakan peraturan editorial yang konsisten: bina panduan gaya ringkas untuk penyumbang (sasaran panjang, bila untuk memendekkan, peraturan bahasa) dan gunakan ia dalam templat atau medan CMS supaya teks alt ditangkap dengan konsisten pada skala.

Contoh HTML

Imej deskriptif: <img src="https://example.com/park.jpg" alt="Kanak-kanak menerbangkan layang-layang merah di taman bandar">. Imej hiasan: <img src="/decorative-divider.png" alt="">. Imej fungsional digunakan sebagai pautan: <a href="/download"><img src="/icons/pdf.svg" alt="Muat turun laporan PDF"></a>.

Pengesahan teks alt: senarai semak teknikal

**Kehadiran atribut alt** — tempat untuk periksa: lihat sumber halaman, panel Elements dalam Chrome DevTools, atau curl (ambil HTML penuh dengan curl tanpa -I) — lulus apabila setiap <img> yang bermakna mempunyai atribut alt dan imej hiasan menggunakan alt="".

**DOM terhasil untuk imej yang disisipkan oleh JavaScript** — tempat untuk periksa: panel Elements Chrome DevTools (periksa DOM akhir) — lulus apabila imej yang kelihatan kepada pengguna juga mempunyai teks alt sesuai dalam DOM terhasil.

**Audit kebolehcapaian** — tempat untuk periksa: Lighthouse dalam Chrome DevTools atau alat kebolehcapaian automatik — lulus apabila audit melaporkan tiada teks alt hilang untuk imej informatif dan hanya menandakan imej yang dimaksudkan sebagai hiasan.

**Pemeriksaan kebolehbacaan manusia** — tempat untuk periksa: semakan contoh oleh penyunting kandungan atau pembaca skrin (NVDA, VoiceOver) — lulus apabila teks alt menyampaikan maklumat berguna yang sama seperti visual untuk pengguna bantuan.

**Kebolehdian indeks halaman** — tempat untuk periksa: untuk halaman anda sendiri gunakan Google Search Console URL Inspection; untuk halaman pihak ketiga gunakan operator site: sebagai petunjuk — lulus apabila halaman boleh dirayapi (tidak disekat oleh robots.txt atau noindex) dan URL Inspection menunjukkan halaman dikenali oleh Google. Nota: site: hanya petunjuk; URL Inspection adalah autoritatif untuk halaman yang anda miliki.

Petua alat praktikal

Gunakan curl untuk mendapatkan HTML halaman sebagai user agent tertentu: curl -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" https://example.com/page > page.html. Jangan gunakan -I jika anda perlukan body. Buka fail yang disimpan dalam penyunting teks atau jalankan parser DOM untuk mencari tag <img> dan atribut alt mereka.

Jalankan Lighthouse (Chrome DevTools → Lighthouse) untuk mendedahkan isu kebolehcapaian biasa, dan uji dengan pembaca skrin (NVDA pada Windows, VoiceOver pada macOS) untuk mengesahkan pengalaman pengguna.

Jika anda menggunakan data berstruktur yang merujuk imej (contoh: skema Product atau Recipe), sahkan markup dengan Rich Results Test atau Markup Skema Validator untuk memastikan imej yang dirujuk dalam JSON-LD wujud dan boleh diakses.

Masalah biasa

Ketiadaan teks alt pada imej bermakna. Ini menjejaskan kebolehcapaian dan meninggalkan pengguna buta tanpa maklumat visual halaman.

Pemasukan kata kunci berlebihan: mengulang kata kunci sasaran atau nama jenama dalam atribut alt dengan cara yang tidak semula jadi. Ini memberikan pengalaman yang buruk dan mungkin diabaikan oleh enjin carian.

Menggunakan nama fail atau frasa generik (contoh: "image1.jpg", "picture") sebagai teks alt, yang tidak bermakna untuk teknologi bantuan atau pengindeksan.

Bergantung pada atribut title dan bukannya alt untuk maklumat kritikal; ramai pembaca skrin tidak membentangkan title dengan konsisten.

Percaya teks alt sahaja mengawal penarafan imej. Teks alt membantu enjin carian memahami imej, tetapi pengindeksan dan kebolehlihatan bergantung pada konteks halaman, data berstruktur, kebolehrayaan untuk perayap dan isyarat lain.

Jika imej disisipkan di pihak klien oleh JavaScript, penulis kadang-kadang lupa menyertakan atribut alt dalam DOM terhasil; sentiasa periksa DOM akhir, bukan hanya HTML server.

Baca Panduan SEO Teknikal

Soalan Lazim

S: Berapa panjang teks alt patut? J: Sasarkan deskripsi ringkas yang menyampaikan tujuan imej. Satu ayat pendek atau frasa biasanya mencukupi; untuk visual kompleks sediakan huraian aksesibel yang lebih panjang di tempat lain pada halaman.

S: Adakah teks alt mempengaruhi kedudukan SEO? J: Teks alt menyediakan isyarat teks yang boleh membantu pengindeksan dan kaitan carian imej, tetapi ia tidak menentukan kedudukan dengan sendirinya. Kedudukan bergantung pada banyak isyarat termasuk kesesuaian halaman, data berstruktur, kebolehrayaan untuk perayap dan kualiti kandungan keseluruhan.

S: Perlukah imej hiasan mempunyai teks alt? J: Tidak. Imej hiasan harus menggunakan atribut alt kosong (alt="") supaya ia diabaikan oleh pembaca skrin dan tidak menambah gangguan kepada pengalaman kebolehcapaian.

S: Boleh alat automatik menjana teks alt yang boleh diterima? J: Cadangan automatik daripada CMS atau pengecaman imej boleh membantu, tetapi sentiasa semak dan sunting teks alt yang dijana mesin untuk ketepatan, kejelasan dan isu privasi sebelum diterbitkan.

S: Bagaimana pula imej dalam latar belakang CSS? J: Imej latar belakang CSS tidak terdedah sebagai elemen <img> dan tidak mempunyai atribut alt; sebarang kandungan bermaklumat dalam imej latar perlu disampaikan dalam HTML supaya ia boleh diakses.

SEO teknikal hanyalah sebahagian daripada pertumbuhan organik. Membina autoriti topikal memerlukan backlink berkualiti dan kandungan yang diindeks serta boleh diakses—pertimbangkan marketplace dan kerjasama terpilih yang memprioritaskan kebolehdian indeks penerbit dan konteks editorial.Bina autoriti dengan backlink berkualiti