什麼是 alt 屬性？圖片 SEO 必做的基礎設定

很多老闆或設計師在做網站時，會把心思都放在畫面好不好看、圖片夠不夠精緻，
卻常常忽略一個很基礎的設定： alt 屬性。

結果網站設計完成，看似漂亮，但在 Google 眼裡卻是「一片空白」。搜尋引擎不會像人一樣「看懂圖片」，沒有 alt，圖片就無法傳達任何意義，SEO 自然也得不到加分。

內容目錄

什麼是 alt 屬性？

Alt 屬性，全名是 alternative text，中文常稱為「替代文字」。它是寫在 HTML <img> 標籤裡的屬性，用來描述圖片的內容。
例如：

<img src="website-design.jpg" alt="專業網站設計範例，展示 RWD 響應式版面">

這一段文字不會顯示在頁面上，但 Google 會讀取，同時當圖片載入失敗時，瀏覽器也會顯示 alt 文字。
身為工程師，我每天都在處理這種屬性設定，看似小細節，其實對網站設計能不能「被看見」非常關鍵。

為什麼 alt 屬性對 SEO 很重要？

幫助 Google 理解圖片：搜尋引擎不能「看圖說故事」，但可以讀取文字。

✅ alt 屬性的重要性

圖片搜尋排名：很多潛在客戶透過 Google 圖片搜尋進到網站，alt 屬性就是圖片能否被收錄的關鍵。
網站無障礙設計（Accessibility）：視障者透過螢幕閱讀器會讀出 alt 文字，這是國際 WCAG 標準。
提升整體內容語意： alt 文字如果與文章主題、網頁設計服務相關，會強化該頁的 SEO 主題一致性。

常見錯誤與正確撰寫 alt 的技巧

📌 alt 屬性撰寫：錯誤 vs 正確

❌ 空白或隨便填 alt=”” 或 alt=”圖片1″	✅ 簡短描述 alt=”專業網站設計案例”
❌ 關鍵字堆疊 alt=”網站設計,網站設計公司,網頁設計,SEO”	✅ 自然帶入關鍵字 alt=”響應式網站設計案例”
❌ 與圖片內容無關電腦照片 → alt=”最便宜網站設計”	✅ 符合圖片內容電腦照片 → alt=”設計師操作筆電進行網站開發”
❌ 缺乏一致性文章主題「網站設計」 alt=”熱門旅遊景點”	✅ 保持一致性文章、標題、圖片 alt 都圍繞在「網站設計」主題

很多網站設計完成後 alt 屬性都有，但卻常常犯下以下錯誤：

範例：

 
<img src="website-design.jpg" alt="專業網站設計範例，展示 RWD 響應式版面">

這樣 Google 知道這張圖片與「網站設計」相關，同時客戶若搜尋「台北網站設計」，圖片也可能出現在搜尋結果中。

我的專業建議

在這個 AI 時代下，我不敢說是不是明天一早起床打開手機，Google 的爬蟲就已經能完全讀懂圖片的內容。現在的搜尋引擎早就開始支援「以圖搜圖」，甚至會根據你的搜尋紀錄去分析搜尋意圖。就像過去的 SEO keyword meta 欄位，Google 已經放棄了。
但是！在 Google 官方還沒宣布「不需要 alt」以前，如果我們想要好成績，就要多做一道功，讓爬蟲能好好讀懂你的網站。