Alt描述是什麼？Alt Text寫法與SEO重點

Alt描述是什麼？

Alt 描述，也叫 Alt Text、替代文字，是寫在 HTML img 標籤中的 alt 屬性，用來描述圖片的內容或用途。

當圖片無法正常載入，或使用者透過螢幕閱讀器瀏覽網站時，Alt 描述就會取代圖片，幫助使用者理解原本圖片想傳達的資訊。

Alt描述的基本範例

<img src="chocolate-cake.jpg" alt="白色餐盤上的巧克力蛋糕，旁邊放著一支叉子">

這段 Alt 描述的作用，不只是告訴系統這是一張蛋糕照片，而是進一步交代圖片裡真正有意義的內容。

Alt Text 為什麼重要？

很多人把 Alt 描述當成 SEO 小細節，但實際上它同時影響三個面向：無障礙、使用者體驗、搜尋引擎理解。

1. 提升網站無障礙

對視障使用者來說，圖片本身是看不到的，他們主要依賴螢幕閱讀器理解頁面內容。
如果圖片沒有 Alt 描述，等於這部分資訊直接消失。
尤其是商品圖、操作按鈕、教學截圖、流程圖這類承載資訊的圖片，若沒有替代文字，會直接影響閱讀和操作。

2. 圖片無法顯示時仍可傳遞內容

當圖片連結失效、載入失敗，或使用者關閉圖片顯示時，Alt 描述可以補上基本資訊，不會讓畫面只剩空白。
這種情況雖然不一定常見，但一旦發生，Alt 描述就是使用者理解內容的唯一線索。

3. 幫助搜尋引擎理解圖片

搜尋引擎雖然能辨識部分圖片內容，但仍然需要文字輔助來理解圖片主題、上下文與頁面關聯。
Alt 描述寫得清楚，能幫助搜尋引擎更準確判斷圖片內容，進而提升圖片索引與整體頁面語意。

Alt描述對 SEO 有什麼幫助？

Alt 描述對 SEO 的價值，不在於塞越多關鍵字越好，而在於它能補足搜尋引擎對圖片語意的理解。

1. 幫助圖片 SEO

當圖片有明確、自然的 Alt 描述時，搜尋引擎比較容易知道這張圖和什麼主題有關。
這會影響圖片搜尋結果的理解與索引品質。
例如你的文章主題是「巧克力蛋糕食譜」，圖片也正好是完成品，那麼 Alt 描述自然寫入「巧克力蛋糕」就是合理的。

2. 強化頁面主題一致性

SEO 不只是看標題和內文，也看整個頁面的語意一致性。
如果標題、內文、圖片檔名、Alt 描述都圍繞同一主題，搜尋引擎會更容易判斷這頁在講什麼。

3. 改善使用者體驗，間接支撐 SEO

搜尋引擎越來越重視整體使用體驗。
Alt 描述雖然不是單一決定排名的關鍵，但它能補強網頁品質、可讀性與無障礙表現，這些都屬於長期 SEO 的基礎。

Alt Text 正確寫法

寫 Alt 描述時，最重要的不是「寫得多厲害」，而是「讓人一聽就懂圖片在表達什麼」。

1. 先描述圖片中真正重要的資訊

Alt 不是把畫面所有細節都列出來，而是描述這張圖片在頁面中的意義。
例如你在介紹甜點擺盤，那就要寫出擺盤相關元素；
如果只是商品頁主圖，就應優先說清楚商品本身。

不夠好：

alt="蛋糕"

較好：

alt="一塊放在白色瓷盤上的多層巧克力蛋糕，夾層塗有巧克力糖霜，外圍裹滿了巧克力碎屑，盤子右側放著一把銀色叉子。"

差別不在字數，而在資訊量。前者只講類別，後者才真正有替代效果。

2. 描述要自然、精簡、清楚

Alt 描述不需要寫成一整段說明文，但也不能短到沒有內容。
最理想的方式是用一句自然語句，把重點講清楚。
錯誤做法不是寫太短，就是寫太滿。
太短沒有資訊，太長又會讓重點模糊。

3. 可以放關鍵字，但不要硬塞

如果圖片本身和目標關鍵字有直接關係，可以自然帶入。
但前提是這個詞本來就該出現在描述裡，而不是為了 SEO 強行加入。
例如這樣可以：

alt="白色餐盤上的巧克力蛋糕，適合作為生日甜點"

但這樣不建議：

alt="巧克力蛋糕, 蛋糕推薦, 生日蛋糕, 好吃蛋糕, 巧克力甜點"

這種寫法不是替代文字，而是關鍵字堆砌，既不自然，也沒有閱讀價值。

4. 不要寫「圖片是」「照片是」

Alt 本來就是圖片的替代文字，所以通常不需要再加上「這是一張圖片」或「照片中有」這種開頭。
不建議：

alt="這是一張白色餐盤上的巧克力蛋糕照片"

建議：

alt="白色餐盤上的巧克力蛋糕，旁邊放著叉子"

重點應該放在內容本身，而不是提醒使用者這是一張圖。

Alt描述範例整理

商品圖片 Alt 範例

不夠好：

<img src="running-shoes.jpg" alt="鞋子">

較好：

<img src="running-shoes.jpg" alt="側拍白色網布運動跑鞋，放置在戶外木質長凳上，背景為模糊的綠意公園。">

這樣的寫法比較能幫助使用者理解商品樣貌，也更有利於圖片語意。

動物圖片 Alt 範例

不夠好：

<img src="cake.jpg" alt="一隻貓">

較好：

<img src="cake.jpg" alt="一隻三花貓趴在戶外的綠色草地上休息">

按鈕圖片 Alt 範例

如果圖片是功能按鈕，Alt 應描述功能，而不是外觀。
正確示例：

<input type="image" src="buy-now.png" alt="立即購買">

錯誤示例：

<input type="image" src="buy-now.png" alt="紅色按鈕">

因為使用者需要知道這個按鈕「能做什麼」，不是知道它長什麼樣。

裝飾圖片 Alt 範例

如果圖片只是裝飾，不承載資訊，應使用空 Alt。

<img src="divider.png" alt="">

這樣做的目的，是避免螢幕閱讀器把無意義的裝飾圖也讀出來，增加閱讀干擾。

<img src="bg-pattern.png" alt="">

常見錯誤與避雷重點

Alt描述常見錯誤：

1. 完全不寫 Alt

這是最基本的錯誤。
只要圖片有資訊用途，就應該提供 Alt 描述。
如果是裝飾圖，也應該明確寫成 alt=""，而不是直接省略。

2. 關鍵字堆砌

很多人會把 Alt 當成 SEO 補充欄位，於是把所有想排的字都塞進去。
這不只會讓描述失去可讀性，也會降低內容品質。

3. 寫得太模糊

像「圖片」、「產品」、「橫幅」、「蛋糕」這種寫法雖然不算完全錯，但幫助有限。
因為它只說出類別，沒有說出具體內容。

4. 把所有細節都塞進去

Alt 不是逐像素說明。
如果你把背景顏色、擺設位置、角度、光影全部寫進去，反而會讓真正重要的資訊被稀釋。

5. 用圖片取代真正該用文字呈現的內容

例如把標題、公告、價目表、按鈕文案都做成圖片，這本身就不是理想做法。
如果真的無法避免，Alt 至少要補回圖片中承載的核心文字與功能。

複雜圖片與按鈕圖片怎麼寫

複雜圖片怎麼寫 Alt？
有些圖片不是一句話就能說明清楚，例如：

• 圖表
• 流程圖
• 地圖
• 資訊圖
• 教學示意圖

這類圖片的做法，不是把所有資訊都塞進 Alt，而是分層處理。

例如：

<img src="sales-chart.png" alt="2025年四季銷售趨勢圖">
<p>圖表顯示第一季至第四季銷售額逐步成長，其中第三季增幅最明顯。</p>

這樣的做法比把一長串數據全部塞進 Alt 更清楚，也更符合閱讀邏輯。

撰寫 Alt 描述時的實用判斷法

如果你不確定這句 Alt 寫得好不好，可以直接問自己：
假設讀者完全看不到圖片，只聽得到這句描述，他能不能理解這張圖的內容或用途？
如果可以，通常方向就對了。
如果不行，就代表你可能寫得太空、太亂，或沒抓到重點。

結論