Alt Text 是什麼？圖片替代文字寫法、範例與常見錯誤

Alt Text 經常被當成一個「放 SEO 關鍵詞的欄位」，但這並不是它的完整用途。圖片替代文字首先要讓無法看見圖片的人理解圖片所傳達的資訊，其次才是協助搜尋引擎理解圖片內容。

如果每張圖片都填上相同關鍵詞，Alt Text 不但失去替代圖片的作用，也會令使用 Screen Reader 的讀者反覆聽到沒有實際意義的文字。相反，完全不處理 Alt 屬性，也可能令重要圖表、產品圖片或操作截圖失去必要的文字說明。

Alt Text 是甚麼？

Alt Text 是 Alternative Text 的縮寫，中文通常稱為「替代文字」、「圖片替代文字」或「替代文本」。它是 HTML <img> 元素內的 alt 屬性。

<img
  src="google-search-console-report.webp"
  alt="Google Search Console 自然搜尋成效報告"
>

當圖片未能正常顯示時，瀏覽器可能顯示 Alt Text。使用 Screen Reader 的讀者也可以透過替代文字理解圖片帶出的資訊。Google 則會結合 Alt Text、電腦視覺分析及頁面內容，判斷圖片的主題。

因此，Alt Text 不是單純寫給搜尋引擎看的隱藏文案。它同時服務一般讀者、視障人士、低頻寬用戶及搜尋系統。

Alt Text 為甚麼重要？

改善網頁無障礙

圖片可以傳達產品外觀、操作步驟、數據變化或按鈕功能。無法看見圖片的讀者，需要透過替代文字取得相同或相近的資訊。這也是 Alt Text 最基本的用途。

W3C 資訊圖片指引指出，Alt Text 應按圖片在特定頁面內的用途，傳達圖片提供但附近文字未有交代的重要資訊。同一張圖片放在不同頁面，可能需要不同的描述。

協助搜尋引擎理解圖片

根據 Google Images SEO 官方指南，Google 會利用 Alt Text、電腦視覺演算法及頁面內容理解圖片。描述準確的 Alt Text，可以為搜尋引擎提供有用語境。

不過，填寫 Alt Text 不代表圖片一定獲得排名。圖片品質、頁面相關性、附近文字、可抓取性、網站品質及用戶搜尋意圖，同樣會影響圖片是否出現在搜尋結果。

圖片載入失敗時保留資訊

圖片可能因網址錯誤、網絡問題、CDN 設定或瀏覽器限制而無法載入。具意義的替代文字可以讓讀者知道原本應該出現甚麼，不至於完全失去內容。

Alt Text、Image Title、Caption 有甚麼分別？

WordPress 媒體庫提供多個文字欄位，不少網站會把它們全部填上同一句說話。實際上，這些欄位的用途不同，沒有需要逐字複製。

同一張圖片的完整設定例子

• Filename：wordpress-alt-text-field.webp
• Alt Text：WordPress 媒體庫內的替代文字輸入欄
• Caption：在媒體庫選擇圖片後，可於右側填寫替代文字。
• Title：WordPress Alt Text 設定畫面

Alt Text 描述圖片或功能，Caption 則向正在閱讀頁面的人補充解釋。兩者可以提及相同主題，但沒有必要使用完全一樣的句子。

Alt Text 怎樣寫？六個實用原則

描述圖片在這個頁面的用途

不要只列出圖片內所有物件，而要判斷圖片為甚麼會出現在這個位置。相同的辦公室照片，如果用於招聘頁面，描述重點可能是團隊工作環境；如果用於室內設計案例，重點則可能是空間、物料及設計。

保持簡潔，但不要追求固定字數

Alt Text 應該以最簡潔的方法傳達圖片的重要資訊，但沒有適用於所有圖片的固定字數上限。簡單圖示可能只需要幾個字，產品圖片可能需要品牌、型號、顏色及角度；複雜圖表則應配合附近的詳細文字或數據表。

與其問「可不可以超過 125 個字符」，更實際的問題是：讀者需要聽到這些內容才能理解圖片嗎？如果描述已經變成一整段分析，就應該把詳細內容放在正文。

自然使用關鍵詞

如果目標關鍵詞正好描述圖片，可以自然加入。例如文章主題是 WordPress SEO，而圖片確實展示 WordPress 的圖片設定，寫成「WordPress 圖片 Alt Text 設定」便合理。

如果圖片只是一般辦公室照片，強行寫成「香港 SEO 公司最平 SEO 服務」便與畫面不符。Google 明確建議避免在 Alt 屬性內堆砌關鍵詞，因為這會造成負面用戶體驗，也可能被視為垃圾內容。

避免無意義開場

Screen Reader 通常已會向用戶表明這是一張圖片，所以一般不需要每次都由「這是一張圖片」或「圖片顯示」開始。

不過，如果媒介形式本身有意義，例如攝影作品、油畫、地圖或 X 光圖片，可以在描述中保留相關資料。

不要重複附近已完整交代的文字

如果圖片只重複旁邊已有的文字，而且沒有新增資訊，可以考慮使用空白 Alt。Screen Reader 使用者不需要連續聽到同一句內容兩次。

每張圖片按實際內容處理

同一篇產品文章可能有正面、側面、內部空間及使用情境圖片。它們不應全部使用「產品名稱」作 Alt Text，而應指出每張圖片的分別。

不同圖片類型的 Alt Text 寫法

<img
  src="red-warning-icon.svg"
  alt="警告"
>

<img
  src="decorative-gold-line.svg"
  alt=""
>

<a href="/downloads/seo-checklist.pdf">
  <img
    src="download-icon.svg"
    alt="下載 SEO 檢查表 PDF"
  >
</a>

<img
  src="black-leather-backpack-front.webp"
  alt="黑色皮革商務背包正面"
>

<img
  src="wordpress-media-alt-field.webp"
  alt="WordPress 媒體庫右側的替代文字欄位"
>

<img
  src="organic-traffic-growth-chart.webp"
  alt="自然搜尋流量由一月至六月持續上升"
>

<img
  src="free-seo-audit-banner.webp"
  alt="免費 SEO 初步診斷，立即預約"
>

<a href="/">
  <img
    src="rankbyleo-logo.svg"
    alt="RankByLeo 首頁"
  >
</a>

Alt Text 寫法範例

九個常見 Alt Text 錯誤

錯誤一：堆砌 SEO 關鍵詞

<img
  src="seo-report.webp"
  alt="SEO 香港 SEO 公司 SEO 服務 SEO 顧問 最平 SEO"
>

這種寫法不能準確描述圖片，也會令 Screen Reader 用戶聽到一串重複字詞。Google 同樣不建議在 Alt Text 填塞關鍵詞。

錯誤二：每張圖片使用同一個 Alt Text

產品正面、背面及細節圖不應全部使用相同產品名稱。每張圖片應指出其獨特內容，否則替代文字無法協助讀者分辨圖片。

錯誤三：把 Filename 當成 Alt Text

IMG_4829.jpg、banner-final-v3.png 或 DSC0042.webp 都不是有意義的替代內容。檔名與 Alt Text 應分別處理。

錯誤四：所有圖片都填上文字

純裝飾圖片、分隔線及沒有資訊價值的背景圖，不需要為了「SEO 分數」加入關鍵詞。適當使用 alt="" 才是正確的無障礙處理。

錯誤五：所有圖片都留空

產品圖片、操作截圖、圖表及功能按鈕通常包含實際資訊。全部留空會令部分讀者無法理解頁面內容或完成操作。

錯誤六：描述圖片看不到的資訊

一張一般辦公室照片不能證明企業是「香港第一 SEO 公司」，產品照片也不能證明它「最耐用」或「最暢銷」。Alt Text 應避免加入無法從圖片或功能判斷的宣傳聲稱。

錯誤七：與 Caption 完全重複

如果 Caption 已完整描述圖片，再讓 Screen Reader 讀出相同 Alt Text，可能造成重複。應根據實際 HTML 結構及資訊需要，決定 Alt 是簡化描述還是留空。

錯誤八：用 Image Title 取代 Alt Text

Image Title 與 Alt Text 是不同屬性。即使圖片有 Title，也不代表 Screen Reader 和圖片載入失敗情況會獲得合適替代內容。

錯誤九：用 SEO Plugin 分數代替人工判斷

部分 SEO Plugin 只會檢查 Alt Text 有沒有出現焦點關鍵詞，無法理解圖片是否裝飾、是否為按鈕，以及描述是否符合畫面。Plugin 提示只能作初步檢查，不應當成最終答案。

WordPress Alt Text 如何設定？

方法一：透過媒體庫設定

1. 登入 WordPress 後台。
2. 前往「媒體」及「媒體庫」。
3. 選擇需要設定的圖片。
4. 在「替代文字」或「Alternative Text」欄位輸入描述。
5. 返回文章前台，檢查最終 HTML 是否正確輸出 alt 屬性。

方法二：在文章圖片區塊設定

1. 在 Gutenberg 編輯器選擇圖片區塊。
2. 開啟右側圖片設定。
3. 找到「Alt Text／替代文字」欄位。
4. 輸入圖片描述，或在純裝飾圖片使用空白 Alt。
5. 更新文章並檢查前台。

方法三：直接修改 HTML

<img
  src="wordpress-alt-text-example.webp"
  width="1200"
  height="800"
  alt="WordPress 圖片 Alt Text 設定畫面"
  loading="lazy"
>

WordPress 媒體庫內的 Alt Text 可以在圖片插入內容時帶入 HTML，但 Theme、Page Builder、自訂模組或第三方 Plugin 可能使用不同輸出方式。因此，大型網站不能只檢查媒體庫，還要查看前台實際產生的程式碼。

網站 Alt Text 審核流程

先找出缺失，不要直接批量填寫

網站爬蟲工具可以找出沒有 alt 屬性、Alt Text 空白或描述重複的圖片。但報告只能指出技術狀態，不能判斷空白是否合理。

按頁面價值排序

大型網站不需要由第一張圖片開始逐一修改。可以先處理以下頁面：

• 有自然流量及轉換的核心 Landing Pages。
• 產品、服務及主要分類頁。
• 高度依賴圖片說明的教學內容。
• 已在 Google Images 獲得曝光的頁面。
• 包含圖表、操作截圖或圖片按鈕的頁面。

把圖片分成五類

1. 資訊圖片：需要短而具體的 Alt Text。
2. 功能圖片：描述操作或連結目的。
3. 裝飾圖片：使用空白 Alt。
4. 複雜圖片：短 Alt 配合正文或詳細數據。
5. 重複圖片：按該頁面的實際用途決定描述。

檢查最終 HTML

審核時應查看前台原始碼或瀏覽器開發者工具，而不只是 CMS 欄位。需要分清楚以下三種情況：

<!-- 有描述的 Alt Text -->
<img src="seo-chart.webp" alt="自然搜尋流量增長圖表">

<!-- 刻意設定為裝飾圖片 -->
<img src="divider.svg" alt="">

<!-- 完全缺少 alt 屬性 -->
<img src="product-photo.webp">

不要用 AI 在沒有圖片資訊下自動填寫

AI 可以協助大量圖片建立初步描述，但系統需要看到圖片、頁面文字、圖片用途及產品資料。如果只根據檔名生成 Alt Text，容易產生錯誤特徵、虛構人物或與頁面無關的描述。

自動化流程應保留人工抽查，並為產品、醫療、法律、金融、新聞及複雜數據圖片設定較嚴格的審核標準。

Alt Text 與圖片 SEO 的關係

Alt Text 是圖片 SEO 的一部分，但不是全部。即使替代文字寫得很好，如果圖片被 robots.txt 阻擋、只用 CSS Background 提供、檔案過大，或者與頁面主題無關，仍然難以取得理想表現。

完整的圖片優化還包括描述性檔名、圖片格式、壓縮、Responsive Images、width 和 height、Lazy Loading、LCP 載入優先次序、圖片 Sitemap 及結構化資料。這些項目可參考 RankByLeo 的圖片 SEO 完整指南 2026。

Alt Text 常見問題

總結：先描述圖片，再考慮關鍵詞

好的 Alt Text 不需要寫得複雜。最重要的是準確理解圖片在頁面內的用途，然後用簡潔文字補回無法透過視覺取得的資訊。資訊圖片要描述重點，功能圖片要交代操作，裝飾圖片則應讓輔助技術略過。

從 SEO 角度看，Alt Text 可以協助 Google 理解圖片，但它不是用來放置關鍵詞清單的位置。當描述真正符合圖片、頁面及讀者需要時，無障礙與圖片 SEO 自然可以同時改善。

參考資料

• Google Search Central：Google Images SEO 最佳做法
• W3C Web Accessibility Initiative：Informative Images
• W3C Web Accessibility Initiative：Decorative Images
• W3C Web Accessibility Initiative：Alt Decision Tree