圖片 alt 怎麼寫？替代文字的 SEO 與無障礙原則

Q: 替代文字該寫多長？

一句話為原則，通常不超過一百二十個字元。太長會讓螢幕閱讀器使用者聽得很累。需要詳細描述的圖表應該把細節寫在圖片旁邊的文字裡，讓所有人都看得到。

Q: title 屬性可以取代 alt 嗎？

不能。前者是滑鼠停留時的提示，觸控裝置上根本看不到，螢幕閱讀器的處理也不一致。替代文字是圖片語意的正式來源，兩者不可互換。多數情況根本不需要用到提示屬性。

alt 是 <img> 上最容易寫、也最容易寫錯的屬性。它同時服務三件事：

服務誰	用途
螢幕閱讀器使用者	唯一能知道圖片內容的方式
搜尋引擎	理解圖片主題，圖片搜尋的主要依據
所有人	圖片載入失敗時的替代顯示

核心原則：描述圖片傳達的資訊

問自己一句話

如果這張圖不見了，我要用什麼文字讓讀者得到同樣的資訊？

那句話就是 alt。

html

<!-- 沒有資訊 -->
<img src="/chart.webp" alt="圖片">
<img src="/chart.webp" alt="chart.webp">
<img src="/chart.webp" alt="圖表">

<!-- 有資訊 -->
<img src="/chart.webp" alt="2026 年各季營收成長趨勢，第三季達到全年高點">

該做	不該做
描述圖片傳達的內容	描述檔名或格式
一句話說完	寫成一整段
用完整的句子	只列關鍵字
自然的敘述	刻意塞關鍵字

不必寫「圖片」、「照片」二字

螢幕閱讀器已經會念出「圖片」這個角色。寫 alt="圖片：營收趨勢" 會被念成「圖片圖片營收趨勢」。

四種情境

1. 有資訊的圖片

描述它傳達的內容：

html

<img
  src="/product-detail.webp"
  alt="無線滑鼠的底部，可見電源開關與 USB 接收器收納槽"
  width="800"
  height="600"
>

2. 裝飾性圖片：留空字串

html

<!-- 純裝飾的分隔線、背景紋理 -->
<img src="/divider.svg" alt="" width="100" height="4">

留空字串和完全不寫是兩件事

寫法	螢幕閱讀器的行為
`alt=""`	直接跳過這張圖
完全不寫 `alt`	部分輔助技術會改念檔名

念檔名的後果是使用者聽到「d-i-v-i-d-e-r 點 s-v-g」這種無意義的內容。

純裝飾的圖更適合用 CSS

css

.divider {
  background-image: url("/divider.svg");
}

放進 CSS 就完全不在無障礙樹裡，也不會被搜尋引擎當成內容圖片。這比寫 alt="" 更乾淨。

3. 圖片當連結：描述目的地

html

<!-- 描述「點下去會到哪」，而不是圖片長什麼樣 -->
<a href="/products/wireless-mouse">
  <img src="/mouse.webp" alt="無線滑鼠 M100 商品頁" width="400" height="300">
</a>

這時 alt 扮演的是錨點文字

和內部連結與錨點文字的原則一致，要說明目的地。

如果連結裡 同時有圖片與文字說明，圖片的 alt 應該留空避免重複：

html

<a href="/products/wireless-mouse">
  <img src="/mouse.webp" alt="" width="400" height="300">
  <span>無線滑鼠 M100</span>
</a>

否則螢幕閱讀器會念兩次同樣的內容。

4. 圖表：描述結論，細節放旁邊

html

<figure>
  <img
    src="/revenue-chart.webp"
    alt="2026 年各季營收成長趨勢，第三季達到全年高點"
    width="800"
    height="500"
  >
  <figcaption>
    圖 1：2026 年各季營收。第一季 120 萬、第二季 145 萬、第三季 210 萬、第四季 180 萬。
  </figcaption>
</figure>

細節寫在圖說裡，不要塞進 alt

alt 寫結論（一句話），詳細數據寫在 <figcaption> 裡，這樣 所有人都看得到，不只螢幕閱讀器使用者。

把一整張表格的數字塞進 alt 會讓聽的人非常痛苦。

長度

一句話為原則，不超過約 120 個字元

螢幕閱讀器會把 alt 一口氣念完，中間不能暫停也不能跳過。太長會讓使用者聽得很累。

真的需要詳細描述時，用上面圖表的做法：alt 寫結論，細節放頁面上的文字。

關鍵字的界線

判斷標準是「念出來合不合理」

html

<!-- 違規：堆疊關鍵字 -->
<img src="/mouse.webp" alt="無線滑鼠 藍牙滑鼠 電腦滑鼠 滑鼠推薦 滑鼠開箱 便宜滑鼠">

<!-- 正常：自然描述，剛好包含關鍵字 -->
<img src="/mouse.webp" alt="無線滑鼠 M100 的側面，可見兩顆側鍵與滾輪">

第一種念出來是一串不知所云的詞，那就是堆疊。與 meta keywords 的堆疊是同一類問題。

title 不能取代 alt

	`alt`	`title`
用途	圖片語意的正式來源	滑鼠停留的提示
觸控裝置	正常	看不到
螢幕閱讀器	一律讀取	處理不一致
圖片載入失敗	顯示	不顯示
搜尋引擎	主要依據	影響很小

多數情況根本不需要 title

它在觸控裝置上完全無效，而且沒有鍵盤操作的等價方式。需要補充說明就寫在頁面上，不要藏在提示裡。

檔名與周圍文字

搜尋引擎理解圖片還有兩個輔助線索：

線索	影響	建議
`alt`	最大	一定要寫好
周圍的文字	中	用 `<figure>` 與 `<figcaption>` 明確關聯
檔名	小	有意義的英文加連字號

✗  IMG_20260907_143022.webp
✗  螢幕擷取畫面 2026-09-07 143022.webp
✓  wireless-mouse-side-view.webp

檔名的規則和網址相同

用連字號分隔、全小寫、避免中文（編碼後很難處理）。理由見 SEO 友善的網址結構。

SVG 的替代文字

<img> 引入的 SVG 用 alt 就好。內嵌的 SVG 則要用另一套：

html

<svg role="img" aria-label="搜尋" viewBox="0 0 24 24" width="24" height="24">
  <title>搜尋</title>
  <path d="..." />
</svg>

情境	怎麼寫
內嵌的有意義圖示	`role="img"` + `aria-label` 或 `<title>`
內嵌的裝飾圖示	`aria-hidden="true"`
圖示旁邊已有文字	`aria-hidden="true"` 避免重複

html

<!-- 圖示 + 文字：圖示對輔助技術隱藏 -->
<button>
  <svg aria-hidden="true" viewBox="0 0 24 24" width="16" height="16">
    <path d="..." />
  </svg>
  搜尋
</button>

這個站的做法

橫幅圖的 alt 描述那一篇的主題：

markdown

![圖片替代文字 alt 的撰寫原則](/images/seo/image-alt-banner.svg){ width=1200 height=400 fetchpriority="high" }

LinkCard 元件則自動從標題產生 alt：

const imgAlt = computed(() => props.alt || `${props.title} 代表圖`);

這是一個折衷

理想上每張卡片的圖都該有針對性的描述。但那些圖是文章橫幅的縮圖，內容就是文章標題本身，用「標題 + 代表圖」已經傳達了必要的資訊，而且不必為每一篇文章各寫一份卡片專用的替代文字。

元件同時保留了 alt prop，需要特別描述時可以覆蓋掉預設值。

怎麼檢查

方式	怎麼做
Lighthouse	無障礙類別會標出缺少 `alt` 的圖片
建置後掃描	用正則找沒有 `alt` 屬性的 `<img>`
關閉圖片瀏覽	DevTools 阻擋圖片請求，看能不能靠文字理解頁面
螢幕閱讀器	實際聽一遍是最準的

// 建置後檢查：找出沒有 alt 屬性的 img
const missing = [...html.matchAll(/<img(?![^>]*\balt=)[^>]*>/g)];

if (missing.length > 0) {
  throw new Error(`有 ${missing.length} 張圖片缺少 alt 屬性`);
}

這個檢查抓不到「寫了但寫得爛」

alt="圖片" 會通過機械式檢查。真正的品質只能靠人看，或在程式碼審查時留意。

檢查清單

項目	標準
所有 `<img>` 都有 `alt` 屬性	必備
裝飾性圖片用 `alt=""` 而非省略	必備
`alt` 描述圖片傳達的資訊	必備
不超過約 120 個字元	建議
沒有寫「圖片」、「照片」開頭	建議
沒有堆疊關鍵字	必備
連結圖片的 `alt` 描述目的地	必備
圖表的細節寫在圖說而非 `alt`	建議
沒有用 `title` 取代 `alt`	必備
檔名有意義且用連字號	建議
內嵌 SVG 有 `aria-label` 或 `aria-hidden`	建議

常見問題

留空字串和完全不寫 alt 有什麼差別？

差別很大。留空字串明確表示這張圖沒有資訊，螢幕閱讀器會直接跳過；完全不寫則會讓部分輔助技術改念檔名，使用者聽到一串無意義的字元。裝飾性圖片一律留空字串。

替代文字該寫多長？

一句話為原則，通常不超過約 120 個字元。太長會讓螢幕閱讀器使用者聽得很累。需要詳細描述的圖表應該把細節寫在圖片旁邊的文字裡，讓所有人都看得到。

替代文字可以放關鍵字嗎？

自然地描述圖片內容時如果剛好包含關鍵字，那沒有問題。刻意堆疊則是違規行為，而且會讓螢幕閱讀器使用者聽到一串不知所云的詞。判斷標準是念出來合不合理。

圖片當連結時替代文字要寫什麼？

描述點下去會到哪裡，而不是圖片長什麼樣。這時替代文字扮演的是錨點文字的角色，所以要說明目的地。若連結內同時有圖片與文字說明，圖片的替代文字可以留空避免重複。

title 屬性可以取代 alt 嗎？

不能。title 是滑鼠停留時的提示，觸控裝置上根本看不到，螢幕閱讀器的處理也不一致。alt 是圖片語意的正式來源，兩者不可互換。多數情況根本不需要用到 title。

延伸閱讀

參考資料：W3C：替代文字決策樹

圖片 alt 怎麼寫？替代文字的 SEO 與無障礙原則 ​

核心原則：描述圖片傳達的資訊 ​

四種情境 ​

1. 有資訊的圖片 ​

2. 裝飾性圖片：留空字串 ​

3. 圖片當連結：描述目的地 ​

4. 圖表：描述結論，細節放旁邊 ​

長度 ​

關鍵字的界線 ​

title 不能取代 alt ​

檔名與周圍文字 ​

SVG 的替代文字 ​

這個站的做法 ​

怎麼檢查 ​

檢查清單 ​

常見問題 ​

延伸閱讀 ​

圖片 alt 怎麼寫？替代文字的 SEO 與無障礙原則

核心原則：描述圖片傳達的資訊

四種情境

1. 有資訊的圖片

2. 裝飾性圖片：留空字串

3. 圖片當連結：描述目的地

4. 圖表：描述結論，細節放旁邊

長度

關鍵字的界線

title 不能取代 alt

檔名與周圍文字

SVG 的替代文字

這個站的做法

怎麼檢查

檢查清單

常見問題

延伸閱讀