文章最後修改於 2025-01-15
Img Alt 是什麼？會影響 SEO？善用 Img Alt 讓搜尋引擎愛上你的網站！
（一）Alt 是什麼意思？
Img Alt 的全名是「Image Alternative Text」，也稱為 「alt 屬性」、「alt 描述」，SEO 圈內稱呼為「圖片替代文字」。
當網頁上的圖片因為網路速度慢、圖片損毀，或是瀏覽器不支援圖片顯示無法正常顯示時，Img Alt 就會發揮作用。
使用一段文字來取代圖片的位置，告訴使用者圖片上原本呈現的內容是什麼。
此外，Img Alt 也能幫助使用者透過螢幕閱讀器（協助視覺弱勢族群以朗讀形式表達文字的功能）了解圖片的意義，是網頁設計中不可忽視的元素之一。
假如你的網站賣女性連身洋裝，圖片 Img Alt 可以寫成「暖紅色一件式修身洋裝」，一方面視覺弱勢族群能透過朗讀 Alt 理解服裝款式；另一方面也能增加網站在「圖片」搜尋結果頁面出現的機會。
（二）Img alt 與 SEO 之間的關係
不只是圖片發生問題對使用者的替代文字，Img Alt 對搜尋引擎來說也很有幫助。
不像人類可以看到圖片並理解意義，搜尋引擎的爬蟲無法「看到」圖片，卻能辦認 Img Alt 的描述。
幫助圖片被正確分類，並提升在圖片搜尋結果中出現的機會。
就像是視障者需要凸點點字系統才能以觸覺理解文字，我們也可以說 Img Alt 就是搜尋引擎的「點字」。
因此妥善利用 Img Alt ，對於操作 SEO 來說，能達到以下效果：
- 網頁圖片發生錯誤時，可以彌補使用者文章閱讀體驗
- 視覺弱勢族群可以透過朗讀 Img Alt 功能理解圖片內容
- 讓搜尋引擎爬蟲容易抓取圖片內容分門別類
- 增加文章曝光版位
HTML Img Alt 比較 Img Title？了解差異，網站排名更上一層樓！
粗淺介紹完 Img Alt 後，可能很多人會立即聯想到常被使用的「Img Title」 這個功能。
HTML Img Alt 與 Img Title 之間究竟有什麼差別？兩者不都是在圖片的後台設置說明項目嗎？
以下就以兩者的使用目的、使用效果做進一步的比較說明：
（一）使用目的
- Img Alt 的使用目的
主要目的是為了改善圖片無法顯示時的用戶體驗，圖片錯誤時，才會以文字當作備案，呈現在圖片原先版位。
- Img Title 的使用目的
不管圖片是否正常呈現，都會以額外資訊作為補充說明出現。
滑鼠移動至圖片上方時就會以滑鼠旁的小浮框樣式出現。
（二）使用效果
- Img Alt 的使用效果：「圖片替代文字」
可以理解成利用點字系統為搜尋引擎更有效率收錄圖片並進行分類，有助於網站 SEO 提升。
- Img Title 的使用效果：「圖片標題」
像是一個額外的「提示小幫手」，當使用者對圖片有興趣想得到更多資訊，將滑鼠移到圖片上方時，它可以提供額外的訊息。
4 個關鍵技巧寫出優秀 Img Alt！圖片優化不求人！
正確的 Img Alt 在 HTML 程式碼會呈現：
<img src=”檔案名稱.jpg” alt=”簡潔精準說明圖片內容”>
除了正確之外，要怎麼樣才能把 Img Alt 寫得更好呢？以下是 4 個務必掌握的撰寫原則：
- 具體還原內容
Img Alt 是圖片無法顯示時的替代文字，因此需完整、具體描述圖片意義。
如果圖片只是裝飾用途，建議放到 CSS 背景非 HTML，避免使用者花費時間閱讀；也避免搜尋引擎爬蟲被突如其來無關內容干擾關聯性判斷。
- 語氣流暢
以順暢的語句撰寫圖片說明文字能讓使用者及搜尋引擎能更快速、簡單的理解圖片。
- 加入核心關鍵字
使用與撰寫文章相同的核心關鍵字融入圖片說明文字，可以讓搜尋引擎判斷圖片與文章主題有更高的關聯性，增加圖片在相關搜尋結果中的曝光機會。
- 簡潔字數
字數冗長的 Alt 容易讓人失去耐心，且許多螢幕顯示會在超過 125 字元時截斷過多內容，影響閱讀體驗，簡潔清楚呈現 Alt 是最好的方式。
延伸閱讀：🎈SEO文章不只關鍵字｜我靠5步驟、3技巧寫出衝擊排名的文章！
5 種撰寫 Img Alt 常見地雷，不再拖流量後腿！！
錯誤的 Img Alt 在 HTML 程式碼可能會是：
<img src=”1.jpg” alt=””>
問題在於
- 圖片檔名以無意義編號命名
- 沒有圖片說明文字
我們以 5 個簡單大原則說明設定 Img Alt 時，需要注意哪些重點，避開誤區。
- 說明不夠清楚
當我們用抽象模糊的文字說明圖片內容，使用者及搜尋引擎都無法從字面上獲得更多實用資訊，完全失去 Img Alt 存在的意義。
舉例來說，「兩位男高中生正在教室講台上練習演講比賽」會比起「練習」的 Img Alt 設定更精準。
- 不用重複標示「照片、圖片」
Img Alt 本身已經是替代文字，預設描述的就是圖片內容，重複說明內容是一張圖片這件事會顯得多餘又浪費空間。
- 不要濫用關鍵字
值得注意的重點是，Alt 使用核心關鍵字要適當且合理。
若是無關圖片意義濫用關鍵字、胡亂搪塞過多關鍵字，都可能會被搜尋引擎判定為黑帽 SEO ，沒有獲得加分效果就算了，反被懲處完全是因小失大。
- 不要留空
Img Alt 留空就像考試時，明明會答題卻選擇不寫，直接交白卷放棄。
使用者會因為無法得知圖片內容是什麼而感到困惑；搜尋引擎也無法理解圖片，減少圖片出現在搜尋結果中的機會。
- 不要忽略任何圖片
除了文章中穿插的輔助說明圖片，網頁上其他帶有功能性質的圖片（像是跳轉按鈕、連結按鈕等）也最好加上 Img Alt 。
按鈕圖片可以帶有功能性描述，例如「搜尋」或「立即註冊」。
如何檢查 Img Alt？這些工具和系統技巧你一定要學！
當網站操作者完成頁面內容，可以檢查 Alt 是否有無缺漏。
- 系統檢查方式
不同的電腦作業系統檢查 Alt 方式稍有不同。
1.Windows 系統
（1）按下 F12 或 Ctrl + Shift + I，開啟開發人員工具。
＊也可以從瀏覽器右上角的選單進入「更多工具」>「開發人員工具」。
＊又或者在畫面中按下滑鼠右鍵，再點選「檢查」也可以查看。
（2）進到開發人員工具後，再點選選擇「元素工具」，接著將滑鼠移到要查看得圖片，在開發者工具裡就會出現對應的程式碼。
（3）找到圖片元素，即可查看 Alt 屬性。
2.macOS 系統
（1）按下 Command + Option + I，開啟開發人員工具。
＊或者在網頁中右鍵選擇「顯示網頁原始碼」。
（2）找到 <img> 標籤，就能檢查 Alt 屬性是否設置。
- 外掛工具
最快的方法是安裝瀏覽器的外掛工具，比如 Alt Text Tester 或 SEO META 1 Copy。
這些工具可以視覺化呈現，一鍵檢查網頁中圖片的 Alt 是否設置好，省下手動耗時檢查的時間。
如果你的網站沒有在搜尋結果中出現，你不只流失大量的客戶，競爭對手也正在用 SEO 蠶食你的訂單！
想透過 SEO 增加業績嗎？立即聯繫 ADBest！
延伸閱讀
🎈nofollow是什麼？對SEO有益？3種必懂使用情境解析！
