alt 文字該怎麼寫？2026 年 SEO、AI 搜尋、無障礙一次搞定
TL;DR
- alt 文字（替代文字）是給圖片寫的一段描述，寫在 HTML 的
<img alt="...">屬性裡。 - Google 圖片搜尋、ChatGPT / Perplexity / Claude 等 AI 搜尋、視障讀屏工具都靠它理解圖片內容——三邊都繞不開。
- 2026 年 歐盟 EAA 無障礙法規上路後，B2C 網站沒有 alt 不只是 SEO 扣分，可能變成合規風險。
- 好的 alt = 具體描述圖片內容 + 15 到 25 字自然語句 + 不堆砌關鍵字；純裝飾圖反而該留空（
alt=""）。 - 多數建站工具根本沒讓使用者填 alt，最後全站就是
alt=""或檔名，這篇最後帶你看怎麼挑有這個功能的平台。
一、什麼是 alt 文字
打開任何網頁原始碼，你會看到每張圖片大概長這樣：
<img src="/images/workshop-interior.jpg" alt="陽光穿過木頭窗框的工作室一角，長桌上擺放著手工香氛蠟燭">
alt 的全名是 alternate text，中文叫「替代文字」。它的本意很簡單：當圖片顯示不出來，就用這段文字代替。
但在 2026 年的今天，alt 的意義遠遠超過「圖片壞掉時的備援」。它是：
- 搜尋引擎理解你網站上每張圖片的唯一方式
- AI 爬蟲判斷要不要引用你內容的重要訊號
- 視障訪客「看見」你網站的唯一管道
短短 15 個字，同時承擔這三個角色。
二、Google 為什麼在乎 alt
Google 的圖片搜尋（Google Images）長年是全球第二大搜尋引擎，僅次於 Google 本身的網頁搜尋。對很多產業——尤其是電商、作品集、食譜、室內設計、美容——圖片搜尋是真實的流量來源。
Google 怎麼「讀」圖片
雖然 Google 近年有 vision AI 能直接看圖辨識內容，但實際排名演算法上，alt 依然是最強訊號。原因很直接：
- 文字比像素便宜：Google 爬全網需要快速，讀一段 20 字的 alt 比跑一次 vision 模型快上百倍
- Alt 是人標註的「正確答案」：Google 認為網站主自己寫的描述通常比 AI 猜的準
- 語意脈絡完整：alt 會連同周圍的 H1、段落一起被讀取，構成圖片的完整語意
結果就是：沒寫 alt 的圖片，在 Google 圖片搜尋裡等於不存在。
實際案例：一個作品集網站
假設你是婚禮攝影師，上傳 100 張作品。
- 版本 A：
alt=""或檔名（IMG_0023.jpg）——Google 看到的是「攝影作品集網站，有 100 張無標籤的圖」 - 版本 B：
alt="新娘捧花特寫——白玫瑰與尤加利葉，陽明山山頂婚禮"——Google 看到的是「專業婚攝網站，擅長戶外婚禮，特別是陽明山、花材使用白玫瑰與尤加利葉」
同一個網站、同樣的照片，版本 B 能接到「陽明山戶外婚攝」、「尤加利葉捧花」這類長尾關鍵字的流量；版本 A 則完全沒機會。
三、2026 更關鍵的理由：AI 搜尋
這兩年搜尋行為發生了結構性變化。2025 年底的調查顯示，約 40% 的 Z 世代使用者第一選擇不是 Google，而是 ChatGPT、Perplexity 或社群平台。網站被引用的邏輯也跟著變。
AI 搜尋引擎怎麼看圖片
ChatGPT、Perplexity、Gemini、Claude 這類 AI 搜尋引擎在回答使用者問題時，會抓取來源網站的內容。它們處理圖片的方式跟 Google 有微妙差異：
- 文字優先：AI 引擎為了處理速度與成本，絕大多數情況只讀 alt 與周邊文字，不會對每張圖跑 vision
- Vision 是補強、不是主力：即使有 vision 能力（GPT-4V、Claude Vision），也通常是針對使用者直接上傳的圖，而非爬蟲讀網站的圖
- alt 是唯一引用依據：當使用者問「推薦台北下午茶」，AI 要決定引用誰家的照片，依據幾乎全在 alt 文字裡
換句話說：AI 時代，alt 不再只是 SEO 分數，而是你能不能被 AI 推薦的基本門票。
GEO 策略的具體實踐
GEO（Generative Engine Optimization，生成式搜尋優化）的核心原則之一就是「讓 AI 容易理解你的內容」。alt 文字是這個原則最便宜的落實方式：
- 一張商品圖的 alt 寫成「薰衣草手工皂，冷製法 45 天熟成，使用法國普羅旺斯薰衣草精油」，AI 在回答「手工皂推薦」時引用你的機率，比寫「薰衣草皂」高好幾倍
- 一張 Before/After 對比圖的 alt 寫成「40 歲女性，6 次 Q-switched 雷射除斑療程後，顴骨處斑點減少約 70%」，AI 在回答醫美相關問題時會直接看到具體數據
這些都不需要額外投資，只是把本來就該寫的 alt 寫完整。
四、無障礙與法律義務：2026 年你應該知道的事
歐盟 EAA 2025 已上路
歐盟《無障礙法》（European Accessibility Act, EAA）已於 2025 年 6 月 28 日全面生效。這條法規要求所有在歐盟銷售商品或服務的 B2C 數位產品都要符合 WCAG 2.1 AA 級無障礙標準——alt 文字是其中最基礎的一條。
對台灣品牌的影響：
- 做跨境電商的商家（Shopee EU、自建站銷歐）直接適用
- 官網有英文版、客戶有歐盟使用者的服務品牌，建議比照辦理降低未來風險
- 主機或金流商若有歐盟客戶，他們的合規稽核可能回推到你
台灣的角度
- 《身心障礙者權益保障法》要求政府機關網站符合無障礙標準（公部門採購的軟體供應商要注意）
- 民間雖無直接罰則，但Apple、Google Play 的 App 審查越來越嚴格，無障礙做不好可能下架
- 大型平台（PChome、Momo、蝦皮）已開始要求上架商家的圖片具備 alt
短期內台灣民間小商家不會被罰錢，但把 alt 做好，未來做什麼都不會絆住腳。
視障使用者的實際體驗
讀屏軟體（NVDA、JAWS、VoiceOver）遇到 <img> 時的處理：
- 有 alt：直接念出 alt 內容，使用者繼續下一個元素
- alt=""：跳過這張圖，繼續念下一段（這叫「裝飾性圖片」的正確處理）
- 沒寫 alt：不同軟體行為不同——有些念檔名（「IMG 空格 ZERO ZERO 二三點 JPG」）、有些念 "image"、有些念 URL
第三種是最糟的體驗，比刻意留空還糟。
五、好的 alt 怎麼寫：三個核心原則
原則 1：描述圖片的「內容」，不是「這是什麼」
- ❌ 壞：「產品圖」、「標誌」、「橫幅」、「我們的照片」
- ✅ 好：「深棕色皮革筆記本放在木紋桌上，旁邊有一杯冒煙的拿鐵」
壞版本說的是「圖片的類型」，好版本說的是「圖片裡有什麼」。搜尋引擎跟讀屏都關心後者。
原則 2：15 到 25 字的自然句子
- 太短：「拿鐵」——沒資訊量
- 太長：「這是一張由 Canon EOS R5 拍攝的深棕色義大利小牛皮手工裝訂筆記本產品形象照，使用自然光拍攝⋯⋯」——讀屏軟體會念到使用者想跳出
- 剛好：「深棕色皮革筆記本與熱拿鐵在木紋桌上，自然光從左側灑入」
短到能讓 Google 秒讀、長到能讓人腦想像出畫面——大約 15-25 字。
原則 3：該留空就留空
純裝飾性圖片不要寫 alt。例如：
- 分隔線、裝飾圖案
- 純粹美化的背景紋理
- 重複的 icon（旁邊已經有文字）
這些要寫成 alt=""（空字串），讀屏會直接跳過，不會干擾閱讀。
千萬別寫「裝飾圖片」、「空白」、「無」之類——這反而會被念出來。
六、6 種常見圖片的 alt 策略
1. 產品圖
模板：「[產品名]，[關鍵屬性]，[使用情境或細節]」
- 例：「法國布列塔尼海鹽焦糖牛奶糖，手工拉糖工法，12 顆裝木盒包裝」
- 例：「羊毛混紡貝蕾帽，軍綠色，側面視角，適合秋冬配件」
含產品名稱就夠基本，能加上關鍵屬性或情境更強。
2. 人物 / 團隊照
模板：「[姓名]，[職稱 / 身份]，[可選：場景]」
- 例：「張明志醫師，整形外科主治，坐在診間諮詢椅上」
- 例：「小林惠子，日本語講師，在教室手寫漢字筆順」
姓名是必填的識別性描述。
3. 流程 / 資訊圖表（infographic）
這類圖最需要 alt，因為圖本身就是資訊，看不到等於整段訊息消失。
- 模板：把圖裡的文字重點整個寫進 alt
- 例：「四步驟預約流程：選擇服務項目、挑選時段、填寫聯絡資料、收到確認信」
如果流程複雜，可以寫一句 alt 概述 + 圖下方一段完整文字說明。
4. Before / After 對比
模板：「[對象 / 時間點]，[狀態]」× 兩張
- Before alt：「30 歲女性，膝上 3 公分長度裙，量身製作前」
- After alt：「同位女性，三次修改後，膝上 2 公分完美貼身」
別只寫「Before」「After」——對 SEO 跟 AI 等於零資訊。
5. Hero / 背景裝飾圖
這種圖通常佔螢幕一半以上、強調氛圍。建議做法：
- 如果用
<img>標籤 → 寫 alt 描述場景 - 如果用 CSS
background-image→ 無法寫 alt，改在<section>加aria-label
例：「咖啡廳清晨的內部空間，陽光穿過窗戶灑在木桌與綠植上」
6. Logo 與 icon
- 主 Logo：
alt="{品牌名}"（例：alt="AHHA"） - 純裝飾 icon（旁邊已有文字）：
alt="" - 功能性 icon（例：購物車按鈕，無文字）：
alt="購物車"
七、4 個最常被忽略的錯誤
錯誤 1：整站 alt 全空白
最常見。用建站工具或 WordPress 的人，匯入大量圖片時根本沒停下來填 alt，一次上傳 200 張，全部 alt=""。
影響：全站圖片在 Google Images 搜不到；讀屏使用者整頁跳過。
錯誤 2：把檔名當 alt
alt="IMG_8293.jpg"、alt="Screenshot 2025-03-14"——某些程式會自動帶檔名，但這對搜尋引擎沒意義。
快速修法：凡看到 alt 包含 .jpg、.png、IMG_、Screenshot 的都是待修正。
錯誤 3：關鍵字堆砌（keyword stuffing）
- ❌ 壞：
alt="手工皂 天然手工皂 台灣手工皂 薰衣草手工皂 有機手工皂 最佳手工皂" - 這種寫法 Google 2020 年後會降權
好的 alt 是自然句子，關鍵字自然出現 1-2 次即可。
錯誤 4：重要資訊只有圖
常見於公告圖、促銷海報、數據圖表——整張圖裡的文字沒有另外寫成 HTML 文字，只靠圖片。
- 讀屏使用者完全讀不到
- Google 對圖片內文字的 OCR 不穩定，可能讀錯、可能讀不到
- 行動網路慢的訪客，圖載入前什麼都看不到
修法：重要資訊既放圖、也在旁邊或下方放對應的 HTML 文字。
八、怎麼檢查你的網站 alt 狀態
三個免費工具：
- Chrome 開發者工具：按 F12 → Elements → 搜
alt=，一目了然 - Google Lighthouse（F12 → Lighthouse tab）：跑一次 Accessibility 分數，會列出缺 alt 的圖
- WAVE 瀏覽器擴充（webaim.org/extension）：視覺化標記無障礙問題，alt 問題最明顯
快速檢查一個頁面只需要 1 分鐘，值得每個月做一次。
九、你的建站工具幫不幫你？
前面講了這麼多，最後回到實務面：能不能做好 alt，很大程度取決於你用什麼建站工具。
現況：多數工具做得很差
- 只提供圖片上傳，沒 alt 欄位——工具根本不問你，結果就是全站
alt="" - 有 alt 欄位，但埋在三層選單裡——使用者找不到，放棄
- 有 alt 欄位但不提示——使用者以為可填可不填，全留空
- Markdown 編輯器插入圖片後不強制寫 alt——產出
這種空 alt
隨便檢查一下自己網站的圖片 alt，如果大部分都是空的，不是你的問題，是工具沒設計好。
該找具備這些特徵的平台
一個把 alt 設計認真做好的建站平台，應該具備：
- 每個圖片欄位都有對應的 alt 輸入框（Hero、About、作品集、產品圖、Before/After 都要有）
- 多語系 alt（網站有英文版時 alt 跟著翻譯）
- 封面圖、背景圖也能填 alt（很多工具只讓你填內文圖片）
- Markdown 插入圖片時強制填 alt（空白不給送出）
- 有 fallback 機制（填空白時自動用標題 / 名稱當後備，不會造成全空）
為什麼我們這樣設計
AHHA 平台在 2026 年 4 月全面補齊了 alt 支援：
- 每個內容區塊（Hero 主視覺、關於我們、作品集、團隊介紹、Before/After、產品目錄等）的圖片下方都有對應的 alt 輸入框，支援多語系
- 部落格文章 / Rich Text / 電子報的 Markdown 編輯器裡按「🖼️ 圖片」插入圖片時，強制要求填 alt 才能送出
- 部落格封面圖可獨立設定 alt，空值時自動 fallback 到文章標題
- Hero 的 CSS 背景圖自動加
aria-label讓讀屏工具讀得到 - Site Logo 自動用網站名稱當 alt
- 沒填的時候 renderer 智慧 fallback（人物圖用姓名、商品圖用商品名、菜單項用品項名），從不輸出空 alt
這不是 AHHA 特別努力，而是2026 年的建站平台本來就該做到。
十、現在可以做的三件事
- 選一張你官網最重要的圖片（首頁 Hero、最紅商品、作品集代表作），寫一句 20 字的 alt
- 用 F12 開發者工具檢查一遍，把所有
alt=""跟含檔名的 alt 都修掉 - 檢查你的建站工具是否支援 alt——不支援的話，換工具或跟客服提功能需求
alt 這件事，3 分鐘內就能開始改善，但效果會在 3-6 個月後陸續顯現在 Google 流量、AI 引用、無障礙分數上。
現在動手。
AHHA 提供 30 天免費試用、不需綁信用卡。Starter 方案 NT$5,999/年起，每個區塊圖片都內建 alt 欄位，Markdown 編輯器強制填 alt。立即試用 →
留言討論
只有會員能留言（防止垃圾訊息），留言顯示於此頁。