圖片 alt 文字(替代文字)
別稱 alt 屬性 · 替代文字 · alt 標籤
<img> 上的 alt 屬性為圖片提供文字描述,供螢幕報讀軟體、搜尋引擎使用,並在圖片載入失敗時顯示。
這是什麼
Alt 文字是圖片 alt 屬性的值,用文字描述圖片的內容或功能。螢幕報讀軟體會朗讀它,瀏覽器在圖片無法載入時會顯示它,搜尋引擎則用它來理解並索引圖片。
為什麼重要
Alt 文字是爬蟲與 AI 引擎理解圖片所傳達內容的主要途徑,使圖片搜尋與更豐富的多模態(multimodal)答案成為可能。它同時是核心的無障礙要求,具描述性的 alt 能強化主題與實體脈絡,協助你的內容被準確引用。
如何檢查
在 DevTools 中檢視圖片,或在主控台執行 document.querySelectorAll('img:not([alt])') 來找出缺少該屬性的圖片。Lighthouse、WAVE 或 axe 等無障礙稽核會回報沒有 alt 的圖片,並標示出無意義的 alt 文字。
如何修正
為每張內容圖片撰寫簡潔、具體的 alt 文字以傳達其意義,僅在自然之處帶入相關關鍵字,長度盡量控制在約 125 個字元以內。純裝飾性的圖片使用空白 alt="",讓輔助技術略過它們,並切勿堆砌關鍵字或重述已可見的圖說。
相關詞彙
- 頁面效能(page performance)頁面載入與變為可互動的速度與順暢度,常以伺服器回應時間、HTML 大小與 Core Web Vitals(核心網頁指標)來衡量。
- 單一 H1 標題(H1 heading)<h1> 是最高層級的標題,用來說明頁面的主要主題;只使用一個 H1,能讓文件對使用者、爬蟲與輔助技術都有清楚、無歧義的標題。
- 實體清晰度(Entity Clarity)直白說明品牌是誰、做什麼以及關鍵事實,讓人與機器都能無歧義地辨識該實體。
- Open Graph 與 Twitter Card 標籤Open Graph 與 Twitter Card meta 標籤告訴社群平台與通訊軟體如何呈現連結預覽,包括標題、描述與圖片。
官方參考資料
外部連結,將於新分頁開啟。
把知識化為行動。
親手逐項完成每一項檢查,並轉成可分享的 GEO Score 報告——或在數秒內自動掃描你的網站。