網站圖片除了要清楚、檔案大小適當之外，HTML 中的 alt 屬性也非常重要。
對一般使用者來說，圖片多半只是畫面中的一個元素；但在圖片無法正常載入、或使用螢幕閱讀器瀏覽內容時，ALT 文字就會成為理解圖片資訊的重要依據。搜尋引擎也會一併參考 ALT、圖片周圍文字與頁面主題，幫助判斷圖片內容與用途。
不過，ALT 不是拿來堆疊 SEO 關鍵字的欄位，也不是每一張圖片都要寫得很長。
這篇文章會完整說明：
- 圖片 ALT 是什麼？
- HTML 的 alt attribute 怎麼寫？
- ALT 對 SEO 有什麼作用？
- ALT 和 Title Attribute 有什麼不同？
- 哪些圖片需要 ALT？
- 什麼情況應該使用
alt=""？ - ALT 怎麼寫才自然又正確？
- ALT、Label 與語意化 HTML 有什麼關係？
ALT 是什麼？
ALT 是 HTML 圖片元素中的 Alternative Text（替代文字）。
最基本的圖片 HTML 可以寫成：
<img src="website-design.jpg" alt="企業網站首頁設計畫面">其中：
src：指定圖片檔案的位置。alt：描述圖片在目前頁面中所代表的資訊。
如果圖片因為網路、檔案路徑或其他原因無法正常顯示，ALT 可以提供替代資訊；使用螢幕閱讀器等輔助科技時，也可以透過 ALT 理解圖片所傳達的內容。
搜尋引擎同樣會利用 ALT 與圖片周圍的文字、頁面主題等資訊，一起理解圖片內容。
ALT 的第一個目的，是準確表達圖片在頁面中的意義，而不是單純放 SEO 關鍵字。
HTML 的 alt attribute 怎麼寫？
ALT 是 <img> 元素中的一個 attribute（屬性）。
例如：
<img
src="responsive-web-design.jpg"
alt="桌機、平板與手機的 RWD 響應式網頁設計示意"
>如果圖片本身在文章中是在說明 RWD，那麼 ALT 就應該描述圖片實際呈現的內容，而不是寫成：
alt="RWD 網頁設計 SEO 網站設計 台北網頁設計"後者並沒有真正描述圖片，而是在堆疊關鍵字。
ALT 對 Accessibility 有什麼作用？
ALT 不只是 SEO 設定，它也是網站無障礙與語意結構的重要一部分。
對看得到圖片的使用者來說，一張圖片的意思通常很直覺；但對使用螢幕閱讀器的人來說，如果圖片沒有適當的替代文字，就可能無法取得同等的資訊。
例如一張圖表內容是：
桌機版轉換率 4.2%，手機版轉換率 2.8%
如果 ALT 只寫：
alt="圖表"實際提供的資訊就會很有限。
比較合理的方式可能是：
alt="桌機版轉換率 4.2%，手機版轉換率 2.8% 的比較圖表"不過，如果圖表中的資料已經完整寫在旁邊文字或表格中，就不一定需要把所有資訊再次塞進 ALT。這時候 ALT 只要保留足夠的概念提示即可。
ALT 對圖片 SEO 有什麼影響？
搜尋引擎無法只依照圖片檔案本身，就完全理解圖片在目前文章中的用途。
因此通常會綜合：
- 圖片本身
- ALT 文字
- 圖片附近的正文
- 頁面標題與主題
- 圖片檔名
- 網站整體內容關聯性
來判斷圖片與頁面的內容。
所以 ALT 的 SEO 價值不是：
「放越多關鍵字，排名就越好。」
而是：
讓搜尋引擎更清楚知道圖片是什麼，以及它為什麼出現在這個頁面。
如果圖片本身確實與目標關鍵字相關，那麼關鍵字自然出現在 ALT 裡沒有問題。
但如果圖片只是辦公室照片，就不應該為了排名硬寫成「SEO 網頁設計公司推薦」。
ALT 與 Title Attribute 有什麼不同？
這是一個同時包含 alt 與 title 的圖片 HTML：
<img
src="image.jpg"
alt="企業網站首頁設計"
title="iDeaweb 網站設計案例"
>兩者的功能不同。
| 屬性 | 主要用途 | 是否建議每張圖片都使用 |
|---|---|---|
| ALT | 提供圖片替代資訊、輔助科技與搜尋引擎理解 | 依圖片用途決定 |
| Title | 提供額外提示資訊，部分情境下可能顯示 Tooltip | 不需要 |
title 不是圖片 SEO 的必要設定，也不應該為了 SEO 而替每一張圖片重複加入。
如果 Title 所提供的資訊真的很重要，通常更適合直接寫在正常可見的頁面文字中，而不是只讓使用滑鼠的人在 Hover 時才看到。
ALT、圖片標題、檔名與 Caption 有什麼不同？
網站後台經常同時出現很多圖片相關欄位，因此很容易混淆。
| 項目 | 用途 |
|---|---|
| 圖片檔名 | 圖片檔案本身的名稱，例如 responsive-web-design.jpg |
| ALT | 描述圖片在目前內容中的意義 |
| Title Attribute | HTML 元素可選擇的額外提示資訊 |
| Caption | 直接顯示在圖片附近、給一般使用者閱讀的圖片說明 |
這些欄位不是把同一組 SEO 關鍵字全部重複填上去就完成了。
每一個欄位都有不同目的，重點在於它們是否各自對應到正確的使用情境。
哪些圖片應該寫 ALT？
如果圖片本身傳達文章或頁面中的重要資訊，通常就應該提供合適的 ALT。
例如：
- 產品照片
- 網站功能示意
- 流程圖
- 圖表
- 作品案例
- 介面操作截圖
- 具有資訊意義的 Icon
但 ALT 不需要把圖片裡看得到的所有細節全部寫出來。
更實際的判斷方式是：
如果使用者看不到這張圖片，他需要知道什麼資訊？
這通常就是撰寫 ALT 很好的判斷方式。
什麼圖片應該使用 alt=””？
不是每一張圖片都需要有文字內容的 ALT。
如果圖片純粹只是裝飾，例如：
- 背景紋理
- 沒有資訊意義的裝飾圖形
- 只是為了排版增加的視覺元素
- 內容已經完整由旁邊文字表達的重複性圖片
就可以視情況使用空 ALT：
<img src="decoration.png" alt="">空的 alt="" 和完全沒有 ALT 並不是同一件事。
alt="" 表達的是：
「這張圖片沒有需要額外傳達的替代內容。」
如果純裝飾圖片可以直接由 CSS Background 等方式呈現，也可以考慮不把它當作具有內容意義的 HTML 圖片元素。
圖片 ALT 怎麼寫才正確？
ALT 沒有一套所有圖片都適用的固定公式，但可以掌握幾個原則。
1. 描述圖片真正的內容
例如：
alt="桌機與手機版企業網站首頁比較"會比：
alt="圖片1"更有意義。
2. 考慮圖片在目前頁面的用途
同一張照片出現在不同文章裡，ALT 不一定必須完全相同。
因為 ALT 應該反映圖片在當下內容中的功能與意義。
3. 關鍵字自然出現即可
如果文章正在介紹「圖片 SEO」，而圖片本身就是 ALT 設定範例，那麼 ALT 中出現「圖片 ALT」是自然的。
但不要寫成：
alt="圖片 SEO ALT SEO 圖片排名 Google SEO 網站 SEO"4. 不需要刻意寫「圖片」、「照片」
多數情況下，不需要每一個 ALT 都以「一張……的圖片」開始。
直接描述內容通常更簡潔，也更符合閱讀習慣。
5. 保持必要且有意義的資訊
ALT 不是越長越好。
應該依圖片實際用途寫到足以理解即可，而不是把整段文章複製進去。
ALT 關鍵字堆疊為什麼不好？
早期 SEO 實務中，常有人把 ALT 當作額外的關鍵字欄位。
例如：
alt="台北網頁設計 網頁設計公司 SEO公司 RWD網站設計"這樣的內容對真正看不到圖片的使用者幾乎沒有幫助，也沒有準確描述圖片。
比較好的方式是依圖片本身，例如：
alt="企業網站桌機版與手機版 RWD 畫面比較"如果「RWD」剛好與圖片內容以及頁面主題相關，就可以自然存在於描述中。
ALT、Label 與語意化 HTML 有什麼關係？
ALT 和 label 都可以幫助網站提供更清楚的語意資訊，但兩者不是同一種 HTML 功能。
alt 主要用於圖片的替代文字：
<img src="product.jpg" alt="黑色無線耳機">label 則常用於表單欄位，告訴使用者這個輸入欄位代表什麼：
<label for="email">電子郵件</label>
<input id="email" type="email">兩者共同的概念是：
不要只依賴畫面看起來像什麼，也要透過正確的 HTML 結構讓瀏覽器、輔助科技與其他系統理解元素真正的用途。
這也是語意化 HTML 的重要精神。
圖片 ALT 常見錯誤
所有圖片都使用相同 ALT
如果一個產品頁有五張不同角度的照片，卻全部使用完全相同的 ALT，就沒有充分描述圖片差異。
ALT 直接使用圖片檔名
例如：
alt="IMG_2948.jpg"通常無法提供真正有用的替代資訊。
每張圖片都塞入 SEO 關鍵字
ALT 應該描述圖片，而不是變成隱藏式的 Keyword List。
裝飾性圖片也寫很長的 ALT
這反而可能增加使用輔助科技時不必要的資訊負擔。
重要圖片完全沒有 ALT
如果圖片本身包含產品、流程、資訊圖表或重要內容，卻沒有適當替代文字，就可能讓部分使用者與搜尋引擎失去理解圖片內容的重要線索。
圖片 ALT 設定快速檢查
| 問題 | 建議 |
|---|---|
| 圖片有資訊意義嗎？ | 有的話，提供適當 ALT |
| 只是裝飾圖片？ | 可視情況使用 alt="" |
| ALT 是否真的描述圖片？ | 避免只寫 SEO 關鍵字 |
| 一定需要 Title Attribute 嗎？ | 不需要 |
| 關鍵字可以放 ALT 嗎？ | 與圖片內容相關時自然出現即可 |
| 每張圖都要寫很長嗎？ | 不需要，以能理解圖片用途為原則 |
圖片 ALT 常見問題 FAQ
ALT 是什麼？
ALT 是圖片的替代文字，用來描述圖片在頁面中的內容或用途。當圖片無法顯示、使用者透過螢幕閱讀器瀏覽內容，或搜尋引擎理解圖片時，ALT 都可能提供重要資訊。
ALT 對 SEO 有幫助嗎？
ALT 可以協助搜尋引擎理解圖片內容及其與頁面主題的關係，但不應把 ALT 當作堆疊 SEO 關鍵字的欄位。
每一張圖片都一定要寫 ALT 嗎？
不是。具有內容或資訊意義的圖片應提供合適的 ALT；純裝飾性圖片則可以依用途使用空的 alt=""。
ALT 和 Title 有什麼不同？
ALT 是圖片的替代文字，而 Title Attribute 是可選的附加提示資訊。圖片不需要為了 SEO 而每張都加入 Title。
ALT 可以放 SEO 關鍵字嗎？
可以在圖片內容本身與關鍵字真正相關時自然使用，但不應刻意加入與圖片無關的關鍵字或進行重複堆疊。
ALT 越長越好嗎？
不是。ALT 應該提供足以理解圖片用途的資訊，重點是準確與有意義，而不是追求字數。
結語
圖片 ALT 看似只是一個簡單的 HTML Attribute，但它同時牽涉到圖片內容理解、網站 Accessibility、語意結構與圖片 SEO。
真正好的 ALT 並不是把最多 SEO 關鍵字放進去，而是回答：
「如果使用者看不到這張圖片，他需要知道什麼？」
當 ALT 能準確表達圖片在目前頁面中的用途時，不只對使用者比較友善，也能讓搜尋引擎更清楚理解圖片與頁面內容之間的關係。
若您正在規劃企業官網建置、網站改版、SEO 架構或 AI Search 內容策略，可進一步與 iDeaweb 艾迪網頁設計討論適合的網站與內容成長方向。