Alt Text 怎麼寫？完整教學：SEO 與無障礙的雙重功能

Alt text（替代文字）是 HTML 圖片標籤中的一個屬性，但很多網站主要嘛留空，要嘛亂填一通。事實上，alt text 做得好，既能提升 SEO，又能讓視障用戶正常使用你的網站。本文帶你徹底搞清楚 alt text 的正確寫法，附帶大量實例對比。

什麼是 Alt Text

Alt text 是 HTML <img> 標籤的 alt 屬性，基本語法如下：

<img src="running-shoes.jpg" alt="紅色 Nike Air Max 90 運動鞋，白色鞋底">

當圖片無法載入時（網路錯誤、圖片失效、用戶關閉圖片載入），alt text 會顯示在圖片位置，告訴用戶這裡原本是什麼圖片。對於使用螢幕閱讀器（Screen Reader）的視障用戶，螢幕閱讀器會朗讀 alt text，讓他們了解圖片內容。

Alt Text 的雙重功能

功能一：搜尋引擎優化（SEO）

Google 的爬蟲能看懂圖片的 alt text，但對圖片本身的視覺內容理解仍然有限（儘管 Google Vision AI 持續進步）。Alt text 是搜尋引擎理解圖片內容最直接的線索：

• 幫助圖片在 Google 圖片搜尋中出現，並排名於相關關鍵字下
• 為頁面提供額外的關鍵字密度（自然融入，非堆砌）
• 讓 Google 理解圖片與頁面主題的關聯，強化整體主題相關性
• 在語義搜尋中，幫助 Google 建立更豐富的頁面理解

功能二：無障礙（Accessibility）

根據世界衛生組織的數據，全球約有 2.85 億視障人士，其中許多人使用螢幕閱讀器（如 NVDA、JAWS、VoiceOver）瀏覽網站。缺乏 alt text 的圖片對他們來說是「黑洞」——螢幕閱讀器會說「image.jpg」或直接跳過，完全無法傳遞圖片的資訊。

在許多國家（如美國的 ADA、歐盟的 EN 301 549），網站無障礙是法律要求，良好的 alt text 是其中的重要組成部分。

Alt Text 的寫法原則

以下是寫出有效 alt text 的核心原則：

1. 描述圖片的實際內容：說明你看到了什麼，不是說明你希望關鍵字排名什麼
2. 自然融入關鍵字：如果關鍵字確實描述了圖片內容，自然地包含它
3. 簡潔但具體：通常 5–15 個詞足夠，避免寫成長篇大論
4. 不要以「圖片顯示…」開頭：Google 和螢幕閱讀器都知道這是圖片
5. 不要堆砌關鍵字：如 alt="跑步鞋 運動鞋 慢跑鞋 球鞋 跑鞋" 是反效果，Google 可能將其視為 spam
6. 不要完全複製圖片旁邊的文字：若圖片旁已有相同文字描述，alt text 可以更簡短，避免重複

好 vs 壞 Alt Text 範例對比

最好的學習方式是對比實例：

情境一：產品圖片（跑鞋）

• 壞：alt=""（空白）
• 壞：alt="img0023"（無意義檔名）
• 壞：alt="跑步鞋 運動鞋 慢跑鞋 球鞋"（關鍵字堆砌）
• 好：alt="紅色 Nike Air Max 90 男款跑步鞋，側面視角"
• 好：alt="Nike Air Max 90 running shoes in crimson red, men's size, side view"（英文版）

情境二：食譜圖片（巧克力熔岩蛋糕）

• 壞：alt="甜點"（過於模糊）
• 壞：alt="蛋糕照片"（廢話）
• 好：alt="巧克力熔岩蛋糕切開後流出液態巧克力，旁邊搭配一球香草冰淇淋"

情境三：人物/照片

• 壞：alt="圖片"
• 壞：alt="CEO 照片"（過於簡略）
• 好：alt="公司創辦人 Maria Chen，在辦公室中微笑的半身照"
• 注意：若圖片旁已有姓名和職稱說明，alt text 可更簡短：alt="Maria Chen 的個人照"

情境四：資訊圖表（Infographic）

• 壞：alt="資訊圖"
• 好：alt="2024 年全球智慧型手機市場份額：Samsung 22%、Apple 18%、Xiaomi 12%，其他品牌佔 48%"（將圖表的核心資訊納入 alt text）
• 更好：在頁面上另外以文字列出完整資料，alt text 則概述圖表主題

情境五：純裝飾性圖片

• 用於裝飾、分隔線、背景花紋等無實際內容的圖片，應設定空的 alt text：alt=""（注意：是引號中沒有內容，而不是省略 alt 屬性）
• 空的 alt text 告訴螢幕閱讀器跳過這張圖片，不要浪費用戶時間

情境六：連結圖片（可點擊的圖片）

• 若圖片本身是一個連結，alt text 應描述連結目的地（而非圖片本身）
• 壞：alt="LOGO"（當 LOGO 連結到首頁時）
• 好：alt="返回首頁" 或 alt="[品牌名稱] 首頁"

各場景的 Alt Text 範例

電商網站：

• alt="藍色雙肩背包，容量 30L，側面置物袋設計"
• alt="不鏽鋼保溫瓶 500ml，黑色啞光質感，附吸管蓋"

部落格/新聞：

• alt="台北 101 夜景，城市燈光倒映在水面上"
• alt="科學家在實驗室中操作顯微鏡"

公司網站：

• alt="公司位於台北信義區的辦公室大廳，挑高設計搭配自然採光"
• alt="團隊 2024 年年會合照，約 50 人在戶外場地"

服務頁面圖示：

• alt="雲端儲存服務圖示"
• alt="24 小時客戶服務圖示"
• （裝飾性圖示可使用 alt=""）

Alt Text 長度建議

多長算合適？一般建議：

• 簡單圖片：5–10 個詞，描述主要元素即可
• 複雜照片：10–20 個詞，描述主體、背景、重要細節
• 資訊圖表：可以更長，包含關鍵數據，但超過 150 個字元的內容建議改放在頁面正文中，alt text 僅概述
• 螢幕閱讀器通常會在 150 個字元左右截斷 alt text，設計上應考量此限制

常見問題解答

Q：每張圖片都需要 alt text 嗎？
A：有實際內容意義的圖片都需要 alt text。純裝飾性圖片（背景紋理、分隔線等）應使用空的 alt=""。

Q：相同的圖片在不同頁面使用，alt text 要一樣嗎？
A：不一定。Alt text 應根據圖片在特定頁面的語境來撰寫。同一張圖片在不同頁面可能扮演不同角色，alt text 也應有所調整。

Q：我的 CMS（如 WordPress）讓我填「Alt Text」和「Caption」，有何不同？
A：Alt text 是 HTML 屬性，對螢幕閱讀器和搜尋引擎可見，但不顯示給一般用戶。Caption（圖說）是顯示在圖片下方的文字說明，對所有用戶可見。兩者各有功能，都應填寫。

結語

Alt text 是一個小小的 HTML 屬性，但它所承載的功能相當重要：幫助搜尋引擎理解圖片、協助視障用戶使用網站、在圖片載入失敗時提供後備資訊。好的 alt text 不是關鍵字堆砌，而是對圖片內容的誠實、簡潔描述。建立一個良好的 alt text 撰寫習慣，是最性價比最高的 SEO 工作之一。

在瀏覽器裡直接完成，檔案不會離開你的電腦：圖片工具