圖片 alt 替代文字完整指南：從定義、語法到 SEO 與無障礙寫法

你知道圖片 alt 是什麼嗎？在 HTML 中，alt 屬性（即圖片替代文字）不僅是為圖片添加說明，更是網頁優化、提升可及性的重要元素。那麼圖片 alt 應該怎麼寫？跟 img title 有什麼差別？如果你也有上述疑問，就讓迷圖SEO用一篇文章告訴你如何撰寫好的圖片替代文字，為網站加分吧！

快速認識圖片 alt：它是什麼、為何重要

圖片 alt 屬性代表「替代文字」（Alternative Text），是為圖片提供文字描述的 HTML 屬性。其主要目的是：

• 提供圖片說明：當圖片無法正常顯示時，替代文字會出現在圖片位置，讓使用者仍可理解原本圖片內容。
• 輔助視障者使用網頁：螢幕閱讀器會讀取替代文字，以協助視障者了解圖片內容。
• 有助於 SEO：搜尋引擎會讀取替代文字，藉此了解圖片內容，並將其納入搜尋結果。因此，適當撰寫替代文字，有助於提升網站的搜尋排名與曝光度。

然而，許多人可能會誤以為圖片 alt 是用來填寫圖片說明的欄位，並習慣填上「示意圖」等文字。但其實這些無意義的文字不僅無法幫助使用者了解圖片內容，對搜尋引擎來說也沒有實質助益。因此，我們應該避免這種誤解，並正確地撰寫圖片替代文字，才能發揮其應有的功能與價值。

Img Alt 與 Img Title 的差別與語法範例

許多網站經營者在設定圖片屬性時，常常會對 alt 與 title 感到困惑，不知道該如何區分與使用。因此，以下我們將詳細說明兩者的差異，並舉例說明，讓你能更清楚地了解其使用情境與目的。

Alt vs Title 功能比較與常見誤用

語法示例：正確寫法與不建議寫法

正確寫法： 目標是用簡潔、具體的文字描述圖片內容，就像在解釋給電話另一頭的人聽一樣。

<img src="dog-fetching.jpg" alt="一隻黃金獵犬在陽光下的草地上跳起來接網球">

不建議寫法： 以下寫法可能會導致搜尋引擎判定為垃圾內容，或對視障使用者造成干擾。

• 堆疊關鍵字（Keyword Stuffing）：

<img src="dog-fetching.jpg" alt="狗 小狗 黃金獵犬 買狗糧 寵物用品 便宜狗食">

• 贅詞開頭： 螢幕閱讀器已經會告訴使用者這是「圖片」，不需要重複描述。

<img src="dog-fetching.jpg" alt="這是一張黃金獵犬的圖片">

• 完全遺漏 alt 屬性： 這會導致螢幕閱讀器直接朗讀「檔案名稱」，使用者會聽到一長串無意義的檔名。
  

<img src="IMG_20230501_v2_final.jpg">

---

何時使用空白 alt（純裝飾圖）

當圖片僅用於裝飾，且不包含任何資訊時，可將 alt 屬性留空，讓螢幕閱讀器忽略該圖片。例如：

1. 分隔線或裝飾圖案： 網頁中的花紋背景、分隔用的圖形線條，這些對理解內容沒有幫助。

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

2. 重複資訊的圖示（Icon）： 如果圖示旁邊已經有文字說明，且圖示本身沒有額外意義。例如一個「放大鏡」圖示旁邊已經寫著「搜尋」按鈕，此時圖示的 alt 應設為空，以免閱讀器讀成「放大鏡 搜尋」，造成聽覺上的累贅。
   HTML

<a href="/search">
  <img src="magnifying-glass.svg" alt=""> 搜尋
</a>

注意： alt=””（空值）與「不寫 alt 屬性」是完全不同的。

• alt=””：告訴機器「這張圖不重要，請跳過」。
• 不寫 alt：機器會嘗試朗讀檔案名稱（如 divider-line.png），反而造成干擾。

Alt設置好，迷圖SEO幫你的網站流量更好！

圖片包含關鍵數據或文字（海報/圖表），alt 該怎麼寫？

若圖片中包含重要資訊，建議可將重點資訊簡要寫入替代文字，並在圖片下方或周圍，以文字方式呈現詳細資訊，以確保使用輔助工具的使用者也能獲得完整的資訊。

圖片包含關鍵數據或文字（海報/圖表）

當圖片本身就是資訊的載體（Info-graphic），簡單的描述往往不足以傳達完整內容。針對這類圖片，我們需要根據資訊量的多寡採取不同策略：

1. 圖片內含文字（如活動海報、Banner）

如果圖片上有文字，Alt 屬性必須包含圖片上的核心資訊。

• 原則： 想像圖片無法載入時，使用者需要知道什麼？通常是「活動名稱」、「時間」、「地點」或「主要訴求」。
• 寫法建議： 不要只寫「活動海報」，應將海報上的關鍵字轉譯出來。

<img src="poster-2024.jpg" alt="2024 數位行銷論壇海報：5月20日於台北國際會議中心舉辦，講者包含...">

注意： 如果海報上的文字非常多（例如包含整段活動規則），建議在 Alt 中僅寫出摘要，並將完整的文字內容直接寫在圖片下方的網頁內文中，這樣對 SEO 和閱讀體驗都更好。

2. 複雜圖表（折線圖、圓餅圖、數據表）

對於圖表，盲目地列出所有數據會讓 Alt 文字變得冗長且難以理解。

• 原則： Alt 文字負責描述「趨勢」或「結論」，詳細數據則透過網頁內文或表格呈現。
• 第一步（Alt 屬性）： 描述圖表的標題以及它所呈現的主要趨勢。
• 第二步（網頁內文）： 若數據很重要，請在圖片下方提供一個 HTML 表格（Table）或詳細清單，讓所有使用者都能查閱精確數值。

範例情境：一張顯示公司年度營收成長的長條圖

不建議寫法：

alt="一張長條圖顯示 1月 100萬, 2月 120萬, 3月 150萬..."（資訊過載，聆聽體驗極差）

正確寫法：

<img src="revenue-chart.png" alt="2023年第一季營收成長圖表：呈現逐月上升趨勢，三月份達到最高峰">

<p>詳細數據請參閱下方的季度財務表格。</p>

這類圖片的寫法公式大致可以整理成下方3個重點：

1. 這是什麼圖？（長條圖/海報）
2. 它說了什麼？（數據呈現上升趨勢/活動將於某日舉辦）
3. 細節在哪裡？（如細節過多，指引使用者閱讀下文）

寫出好的圖片 alt：6 原則與好壞示例

那麼該如何撰寫好的圖片 alt？以下提供6大原則，並搭配範例說明，讓你輕鬆寫出高品質的圖片替代文字！

• 具體描述主要內容與動作：清楚描述圖片中的主要元素與正在發生的事情，避免過於籠統或模糊。
• 簡潔有重點：盡量使用簡短的句子來表達，避免冗長的描述。建議長度在125字元以內，以利使用者快速理解。
• 與上下文一致且不重複周邊文字：替代文字的內容應與圖片的上下文一致，避免與周邊的文字重複。
• 自然帶入關鍵字、避免堆砌：如果圖片內容與網頁主題相關，可適度加入相關關鍵字，但避免刻意堆砌，以免影響可讀性。
• 別寫「圖片/照片/示意圖」等無資訊詞：避免使用「圖片」、「照片」、「示意圖」等無意義的詞語，應直接描述圖片內容。
• 若是圖像按鈕，描述功能：如果圖片為按鈕，替代文字應描述其功能，而非僅僅描述圖片的外觀。

Alt 與 SEO的關係：Alt 帶來的 5 大好處

如前面說明，圖片 alt 不僅有助於SEO，還可提升網頁的可及性（Accessibility）。那麼究竟可帶來哪些效益？以下列出5大好處，讓你了解圖片 alt 的重要性！

1. 圖片載入失敗時的替代資訊
   當圖片無法正常載入時，alt 屬性提供的文字可幫助使用者理解原本圖片的內容。
   
2. 協助螢幕閱讀器與無障礙合規
   為圖片提供適當的替代文字，可協助螢幕閱讀器將圖片內容轉換為語音，讓視障者能夠理解圖片資訊。
   
3. 提升圖片搜尋與整體流量
   搜尋引擎會讀取圖片的替代文字，以了解圖片內容並將其納入搜尋結果。因此，適當地撰寫替代文字有助於提升圖片的搜尋排名與曝光度，進而為網站帶來更多流量。
   
4. 強化頁面語意與主題相關性
   替代文字可協助搜尋引擎更好地理解網頁內容，進而提升頁面的相關性與搜尋排名。
   
5. 支援語音搜尋/AI 摘要等多通路理解
   隨著語音搜尋與AI技術的發展，替代文字可協助這些技術更好地理解圖片內容，進而提供更精確的搜尋結果或摘要資訊。

實務操作：在 HTML 與 CMS 後台設定圖片 alt（附步驟與檢查）

了解圖片 alt 的重要性後，讓我們來看看該如何實際操作。以下將分別說明在 HTML 原始碼與 CMS（內容管理系統）後台中設定圖片 alt 的方式，並提供自我檢查清單，幫助你確保網站的每張圖片都具備適當的替代文字。

HTML 手動新增與批次檢查小技巧

當你需要為網站的圖片手動新增或修改 alt 屬性時，可按照以下步驟進行：

1. 開啟 HTML 原始碼：使用編輯器打開網頁的 HTML 原始碼。
2. 尋找圖片標籤：使用搜尋功能（通常為Ctrl + F）尋找網頁中的標籤。
3. 新增或修改 alt 屬性：在圖片標籤中新增或修改 alt 屬性，並撰寫適當的替代文字。若為純裝飾圖片，則可將 alt 屬性留空。
4. 儲存並預覽網頁：儲存修改後的 HTML 原始碼，並預覽網頁以確認圖片替代文字是否正確顯示。

若想檢查網頁中的圖片是否皆已設置 alt 屬性，可使用瀏覽器的「檢查元素」功能，或安裝相應的瀏覽器擴充套件，快速檢查網頁中的圖片替代文字設定狀況。

CMS 後台常見位置與填寫流程

如果你的網站是使用 WordPress、Shopify 等 CMS 平台建立，通常可在後台的媒體庫或圖片上傳區域中，找到圖片的替代文字（Alt Text）填寫欄位。建議在上傳圖片時，即填寫好替代文字，以確保每張圖片都具備適當的描述。

圖片 alt 自我檢查清單

撰寫好替代文字後，可根據下列清單進行自我檢查，以確保圖片 alt 屬性皆具備適當的描述。

✅ 圖片是否皆有填寫替代文字？

✅ 替代文字是否清楚描述圖片內容？

✅ 替代文字是否避免使用無意義的詞語？

✅ 替代文字是否避免過長或過短？

✅ 替代文字是否與圖片上下文一致？

此外，也可透過Google Lighthouse、Google Search Console等工具，協助檢查網站的圖片替代文字設定。

FAQ｜圖片替代文字的進階實務

多國語系網站的 alt 要怎麼處理？

圖片的替代文字應與頁面的語言一致。因此若是多國語系網站，建議為每個語系分別撰寫對應的替代文字，避免僅使用單一語言。

相同圖片在同頁多次出現，alt 要重複嗎？

若為純裝飾圖片，建議在第一次出現時，即將 alt 屬性留空，以避免螢幕閱讀器重複讀取相同資訊。若為功能性圖片，則可根據其用途，分別撰寫適當的替代文字。

SVG 與 CSS 背景圖需要 alt 嗎？

沒有特殊需求的話可以不用加入alt，如果圖片有提供重要資訊再使用即可

SEO交給迷圖，快速提升品牌網站流量

做了圖片alt，也想把網站流量與轉換率穩穩拉升？把SEO交給迷圖吧！迷圖SEO致力於協助企業提升網站流量和轉換率，提供量身打造的SEO解決方案；更有別於一般廠商，透過清楚的策略、可量化的數據與到位的一條龍服務，讓你更輕鬆達成行銷目標、提升品牌知名度。

1. 地圖式SEO佈局策略：
   消費者在Google搜尋找不到你嗎？迷圖透過地圖式的SEO關鍵字佈局，並且藉由策略分析與排名優化，提升網站排名及流量，讓消費者搜尋每個關鍵字都能找到你！
   
2. R2R 轉換數據報表：
   相信許多商家、企業都有過一樣的疑問：SEO對轉換有用嗎？迷圖深知大家的疑惑，因此與資料數據分析公司聯手推出 Rank2Revenue 轉換追蹤SEO服務，可清楚顯示SEO帶來的轉換、助攻！量化SEO成效，讓你可真正看見 SEO 帶來的效果！
   
3. 免動手服務：
   花了一筆費用想做好SEO，但對方只給建議，修改、文章撰寫還是要自己來？迷圖不會讓這樣的事情發生！為了解決客戶人手不足，易使SEO專案窒礙難行的困境，從網站修改到文章撰寫，迷圖皆可提供專業服務，大大提升專案進度與成效顯現的速度！

歡迎聯絡我們，或是預約免費健檢，讓消費者怎麼搜尋都能找到你！