HTML Image Alt 重要嗎？善用 AltText（替代文字）讓爬蟲輕鬆看懂你的圖片！

    Eric Wang

 

你知道網站上的圖片若沒有正確設置 alt 替代文字，可能會錯失 SEO 曝光與無障礙友善的機會嗎？正確且適當的撰寫Alt，能提升搜尋能見度、改善使用者體驗，甚至有助於品牌專業度的建立。

 

什麼是Image Alt（替代文字）？

Image Alt 是指圖片的替代文字（Alternative Text），是 HTML 中<img>標籤的屬性所設定的內容，主要功能是用來描述網頁圖片上的內容。當圖片無法正常顯示時，瀏覽器會以這段文字作為備援顯示內容，同時也讓使用螢幕閱讀器的視障者能透過語音了解圖片的意涵。

此外，搜尋引擎無法直接「看懂」圖片，因此 alt 文字也成為 Google 等搜尋引擎解析圖片語意、進行索引與排名的重要依據，正確且適當的撰寫alt不僅有助於提升 SEO 表現，更是實現無障礙設計的核心步驟之一。

 

延伸閱讀：搞懂 SEO 有多難？新手也能快速理解的搜尋引擎優化全攻略！

 

 

圖片舉例情境說明

我們看到的圖：一瓶橘色瓶身的「維他命C 500mg」保健食品，放在白色背景上。

建議給搜尋引擎的文字：alt="500mg，高單位維他命C錠劑，橘色瓶身包裝"

 

 

 

哪些時候需要使用圖片Alt文字？4個使用情境

許多人可能會想說Alt文字就是為了SEO而寫，但其實它的作用遠比你想像得更多，了解圖片Alt在各種情境下的實際用途，不僅能幫助你正確撰寫，也能讓網站在功能性與搜尋友善度上雙雙加分。

 

1. 圖片無法顯示時，替代顯示內容

若圖片因路徑錯誤、網路問題或瀏覽器限制無法載入時，alt 文字會出現在原本圖片的位置，讓使用者了解原意，避免資訊落空。

 

2. 幫助視障使用者理解圖片

使用螢幕閱讀器的視障者沒辦法直接看到圖片內容，但可以透過Alt文字讓設備朗讀出圖片說明，協助理解網站完整內容，是無障礙網頁的重要要求之一。

 

3. 搜尋引擎了解圖片內容

Google與其他搜尋引擎會依據圖片的Alt文字、檔名、周圍文字等線索判斷圖片內容，用於圖片搜尋索引與主題語意分析，有助SEO排名。後續若有使用翻譯工具或語音助理時，也會解析 alt，作為語意識別或多語系顯示的備援描述。

 

4. 社群分享與 Open Graph 當作備援文字

在圖片載入異常時，有些情況下會抓取 alt 作為圖片替代說明。

 

延伸閱讀：網站跟社群平台有什麼不同？為什麼企業還需要網站？

 

 

Img Alt對SEO有何益處？5大優點一次報你知

在網站優化的細節中，圖片的Alt（替代文字）常被忽略，但它卻是強化 SEO 與提升使用者體驗的重要關鍵，正確撰寫 alt 不僅能協助搜尋引擎理解圖片內容，也能增加圖片被收錄與曝光的機會，有助於提升整體頁面語意結構、符合無障礙規範、建立網站可信度。我們整理了五大好處，帶你掌握圖片 alt 的實戰價值：

 

1. 提升圖片搜尋曝光

Google圖片的搜尋佔整體搜尋量約20%以上，透過圖片alt文字讓圖片出現在相關關鍵字搜尋結果中，例如產品圖、部落格文章內的圖片。

 

2. 強化頁面主題語意

跟人類不一樣，我們可能看一眼就能知道圖片在表達什麼，但搜尋引擎則需透過alt文字來理解圖片內容，才能強化頁面與目標關鍵字的關聯性。

 

3. 提升無障礙友善度

透過優良的Alt配置來呈現重視對視覺障礙者的網站瀏覽體驗，有助於建立品牌信任與專業形象，間接符合 Google 評估內容可信度的指標。

 

延伸閱讀：無障礙網頁的圖片 alt（替代文字）怎麼寫？3步教你快速符合標準

 

4. 協助 Google 理解內容結構

2025年起Google加強圖片與語音、影片等跨媒體搜尋的整合，良好設計的 alt 文字有助搜尋引擎更準確地匹配搜尋意圖與圖片內容，有利多媒體搜尋。

 

5. 支援語音搜尋與語意摘要生成

生活日漸繁忙，越來越多使用者會透過語音裝置與Google Assistant查找資訊，這時候圖片的alt就可以作為語音摘要、AI助手回答依據，有助於內容轉譯為多渠道的資訊來源。

 

 

圖片Alt文字要怎麼寫？掌握4大原則沒煩惱

讀到這裡，想必對Alt Img已經有了不少的認識，撰寫適當的Alt文字，能幫助搜尋引擎理解圖像內容，也讓使用輔助科技的使用者獲得完整資訊，我們列出撰寫圖片Alt的實用原則，幫助你快速掌握寫法。

 

1. 描述要精簡且具體

Img Alt替代文字的目的是當圖片出問題時能協助使用者了解內容，所以要盡量「具體」的還原圖片內容但不能過長，例如今天網頁中有一張狗的圖片，可以將環境、動作也一併加入描述當中：一隻白色的狗在草地上咬著飛盤。

 

2. 避免使用模糊詞語

比如說插入一張白色的狗在草地上咬著飛盤的圖，結果ALT只寫「圖片1」、「圖示」或「點我查看」等比較沒意義的描述，Img Alt本就是作為圖片的替代文本使用，不必再次強調這是一張圖片，這樣會降低可讀性與SEO效益。

 

3. 不要重複周圍文字或標題

Alt應該是「補充」圖片語意，所以在同一個頁面中，還是要避免使用同樣的一段文字來敘述不同的圖片。

 

4. 適當使用關鍵字

前面有提到在Alt中加入關鍵字對SEO有幫助，但若是過度堆砌甚至胡亂搪塞關鍵字（例：<img src=”dog.jpeg” alt=”狗,小狗,狗狗,大狗,賞櫻,划冰船,烤玉米”>），反而會被視為黑帽操作，得到負面效果。

 

 

簡單介紹HTML Img Alt與Img Title的差別

另一個和圖片有關的屬性是Img Title，兩者最大的差別在於Img Alt為圖片替代文字，只有在圖片失效、使用者有需要時才會出現；Img Title則是圖片的標題，每當滑鼠移動到圖片上就會顯示出來，我們以表格的方式來做更詳細的比較：

 

	Img Alt	Img Title
功能	作為圖片的替代文字，當圖片無法正常顯示時，才會出現替代文字來說明圖片	作為圖片的標題，當滑鼠移動到圖片上方就會出現文字訊息
文字內容	具體且清楚地描述圖片情境與內容	提供圖片的相關訊息，例如圖片名稱、作者或著作權聲明等等
目的與用途	提供所有使用者在有需要時能完整了解網頁內容，同時有效提升在搜尋引擎上的排名（SEO）	增加網頁與使用者的互動性和補充相關的圖片說明

 

 

用更實際的例子來看兩者的差別，以 <img title="title描述" src="/圖片網址" alt="身穿外套看著螢幕的男性" > 為例：

 

當滑鼠移到圖片上方，會出現title描述：

 

 

而當圖片出問題時，則會出現alt替代文字：

 

 

 

常見問題 FAQ｜圖片替代文字（Image Alt）相關問題一次解答

Q1：img Alt是什麼？

是HTML的其中一個屬性，通常會加在標籤裡，主要作為圖片的替代文字，用來描述圖片內容，當圖片無法顯示時，Alt文字會取而代之，同時讓搜尋引擎與螢幕閱讀器理解圖片意義，例如：。

 

Q2：Alt Text 一定要寫嗎？

基於搜尋引擎優化的前提我們會建議一律都要寫，因為Alt Text不只可以幫助搜尋引擎理解圖片內容，也是無障礙設計的重要一環，對視覺障礙者來說，螢幕閱讀器會讀出Alt Text內容，協助他們理解網頁資訊。

 

Q3：Alt Text 要怎麼寫比較好？

Alt Text 應該簡短、清楚描述圖片重點，避免堆砌關鍵字或空泛的文字，例如「一位設計師正在電腦前設計網站首頁」VS「設計」，從文字上來看應該是前面的你比較想像得出畫面。

 

Q4：Alt Text 對 SEO 有幫助嗎？

有幫助+1，搜尋引擎不像人類可以直接讀懂圖片，但它可以透過Alt Text來理解圖片內容並納入排名因素，越讓它看得懂會越有價值，正確的 Alt Text 能提升圖片搜尋曝光率，間接帶來網站流量。

  

 

延伸閱讀：HTML Title網頁標題怎麼寫？三分鐘教你寫出 SEO 友善又吸睛的標題！

延伸閱讀：HTML H1 H2 H3標題標籤是什麼？搞懂 Heading tags，SEO友善的文章架構沒煩惱！

延伸閱讀：SEO文案怎麼寫？提升網頁點擊率的撰寫技巧全攻略

延伸閱讀：網頁設計公司怎麼挑？選商前先看這篇推薦攻略不踩雷