Alt 描述是什麼? Alt Text 正確寫法、SEO 影響與 AI 搜尋時代圖片優化指南

只要網站有圖片,就不能忽略 Alt 描述(Alt Text、替代文字)。許多人以為 Alt 只關乎圖片 SEO,但在 AI 搜尋時代,它的角色已經完全升級——ChatGPT、Perplexity、Google AI Overviews 不會像人眼一樣看圖,它們主要透過 Alt 文字理解您的圖片內容,進而決定要不要把您的網頁納入回答來源。本篇從 Alt 描述的定義、正確寫法、SEO 影響、台灣電商情境到 AI 搜尋時代的圖片優化策略,一次說清楚。適合官網、電商、部落格、內容網站的經營者與行銷人員閱讀。

一、Alt 描述是什麼?

Alt 描述,也稱為 Alt Text、替代文字,是寫在 HTML 圖片標籤裡的 alt 屬性,用來描述圖片的內容或用途。當圖片無法正常載入、使用者透過螢幕閱讀器瀏覽網站,或搜尋引擎與 AI 模型分析網頁時,Alt 描述就會取代圖片的角色,幫助對方理解這張圖原本想傳達的資訊。

Alt 描述的基本範例

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

這段 Alt 描述的作用,不只告訴系統「這是一張蛋糕照片」,而是進一步交代圖片裡真正有意義的內容——盤子、蛋糕、叉子,以及它們的位置與關係。

Alt 描述、Title 屬性、檔名的差別

很多人會把這三者搞混,但它們各自的角色完全不同:

二、Alt Text 為什麼重要?三大影響面向

很多人把 Alt 描述當作 SEO 的小細節,但它實際上同時影響三個面向:無障礙、使用者體驗、搜尋引擎與 AI 模型的理解能力。

1. 提升網站無障礙(Accessibility)

對視障使用者來說,圖片本身是看不到的,他們主要依賴螢幕閱讀器(例如 NVDA、JAWS、iOS 內建的 VoiceOver、Android 的 TalkBack)理解頁面內容。如果圖片沒有 Alt 描述,等於這部分資訊直接消失。

尤其是商品圖、操作按鈕、教學截圖、流程圖這類承載重要資訊的圖片,若缺乏替代文字,會直接影響閱讀與操作。在台灣,政府機關與大型企業網站受《身心障礙者權益保障法》與「無障礙網頁開發規範(WCAG 2.1 AA)」要求,圖片必須提供 Alt 文字;民間商業網站雖無強制,但越來越多客戶與合作夥伴會把無障礙列為合作條件之一。

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

當圖片連結失效、CDN 故障、行動網路訊號不佳載入失敗,或使用者主動關閉圖片顯示(例如在數據漫遊狀態下節省流量)時,Alt 描述就會在原本圖片的位置顯示出來,讓畫面不會完全空白。

這種情況雖然不常見,但一旦發生,Alt 描述就是使用者理解頁面內容的唯一線索。

3. 幫助搜尋引擎與 AI 模型理解圖片

搜尋引擎雖然能透過視覺辨識技術(例如 Google Lens、Cloud Vision)解析部分圖片內容,但仍然需要文字輔助來理解圖片主題、上下文與頁面關聯。Google 在官方圖片 SEO 文件中明確指出:Alt 屬性是「最重要的圖片中繼資料」。

在 AI 搜尋時代,這個角色更被放大——多模態大型語言模型(Multimodal LLM)在回答視覺相關問題時,主要依賴圖片周邊的文字訊號(包含 Alt、檔名、附近段落、Schema 標記)來決定要引用哪個網頁。這部分在下一段會詳細說明。

三、Alt 描述對 SEO 有什麼幫助?

Alt 描述對 SEO 的價值,不在於「塞越多關鍵字越好」,而在於它能補足搜尋引擎對圖片語意的理解。具體影響如下:

1. 直接影響 Google 圖片搜尋排名

當圖片有明確、自然的 Alt 描述時,搜尋引擎比較容易判斷這張圖屬於什麼主題,進而影響它在 Google 圖片(Google Images) 的索引品質與排名。圖片搜尋對特定產業(例如服飾、家具、餐飲、旅遊、設計、攝影)是重要的流量來源,有時甚至佔總流量的 10–25%。

舉例來說,如果您的文章主題是「巧克力蛋糕食譜」,圖片是完成品,那麼 Alt 描述自然帶入「巧克力蛋糕」就是合理的;搜尋「巧克力蛋糕做法」的使用者點圖片頁籤時,您的圖片就有機會出現。

2. 強化頁面主題一致性

SEO 不只看標題和內文,也看整個頁面的語意一致性。如果標題、內文、圖片檔名、Alt 描述都圍繞同一主題,搜尋引擎更容易判斷這頁在講什麼,主題相關性分數越高,越有機會在相關搜尋字詞下排序。

反過來,若一篇講「室內設計風格」的文章卻配上「貓咪」「美食」這類無關圖片且 Alt 寫得也與內容無關,反而會稀釋頁面主題訊號。

3. 透過長尾關鍵字累積額外流量

Alt 描述提供了一個額外的關鍵字落點。比方說一張穿搭照,如果 Alt 寫成「米色針織外套搭黑色高腰寬褲的秋冬通勤穿搭」,就有機會在「米色針織外套搭配」「黑色高腰寬褲穿搭」「秋冬通勤穿搭」等長尾字詞下被找到,而這些字詞的競爭通常比短尾字小很多,轉換意圖也更明確。

4. 改善使用者體驗,間接支撐 SEO

搜尋引擎越來越重視整體使用體驗(包含 Core Web Vitals、無障礙、可讀性)。Alt 描述雖然不是單一決定排名的關鍵,但它能補強網頁品質、可讀性與無障礙表現,這些都是長期 SEO 的重要基礎。Google Lighthouse 工具會直接檢查網頁有沒有缺漏 Alt,缺漏會扣分。

四、AI 搜尋時代,Alt Text 的全新角色

過去 Alt 描述是寫給人類無障礙閱讀與 Google 圖片爬蟲看的,現在它還要寫給多模態 AI 看。這是這幾年圖片優化最大的變化。

1. ChatGPT、Perplexity、AI Overviews 怎麼讀圖片?

雖然 GPT-4o、Gemini、Claude 等多模態模型「理論上」可以分析圖片像素,但它們在實際進行網頁檢索與回答問題時,主要依賴的是文字訊號。當 AI 助理要回答「請推薦適合送禮的巧克力蛋糕」這類視覺相關問題時,它的判斷流程大致是:

• 檢索與問題相關的網頁段落
• 讀取段落附近圖片的 Alt 描述、檔名、caption、Schema 結構化資料
• 綜合上述文字訊號判斷哪張圖最符合使用者意圖
• 把符合的網頁列入回答來源

換句話說,如果您的商品圖 Alt 是空的、競爭對手的不是,AI 引用的就是競爭對手。這個差距在電商、旅遊、餐飲、室內設計這類視覺驅動的產業特別明顯。

2. 視覺查詢(Visual Query)正在快速成長

Google 的 AI Mode 與 AI Overviews 已合併為單一 AI 搜尋體驗,且明確支援文字、圖片、影片、語音多模態查詢。使用者可以拍一張照片問「這款沙發放在我家客廳會不會太大」,AI 就會從網路上抓取相關的尺寸資訊與類似商品比較。在這種查詢中,被命中的網頁幾乎都具備一個共通點:圖片有清楚的 Alt 描述、產品 Schema、結構化的尺寸資料。

3. Alt 描述需要「智慧化(Smart Alt)」

傳統 Alt 描述只說明物件,例如「咖啡杯」;Smart Alt 則加入顏色、材質、風格、場景、用途,讓 AI 更容易理解圖片在頁面中的角色:

後者不只能讓視障使用者更清楚理解,也能讓 AI 在「找適合辦公室用的咖啡杯」這類查詢中更有機會引用您的網頁。

五、Alt Text 正確寫法:四個核心原則

寫 Alt 描述時,最重要的不是「寫得多漂亮」,而是讓人(或 AI)一聽就懂這張圖在表達什麼。以下四個原則,涵蓋了 95% 的實務情境。

原則 1:先描述圖片中真正重要的資訊

Alt 不是把畫面所有細節都列出來,而是描述這張圖在頁面脈絡中的意義。例如同一張蛋糕照片,放在「甜點擺盤教學」與「烘焙食譜」兩個頁面,Alt 寫法就會不一樣。

差別不在字數,而在資訊量。前者只交代類別,後者才真正具備替代效果。

原則 2:描述要自然、精簡、清楚

Alt 描述不需要寫成一整段說明文,但也不能短到沒有內容。最理想的方式是用一到兩句自然語句,把重點講清楚。

實務上,Alt 字數建議落在 50–125 字(中文)之間。太短沒有資訊;太長則容易讓螢幕閱讀器朗讀疲勞,也會稀釋關鍵字密度。Google 並沒有公布絕對的字數上限,但業界長年觀察到,過長的 Alt 在搜尋結果中可能被截斷,因此「夠用就好」是最務實的方向。

原則 3:可以放關鍵字,但不要硬塞

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

後者不是替代文字,而是關鍵字堆砌(Keyword Stuffing),既不自然,也沒有閱讀價值,還可能被 Google 視為作弊訊號。

原則 4:不要寫「圖片是」「照片是」

Alt 本來就是圖片的替代文字,不需要再加上「這是一張圖片」「照片中有」這類提示開頭。螢幕閱讀器在朗讀時,本身就會先說「圖片:」再讀 Alt 內容,如果 Alt 又寫「這是一張圖片」,就會聽到「圖片:這是一張圖片......」的尷尬重複。

六、Alt 描述實用範例(商品、動物、按鈕、裝飾)

1. 商品圖片 Alt 範例

電商商品圖是 Alt 最關鍵的應用場景之一。好的商品 Alt 應該涵蓋:品名、顏色、材質、用途四個要素。

這樣的寫法不只能幫助使用者理解商品樣貌,也更有利於圖片在 Google 圖片搜尋與 AI 搜尋推薦中曝光。

2. 動物或情境圖片 Alt 範例

3. 按鈕圖片 Alt 範例

如果圖片是功能按鈕,Alt 應描述「功能」,而不是「外觀」。因為使用者真正關心的是「按下去會發生什麼」,而不是「這顆按鈕長什麼樣」。

4. 裝飾圖片 Alt 範例

如果圖片只是裝飾,不承載任何資訊,應使用「空 Alt」(alt=""),這樣螢幕閱讀器會直接略過,不會干擾使用者閱讀。

七、台灣中小企業常見情境與 Alt 寫法

這一段針對台灣中小企業最常見的網站類型,給出具體的 Alt 寫法建議。

1. 服務型公司官網(顧問、設計、會計、法律)

這類網站通常有團隊照、辦公環境照、案例截圖、流程圖。Alt 寫法重點是建立專業信任感。

2. 餐飲業官網/部落格

餐飲是視覺驅動型產業,Alt 寫法影響圖片在 Google Images、Google AI Overviews、社群分享預覽的表現。

3. 電商商品頁

電商 Alt 是投資報酬率最高的圖片優化點之一。同一商品通常有 5–10 張圖,每張 Alt 都應該不同,避免重複內容。

4. 部落格/內容網站

內容網站的圖片通常是輔助說明,Alt 應該與文章段落主題對齊。

5. B2B 工業/製造業官網

B2B 網站圖片多為產品規格、產線、認證、技術圖,Alt 寫法應該包含關鍵規格,有助於採購人員透過 Google 找到您。

八、常見錯誤與避雷重點

1. 完全不寫 Alt

這是最基本也最常見的錯誤。只要圖片有資訊用途,就應該提供 Alt 描述。如果是裝飾圖,也應明確寫成 alt="",不要直接省略 alt 屬性,否則螢幕閱讀器可能會去讀圖片檔名,反而造成噪音。

2. 關鍵字堆砌

很多人把 Alt 當成 SEO 補充欄位,於是把所有想排的字都塞進去(例如 alt="蛋糕, 巧克力, 生日, 好吃, 推薦, 台北, 烘焙")。這不只會讓描述失去可讀性,也可能被 Google 視為操弄行為,反而扣分。

3. 寫得太模糊

像「圖片」「產品」「橫幅」「蛋糕」這種寫法雖然不算完全錯,但幫助有限。它只說出類別,沒有說出具體內容,等於只說了「這是某種食物」而不是「這是什麼食物」。

4. 把所有細節都塞進去

Alt 不是逐像素說明。如果您把背景顏色、擺設位置、角度、光影、攝影風格全部寫進去(例如「在淺米色亞麻桌布上、自然光從左後方 45 度照射、淺景深......」),反而會讓真正重要的資訊被稀釋。

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

例如把標題、公告、價目表、按鈕文案、長段文字都做成圖片。這本身就不是理想做法——文字做成圖片後,搜尋引擎與螢幕閱讀器都無法直接讀取,還會增加網頁載入負擔。如果真的無法避免,Alt 至少要完整補回圖片中承載的核心文字。

6. 多張圖片使用完全相同的 Alt

電商常見錯誤:同一商品的 10 張圖,Alt 全寫成「米色針織外套」。這會讓搜尋引擎無法區分這些圖,等於浪費了 9 張圖的 SEO 潛力。每張圖都應該有獨特的 Alt,描述該張圖的特定角度或情境。

7. 使用檔名當 Alt

例如 alt="IMG_20250523_103045.jpg" 或 alt="DSC_0123"。這完全沒有意義,等於沒寫,還會干擾螢幕閱讀器。

8. 自動工具一鍵生成、不檢查

AI 工具(例如 Alt Text Generator)能快速生成 Alt,但生成結果可能不符合您頁面的脈絡,或描述了不重要的細節。AI 生成後仍需人工檢視一次,確認 Alt 是否符合該頁面的主題與行銷重點。

九、複雜圖片(圖表、流程圖、資訊圖)怎麼寫

有些圖片不是一句話就能說明清楚,例如:

• 數據圖表(長條圖、折線圖、圓餅圖)
• 流程圖(SOP、決策樹)
• 地圖(交通、店面位置)
• 資訊圖(infographic)
• 教學示意圖(分步驟操作畫面)

這類圖片的做法,不是把所有資訊塞進 Alt,而是採用「分層處理」策略。

具體範例:

<img src="sales-chart.png" alt="2025 年四季銷售趨勢圖,顯示銷售額逐季成長且第三季增幅最大">
<p>圖表顯示第一季至第四季銷售額分別為 280 萬、340 萬、510 萬、580 萬,
   其中第三季增幅最明顯,較第二季成長 50%。完整數據請見下方表格。</p>
<table>
   <!-- 把同樣的數據以 HTML 表格呈現,讓搜尋引擎可索引 -->
</table>

這樣的做法比把一長串數據全部塞進 Alt 更清楚,也更符合搜尋引擎與 AI 模型的索引邏輯——它們更喜歡讀結構化的 HTML 表格,而不是一長串的純文字。

十、Alt Text 撰寫檢核流程

如果您不確定一段 Alt 寫得好不好,可以照下面的流程逐項檢查。

步驟 1:問自己「替代測試」

假設讀者完全看不到圖片,只聽得到這句 Alt 描述。他能不能理解這張圖在頁面中的角色或內容?能,通常方向就對了;不能,就代表您可能寫得太空、太亂,或沒抓到重點。

步驟 2:檢查脈絡是否一致

Alt 描述應該與圖片所在的段落主題呼應。如果這個段落在講「秋冬穿搭」,Alt 卻只描述「米色外套」而沒提到場景或搭配,就可以再優化。

步驟 3:確認沒有禁忌詞

檢查 Alt 是否出現「這是一張」「照片中」「圖片顯示」這類冗詞,以及是否出現關鍵字堆砌(逗號分隔的多個詞)。

步驟 4:批次檢查工具

常用的 Alt 檢查工具:

• Google Lighthouse(Chrome 開發者工具內建):可一鍵掃描整頁的 Alt 缺漏
• WAVE Web Accessibility Evaluation Tool:WebAIM 出品的無障礙檢測,免費
• axe DevTools:Chrome 擴充套件,專業無障礙開發者常用
• Screaming Frog SEO Spider:可批次匯出整站圖片與 Alt 對照表

步驟 5:定期回頭優化

Alt 描述不是寫一次就結束。建議每半年回頭檢視一次,特別是:

• 流量較高的頁面(透過 Google Search Console 找出)
• 圖片搜尋曝光高的商品頁
• 近期改版或更新內容的頁面

十一、結論

Alt 描述看起來只是 HTML 的小細節,但它其實是網站內容品質的一部分。寫得好的 Alt Text,能同時照顧無障礙、提升圖片 SEO、加強 AI 搜尋引用機會,也讓整體頁面語意更完整。

真正有效的寫法,不是堆關鍵字,而是掌握三個核心原則:

• 有資訊的圖片:具體寫出內容或功能,涵蓋品名、顏色、材質、場景
• 純裝飾圖片:使用空 Alt(alt=""),避免螢幕閱讀器干擾
• 複雜圖片:採用三層架構(Alt 主題 + caption 摘要 + 表格詳細數據),不要硬塞進一句描述裡

把 Alt 描述當成內容的一部分,而不是 SEO 補漏洞,您的網站品質會更穩,也更容易在 AI 搜尋時代長期累積搜尋表現與 AI 引用機會。如果您正在規劃整體 SEO 優化,可以延伸閱讀新視野 SEO 教學指南,了解更完整的網站優化方法。

常見問答 FAQ