圖片 ALT 是什麼？SEO 新手一定要懂的寫法規則、範例與常見錯誤

在做 SEO 時，很多人會把重心放在標題、關鍵字與內容結構，卻忽略了圖片其實也是搜尋引擎理解頁面的重要線索。
其中最容易被忽略、但影響力不小的，就是 圖片 ALT（Alt Text，替代文字）。

圖片 ALT 寫得好，不只能幫助搜尋引擎理解圖片內容，還能提升圖片搜尋曝光、改善網站無障礙體驗。
這篇文章會用新手也能直接套用的方式，帶你一次搞懂圖片 ALT 的用途、寫法原則與實務範例。

圖片ALT 的角色：搜尋引擎讀不懂圖片，但讀得懂文字

ALT 是什麼？為什麼對 SEO 與無障礙這麼重要

圖片 ALT（Alternative Text，替代文字）是一段放在 <img> 標籤中的文字，用來描述圖片內容，主要用途包含：

 

SEO：幫助搜尋引擎理解圖片與頁面主題

搜尋引擎無法真正「看懂」圖片內容，只能透過文字線索來判斷圖片在講什麼。
圖片 ALT 就是最直接的說明來源，能幫助 Google 理解：

• 這張圖片的主題是什麼

• 圖片與整個頁面內容是否高度相關

• 是否適合出現在圖片搜尋或相關關鍵字結果中

 

ALT 寫得清楚，能強化圖片與頁面主題的一致性，進而提升圖片搜尋曝光與整體 SEO 表現。

 

無障礙：讓螢幕閱讀器正確轉述圖片內容

對視障或使用螢幕閱讀器的使用者來說，圖片本身是「看不到」的。
ALT 就是他們理解圖片內容的唯一方式。

 

螢幕閱讀器會直接朗讀 ALT 文字，作為圖片的完整說明。
如果 ALT 空白、亂寫，甚至只塞關鍵字，使用者就無法理解圖片在傳達什麼資訊，無障礙體驗會大打折扣。

 

替代資訊：圖片載入失敗時，避免內容中斷

當圖片因網路不穩、連結錯誤或瀏覽器限制而無法顯示時，ALT 會作為替代文字出現，讓讀者至少「知道這裡原本要說什麼」。

這對教學內容、產品介紹或重點示意圖來說特別重要，能避免資訊出現斷層。

 

搜尋引擎與輔助工具如何使用圖片 ALT？

從實務角度來看：

• Google 會透過 ALT 判斷圖片與頁面主題的關聯性，作為圖片理解與分類的重要依據

• 螢幕閱讀器 會直接朗讀 ALT，把它當作圖片本身的文字說明

 

也因此，如果 ALT 沒寫、寫錯，或只是隨便堆字，搜尋引擎與輔助工具都無法正確理解圖片在做什麼，等於白白浪費了一個重要訊號。

 

什麼情況一定要寫 ALT？什麼情況可以留空？

在實際操作時，不是「每張圖片都要硬寫一段 ALT」，而是要看圖片是否承擔資訊任務。

 

一定要寫 ALT

• 產品圖片

• 教學步驟圖、流程圖

• 數據圖表、比較圖

• 情境照片（與內容理解有關）

這類圖片如果沒有 ALT，會直接影響 SEO 與使用者理解。

 

可以留空 alt=""

• 純裝飾性圖片

• 背景線條、花紋

• 分隔用圖形、視覺點綴 icon

 

這類圖片本身不承載資訊，建議使用 alt=""，讓螢幕閱讀器略過，避免干擾使用者閱讀流程。

一步一步寫好圖片ALT：從判斷意圖到下筆

判斷圖片用途與頁面目標

在寫圖片 ALT 前，先問自己三個問題：

• 這張圖是否與文章主題高度相關？

• 它是用來「教學」、「說明」、「營造情境」還是只是裝飾？

• 如果看不到圖片，使用者最需要知道什麼資訊？

 

圖片 ALT 描述的不是「圖片長什麼樣子」，而是「這張圖對使用者有什麼幫助」。

 

撰寫原則與字數建議

撰寫圖片 ALT 時，請掌握以下原則：

• 具體、清楚、可理解

• 避免關鍵字堆砌

• 優先描述對使用者最有用的資訊

• 不重複圖片旁邊已明確說明的文字

 

字數建議以 80–125 字元內 為常見範圍，但不必硬卡字數，清楚最重要。

 

好壞示例對照

錯誤示例：

ALT="圖片ALT, SEO, 圖片ALT SEO, 關鍵字"

問題：毫無描述性，只是為了塞關鍵字。

正確示例：

ALT="手持濾杯進行手沖咖啡教學，採螺旋方式注水至 200ml"

優點：描述動作、情境與重點，搜尋引擎與使用者都看得懂。

 

電商網站 vs 內容型網站的寫法差異

電商圖片 ALT 建議

• 品牌名稱

• 產品型號

• 關鍵規格

• 差異特徵（顏色、容量、尺寸）

範例：

ALT="XYZ 不鏽鋼保溫瓶 500ml，霧黑色，雙層真空設計"

 

內容型網站圖片 ALT 建議

• 場景

• 人物或物件

• 動作或重點資訊

範例：

ALT="SEO 教學示意圖，說明圖片 ALT 與搜尋引擎關係"

 

裝飾性圖片的正確處理方式

如果圖片僅為視覺裝飾，建議：

• 使用 alt=""

• 或以 CSS background-image 呈現

• 必要時加上 role="presentation"

這樣可以避免螢幕閱讀器被不必要資訊干擾。

 

ALT 與其他屬性的分工

• ALT：給搜尋引擎與輔助工具讀

• caption（圖說）：給使用者看的補充說明

• title：非必要，不應取代 ALT

• aria-label / aria-describedby：特定無障礙情境輔助使用

 

各司其職，不要混用。

 

流程與團隊協作建議

實務上建議：

• 內容人員：定義圖片「要傳遞的資訊」

• 設計人員：標註圖片用途（資訊／裝飾）

• 前端工程師：確保 ALT 正確輸出

 

並將「圖片 ALT 檢查」納入網站上線前的基本清單。

Alt Text 怎麼寫才好？掌握原則＋實際範例一次看懂

寫圖片 Alt Text 時，可以把自己想像成在「用一句話，對看不到圖片的人解釋這張圖在做什麼」。
只要抓住「具體、清楚、有用」三個原則，其實不難。

以下是幾個實務上最常見的情境與範例，幫助你快速上手。

 

教學／說明型圖片

圖片情境：文章在教「怎麼撰寫圖片 ALT」

• ❌ 不建議
  alt="ALT 教學"（太籠統，看不出圖片在幹嘛）

• ✅ 建議寫法
  alt="示意圖說明圖片 ALT 撰寫方式，強調描述圖片重點而非堆疊關鍵字"

愛思伯小提醒：

重點在於：說清楚「這張圖在輔助說明什麼概念」。

 

情境照片／人物動作

圖片情境：行銷人員在電腦前分析數據

• ❌ 不建議
  alt="行銷圖片"、alt="工作照片"

• ✅ 建議寫法
  alt="行銷人員在電腦前分析網站 SEO 成效數據畫面"

 

愛思伯小提醒：

情境＋動作＋關鍵資訊，比單純分類圖片更有價值。

 

電商產品圖片

圖片情境：商品展示照

• ❌ 不建議
  alt="耳機"、alt="產品圖片"

• ✅ 建議寫法
  alt="Sony WH-1000XM5 無線降噪耳機，黑色款，側邊外觀"

 

愛思伯小提醒：
電商圖片 ALT 建議包含：品牌＋品名／型號＋可辨識特徵，有助搜尋引擎與使用者理解。

 

數據圖表／流程圖

圖片情境：SEO 流程示意圖

• ❌ 不建議
  alt="流程圖"

• ✅ 建議寫法
  alt="SEO 優化流程圖，依序說明關鍵字研究、內容製作與成效追蹤"

 

愛思伯小提醒：
不用把圖表所有細節都寫進 ALT，但要讓人知道「這張圖在說哪個重點」。

 

愛思伯的快速檢查原則

在送出 Alt Text 前，可以快速自問一句：

如果我只聽到這段 ALT，不看圖片，能不能大概想像出圖片在做什麼？

• 可以 → 這段 ALT 大致是合格的

• 不行 → 多半寫得太籠統，或只是塞關鍵字

 

只要記得，Alt Text 的目的是「幫助理解」，而不是「硬做 SEO」，寫法自然就會越來越到位。

圖片 ALT 操作：HTML／WordPress／常見 CMS 圖片 ALT 要怎麼設定？

了解圖片 ALT 怎麼寫之後，接下來的重點就是：
實際要在哪裡設定？
其實不管你是自己寫 HTML、用 WordPress，還是使用各種 CMS 平台，概念都很一致，只是操作介面不同而已。

下面依照最常見的三種情境，帶你快速看一次。

 

HTML：直接在 <img> 標籤中設定

如果你是直接寫 HTML，圖片 ALT 就寫在 <img> 標籤裡的 alt 屬性中。

<img src="alt-text-example.webp" alt="Alt Text 寫法示意，說明如何用一句話描述圖片重點">

這種方式最單純，也最不容易漏掉。
只要記得一件事：每一張有資訊價值的圖片，都要確認有沒有寫 alt，不要留空或直接省略屬性。

 

WordPress 等自由度高的 CMS 系統

在 WordPress 這類 CMS 中，其實已經幫你把 ALT 欄位準備好了，只是很多人會忽略。

常見位置包括：

• 上傳圖片後的「媒體庫」

• 文章編輯器右側的「圖片設定」

• 圖片詳細資料中的「替代文字（Alt Text）」欄位

最省時間、也最不容易忘記的做法是：

每次上傳圖片時，就順手補上 ALT，一張一張處理。

這比文章寫完後再回頭檢查所有圖片有效率很多，也比較不會漏掉重要圖片。

 

其他 CMS（Shopify、Wix、Squarespace 等）

不管是電商平台或視覺型 CMS，幾乎都支援圖片 ALT 設定，只是名稱與位置略有不同。

通常會出現在：

• 圖片設定（Image settings）

• 圖片詳細資訊

• SEO 或無障礙相關欄位

 

雖然操作流程不完全一樣，但核心原則是一致的：

只要是「有意義、會影響內容理解的圖片」，就一定要填寫可讀的替代文字。

尤其是電商商品圖、服務介紹圖、教學示意圖，這些圖片的 ALT 設定，對 SEO 與使用者理解都特別重要。

 

小提醒：別讓 ALT 成為「事後補救」

很多網站圖片 ALT 問題，不是因為不會寫，而是因為流程上沒被納入習慣。

建議你可以把「圖片 ALT 檢查」列為以下流程的一部分：

• 文章發佈前檢查清單

• 商品上架前必填項目

• 網站上線前的 SEO 基礎檢核

 

只要流程一建立，圖片 ALT 就不再是麻煩事，而是順手完成的基本設定。

圖片 ALT 常見 FAQ

Q：每一張圖片都一定要寫 ALT 嗎？

不一定。
有資訊價值、會影響內容理解的圖片一定要寫 ALT，純裝飾用途的圖片（例如背景圖、分隔線）則建議使用 alt=""，讓螢幕閱讀器略過，避免干擾使用者。

 

Q：ALT 不寫會對 SEO 造成什麼影響？

ALT 不寫不一定會「被懲罰」，但會錯失重要加分機會。
搜尋引擎無法正確理解圖片內容，圖片搜尋曝光降低，頁面主題關聯性也會變弱，長期來看會影響整體 SEO 表現。

 

Q：ALT 可以直接放關鍵字嗎？

可以，但前提是自然、符合圖片內容。
如果只是為了 SEO 硬塞關鍵字，反而會降低可讀性，對搜尋引擎與無障礙體驗都沒有幫助。

 

Q：一張圖片的 ALT 最適合寫多長？

沒有硬性字數限制。
原則是「用一句話清楚說明圖片重點」，多數情況 80～125 字元內就足夠，避免寫成一整段文章。

 

Q：同一張圖片在不同頁面，可以用一樣的 ALT 嗎？

視情況而定。
如果圖片在不同頁面扮演不同角色（例如一頁是教學，一頁是案例），ALT 應該依頁面目的調整，而不是全部複製貼上。

 

Q：電商產品圖片的 ALT 有什麼寫作重點？

建議至少包含以下資訊：

• 品牌名稱

• 產品名稱或型號

• 可辨識的規格或特徵（顏色、尺寸）

這樣不只對 SEO 有幫助，也能提升圖片搜尋與商品理解度。

 

Q：圖片 ALT 會直接影響搜尋排名嗎？

ALT 不是單一決定排名的因素，但它是圖片 SEO 與頁面理解的重要訊號之一。
在競爭激烈的關鍵字環境中，ALT 寫得好，常常就是拉開差距的細節。

---

圖片 ALT 是一個「看似小細節，實際影響很長遠」的 SEO 基本功。
只要從圖片的實際用途出發，用清楚、具體的文字描述，就能同時提升搜尋引擎理解度與使用者體驗。

如果你不確定目前網站的圖片 ALT 是否寫對、是否影響整體排名，其實交給專業團隊會更有效率。
愛思伯 SEO 服務能協助你檢視圖片、內容與技術面細節，讓網站在搜尋結果中真正被看見。
把這些基礎打好，SEO 成效自然會慢慢累積！