Img alt 是什麼？它只是圖片備援文字，還是 SEO 排名的關鍵？你可能知道圖片壞掉時會顯示一段文字，但 alt text 實際上也影響搜尋引擎的理解與曝光，這篇文章將帶你一次掌握 img alt 的語法、寫法原則與 SEO 實戰應用，讓你的圖片不再被 Google 忽略。
什麼是 img alt？HTML 替代文字的基本概念
在網站設計與 SEO 優化的領域中，圖片不只是視覺裝飾，更是一種內容訊息的傳遞方式，但圖片本身無法被搜尋引擎直接理解，因此就需要透過 img alt 這個屬性來補足，這段被稱為「替代文字」的內容，不只關乎使用者體驗，更深深影響搜尋排名。
Img Alt 的定義與作用
img alt 是 HTML <img> 標籤中的屬性，全名為「圖片替代文字（Alternative Text）」，它的作用是提供圖片無法顯示時的文字描述，並協助搜尋引擎、輔助設備理解圖片內容，這段文字會出現在圖片載入失敗時的原圖位置，也是搜尋引擎讀取圖片主題的主要依據。
替代文字的顯示時機與功能（圖片壞掉、螢幕閱讀器）
Alt 文字的顯示時機包括以下幾種情境：
- 圖片檔案遺失或連結錯誤
- 使用者網路速度過慢，圖片載入逾時
- 使用螢幕閱讀器的視障者需要以語音方式「閱讀」圖片內容
- 特定裝置或環境禁用圖片時，仍能保留資訊完整性
這些情境說明了 img alt 不只是備援用語，而是一種讓網站在更多情境下維持可用性的設計細節。
Alt Text 的重要性：給 Google 看、也給人看
一個好的 alt text 不只是在圖片無法顯示時派上用場，它同時是搜尋引擎了解圖片主題的線索來源，Google 無法直接判讀圖片畫面，但能透過替代文字來推斷圖片與網頁主題的關聯，寫得好的 alt，可以強化主題語意、提升圖片在搜尋結果中的能見度，甚至增加整體網頁的 SEO 得分。
img alt 和 img title 的差異是什麼？
在 HTML 中，alt 和 title 這兩個屬性常常讓初學者混淆，因為它們都可以用在 <img> 標籤上，也都能提供圖片的補充資訊，但實際上，這兩者的用途、顯示時機和 SEO 價值是完全不同的，理解它們的差別，才能正確運用於網站優化與可用性設計中。
兩者用途不同：輔助說明 vs 替代資訊
以下為用途說明：
img alt（圖片替代文字）：當圖片無法顯示時，用來「取代圖片」的描述性文字，這是為了讓使用者在圖片無法顯示時，仍能了解圖片的原意；同時也是提供給搜尋引擎和輔助技術（如螢幕閱讀器）使用的。img title（圖片標題）：是一種滑鼠提示文字，當使用者將滑鼠游標移動到圖片上方時，會出現一段短文字說明。這段文字不會在圖片失效時顯示，也不一定會被所有瀏覽器讀取或呈現。
語法比較與使用時機
以下是實際語法範例，用於說明兩者的差異：
html複製編輯<img src="dog.jpg" alt="一隻穿著救生衣的黑狗正在游泳" title="狗狗學游泳的日常">
alt描述的是這張圖片的內容本身：這是一隻黑狗在水中游泳。title是補充說明：例如這是一個主題企劃、拍攝場景或文章標題。
實務上alt 是 SEO 的重點，而 title 則偏向提供互動性補充，並不一定對搜尋排名有幫助，也不應取代 alt 的角色。
何時應該用 alt？何時用 title？
以下為比較表格：
| 使用情境 | 選擇屬性 | 建議寫法方向 |
|---|---|---|
| 強調圖片主題 | alt | 精準描述圖片情境與對象 |
| 補充提示資訊 | title | 補充圖片上下文說明 |
| 無障礙設計需要 | alt | 簡潔但具體，利於語音朗讀 |
| 純裝飾圖片 | alt="" | 留空表示略過，不影響閱讀 |
alt 是圖片「無法顯示時的備援文字」，同時是 SEO 與可用性的重要元素；而 title 僅在使用者與圖片互動時才會出現，應作為輔助，而不是主力。
Img Alt 要怎麼寫？語法範例與錯誤示範一次搞懂
理解 img alt 的重要性與基本原則後，最實際的問題是「到底怎麼寫？」這一節將從語法格式開始講起，並帶你辨識錯誤寫法，讓你在執行 SEO 優化時，少走冤枉路。
基本語法教學與範例
img alt 的語法非常簡單，只要在 <img> 標籤中加入 alt="替代文字" ，例如：
html複製編輯<img src="orange-cat.jpg" alt="一隻橘色的貓咪蜷縮在木地板上睡覺">
這段程式碼的意思是：若圖片無法顯示，畫面上將會出現「一隻橘色的貓咪蜷縮在木地板上睡覺」這段文字，用來說明原圖內容，這樣不只對使用者友善，也能幫助搜尋引擎理解圖片語意。
好的 alt 應該具備三個特性：
- 與圖片本身高度相關
- 能夠具體描述圖片情境
- 不使用冗詞或過長文字
錯誤示範（空白、關鍵字堆疊、不相關文字）
以下列出三種常見錯誤寫法，務必避免：
1. 空白 alt 值
html複製編輯<img src="cat.jpg" alt="">
這表示圖片是裝飾性用途，但如果該圖片實際上有內容意義，這種寫法會讓搜尋引擎與輔助設備完全忽略它。
2. 關鍵字填塞
html複製編輯<img src="cat.jpg" alt="貓, 可愛貓, 橘貓, 睡覺貓咪, 毛小孩">
這種堆疊關鍵字的寫法可能會被搜尋引擎判定為「關鍵字填充」（keyword stuffing），反而導致負面 SEO 效果。
3. 無意義或機器式命名
html複製編輯<img src="cat.jpg" alt="image01">
這樣的文字對使用者與搜尋引擎都毫無幫助，完全喪失替代文字應有的功能。
圖片名稱與按鈕圖片也該設 alt 嗎？
是的，這兩類圖片常常被忽略，卻很關鍵：
- 圖片檔名：雖然不屬於 alt，但建議上傳圖片時，檔名也使用英文描述，例如
black-dog-swimming.jpg，而不是IMG_0123.jpg，有助於搜尋引擎識別。 - 按鈕圖片：如果你的網站按鈕是用圖片製作的（例如購物車圖示、搜尋圖示），一定要加上 alt，否則使用者與搜尋引擎無法得知按鈕的用途。
範例：
html複製編輯<img src="search-icon.png" alt="搜尋按鈕">
這樣的寫法既符合無障礙原則，也有利於提升網站整體結構品質。
好的 img alt 怎麼寫？這 7 原則你一定要知道！
掌握語法與錯誤寫法只是第一步，真正能讓圖片替代文字發揮價值的關鍵，在於「寫得好」。
這一節彙整國內外 SEO 專家建議，整理出 7 個實用原則，幫助你寫出既符合 SEO，也兼顧使用者體驗的 img alt。
1. 圖片內容要具體說明
Alt 是用來「描述圖片的畫面」，不是單純列出名詞，與其寫「橘貓」，不如寫「一隻橘色短毛貓趴在木地板上午睡」，這樣的內容能更真實地傳達圖片意圖，也更利於搜尋引擎理解語意。
2. 包含關鍵字但不堆疊
關鍵字可以自然融入 alt 中，但避免重複堆砌，例如：
正確寫法：<img src="cat.jpg" alt="橘貓在木地板上曬太陽">
錯誤寫法：<img src="cat.jpg" alt="貓, 貓咪, 可愛貓, 睡覺貓咪, 寵物貓">
關鍵在於讓 alt 成為敘述性語句，而不是關鍵字清單。
3. 不要只是重複「圖片」、「照片」
寫 alt 時不需要額外說明「這是一張圖片」或「照片」，例如：
- 錯誤
：<img alt="照片：一隻狗"> - 正確：
<img alt="黃金獵犬正衝向海浪奔跑">
搜尋引擎已經知道這是圖片，用文字說明畫面本身才是重點。
4. 保持簡短
過長的 alt 不利於閱讀器朗讀，也可能被截斷，建議中文字 60 字以內，英文約 125 字元以內。
用「一句話說清楚畫面」作為標準，是寫作上最安全的方式。
5. 不要拿圖片取代重要文字
alt 的目的是「補充」而不是「取代」主要內容，重要資訊請用文字顯示於頁面上，而不是只放在圖片和 alt 中。
舉例來說，產品價格、活動日期、使用說明等，都應該用文字撰寫，圖片只作輔助說明。
6. 功能性圖片也要加 alt（例如按鈕、圖示）
很多網站忽略這點，如果按鈕是圖片，例如：搜尋鍵、下一頁、購物車圖示等，都應該加上 alt，否則在圖片無法顯示或使用者用閱讀器操作時，無法理解這個圖像的作用。
範例：
html複製編輯<img src="btn-submit.png" alt="提交表單按鈕">
7. 與檔名搭配更有 SEO 加分效果
雖然圖片檔名不屬於 alt 屬性，但它們一起提供語意線索，上傳圖片時，建議使用語意明確的英文檔名，例如：
- 檔名：
black-dog-swimming.jpg - Alt：
一隻黑色米克斯犬正在泳池裡游泳
這樣能幫助搜尋引擎建立完整語意脈絡，提升圖片與頁面的相關性。
為什麼 img alt 對 SEO 很重要？
Img alt 不只是網頁技術上的配件，它實際上是搜尋引擎理解圖片語意的主要依據之一，正確撰寫 alt 屬性，不僅有助於圖片本身在搜尋結果中獲得曝光，更能提升整體頁面的主題相關性，進而強化 SEO 表現。
以下是 img alt 對 SEO 的五項具體幫助：
幫助搜尋引擎理解圖片內容
搜尋引擎無法「看」圖片，只能藉由圖片的檔名、周圍文字以及 alt 屬性來推斷圖片的內容，alt 就像是給圖片加上的標籤，讓搜尋引擎知道這張圖與網頁主題有什麼關聯，進而決定是否收錄、如何排序。
改善網頁無障礙性（視障讀者）
搜尋引擎對網頁的友善程度越來越重視「可讀性」與「可用性」，當 alt 寫得好，視障者能透過螢幕閱讀器獲得清晰的圖片描述，這種無障礙友善度不僅是網站設計的基本門檻，也會在技術層面上為你的網站加分。
圖片失效時備援
網站在不同網速、不同裝置上瀏覽時，圖片可能會因格式、權限或網路問題而無法載入，這時候 alt 就能補充資訊，確保使用者不會完全錯失圖片所傳遞的訊息，這不僅改善使用者體驗，也降低跳出率，間接影響 SEO 評分。
提升圖片搜尋曝光機會
Google 圖片搜尋佔整體搜尋量的比例持續上升，若圖片有設定清楚的 alt，且與頁面主題一致，便更容易出現在圖片搜尋結果中，這對於商品頁、部落格圖解、視覺化內容等類型的網站尤其重要。
強化整體頁面的語意結構
網站的語意結構會影響搜尋引擎對主題的判斷，透過替代文字，搜尋引擎可以更全面理解圖片與文字之間的關係，有助於判定該頁面是否與某關鍵字主題高度相關，進而提升整體排名潛力。
如何檢查圖片有沒有設 alt？（附操作教學）
即使你已經了解如何撰寫優質的 img alt，若實際網站上仍有大量圖片未設置替代文字，仍然會影響使用體驗與搜尋表現，定期檢查圖片是否具備 alt 屬性，是網站維護與 SEO 優化中不可忽略的環節。
以下提供三種常見又實用的檢查方式，適合行銷人員、編輯、開發者操作使用：
使用瀏覽器開發工具查看
這是最直接的方法，不需要額外安裝工具，只要打開網站即可查看：
- 開啟網頁（建議使用 Chrome）
- 右鍵點擊圖片，選擇「檢查」或按下
Ctrl+Shift+I（Mac 為Cmd+Option+I） - 在右側的開發工具中，定位該圖片的 HTML 原始碼
- 查看
<img>標籤是否有alt="..."屬性，並檢查其內容是否正確描述圖片
這個方法適合快速檢查單張圖片或局部內容的設定情況。
使用 Chrome 擴充工具快速掃描
若網站圖片數量較多，建議安裝圖片 SEO 檢查的 Chrome 外掛，快速找出未設定 alt 的圖片：
- Alt Text Tester：點擊後會用框線標示所有圖片，並顯示是否有 alt 屬性
- SEO META in 1 CLICK：除了 alt 外，也可顯示 title、meta description 等完整 SEO 元素，適合做整頁檢查
這類工具操作簡單，適合內容編輯或行銷人員做初步檢查。
使用 SEO 分析工具批量檢查
若要針對整個網站進行全面性圖片 alt 掃描，可使用 SEO 專業分析工具：
- Screaming Frog SEO Spider：可針對所有圖片爬蟲掃描，輸出哪些圖片缺少 alt，或 alt 寫得過長、過短
- Ahrefs、SEMrush、Sitebulb 等工具也具備圖片 SEO 檢查功能，適合定期網站健檢使用
這些工具特別適合 SEO 專案管理者或網站維護人員，協助你針對 alt 屬性做結構性修正。
掌握 img alt，讓圖片與 Google 一樣看得懂！
圖片往往是網頁中最吸睛的內容之一，但若沒有正確設定替代文字，這些視覺元素就無法真正發揮價值，不論你是內容編輯、網站管理者還是 SEO 優化者，img alt 都應該是基本功的一部分。
透過本文，你已經了解以下幾點核心重點：
- img alt 是 HTML 中的替代文字，用來描述圖片內容，對使用者與搜尋引擎都極為重要。
- 它與 img title 屬性不同，alt 更具 SEO 價值，也符合無障礙設計的需求。
- 寫好 img alt 需要掌握具體描述、適當關鍵字、不堆疊、不重複、不過長等七大原則。
- 實際撰寫時應避免常見錯誤，如空白、關鍵字填塞、無意義的文字。
- 圖片的 SEO 表現、可讀性、使用者體驗，全都與 img alt 有直接關係。
- 使用瀏覽器、擴充工具與 SEO 分析工具，都能有效檢查圖片是否設定 alt。
替代文字雖然只佔 HTML 結構中的一小部分，但在搜尋結果競爭激烈的今天，它可能就是左右搜尋引擎能否正確收錄你內容的關鍵之一。
未來，隨著語音搜尋、圖像搜尋與跨媒體內容的整合，圖片語意的表達方式只會越來越重要，現在開始重視 img alt 的設定，不只是優化，更是為內容建立基礎語意架構的開始。
不會寫 img alt？讓玩構科技幫你打好圖片 SEO 基礎
寫好 img alt 不只是技術細節，更是網站 SEO 成效的重要關鍵，若你不確定該怎麼撰寫替代文字、如何檢查 alt 屬性是否完善，又或者想更系統性地優化整體圖片 SEO，歡迎與玩構科技聯繫。
網路行銷專注於網站結構優化與搜尋引擎最佳化服務，協助品牌改善圖片語意標記、提升內容可讀性，讓你的網站更容易被 Google 找到、讀懂、排名更高。
點擊下方連結，立即了解玩構科技如何幫助你的網站提升搜尋表現：
電話諮詢：07-6075007
LINE 詢問：點我聯繫 LINE 官方
