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

 

 

什麼是Alt Text？

在HTML圖片標籤中會用Alt規範替代文字，也稱作「alt屬性」、「image alt」，主要功能是用來描述圖片的內容。如果今天網頁中的某張圖片因為網速過慢、圖檔遺失等原因無法正常顯示，Alt Text的功能便能在此刻表現出來，讓使用者能透過文字描述想像、理解圖片。替代文字的技術亦協助視障、色盲人士，或其他有這項需求的用戶掌握圖片內容，網頁中其他非文字的內容，例如影片或音檔，也能添加Alt text，提供更好的使用者體驗。

 

 

 

HTML Img Alt與Img Title的差別

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

 

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

 

 

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

 

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

 

 

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

 

 

 

 

Img Alt對SEO的三大益處

了解Alt替代文字的用途後，再來談談運用它對SEO會有哪些好處。

 

協助搜尋引擎理解內容、提高SEO排名

搜尋引擎無法像我們一樣直接讀取、認知圖片內容，透過在Img Alt提供圖片的替代文字，能協助搜尋引擎更好地理解、判斷內容，同時加入SEO關鍵字，讓搜尋圖片的人發現你的網站，增加網頁曝光機會，進一步提高網站在搜尋引擎中的排名。

 

輔助閱讀、提高使用者體驗

當圖片因網速過慢或其他原因無法正常顯示時，可能導致閱讀無法連貫，此時若有預先填寫替代文字，便能彌補圖片缺失的問題，使用者不用憑空猜想，而是能藉由替代文字補足圖片內容。

 

提高網站的可訪問性

對於視障人士而言，圖片不像文字能直接被螢幕閱讀器理解，Alt替代文字的用途之一，在於讓視障人士理解網頁的全部內容，打造無障礙閱讀環境，提高網站的可訪問性。

 

 

撰寫Alt Img的七大原則

看到這裡，想必對Alt Img已經有了不少的認識，好的Alt Img能提升使用者體驗與網站的搜尋引擎排名，最後就來聊聊該如何撰寫替代文字的內容吧！

 

具體描述

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

 

簡明扼要

盡量以最精簡、明確的敘述來形容圖片，過長的Alt text除了會讓人沒有耐心閱讀，也可能導致重點不明確、主題發散。

 

適當使用關鍵字

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

 

避免忽略任何一張圖片

很多時候並不是只有文章內容中會有圖片，圖片連結或按鈕是常被忽略的地方，如果有相關的設定記得要加上Img Alt。

 

避免重複

在同一個頁面中，應該要避免使用同樣的一段文字來敘述不同的圖片，使用不同的替代文字能幫助使用者更清楚地區分各張圖片的主題與內容。

 

避免使用空的Alt屬性

搜尋引擎會透過替代文字來認識圖片內容，若是在圖片中設定空的標籤屬性，可能讓搜尋引擎錯誤理解網站。

 

避免在描述中加上「圖片」、「照片」等字眼

如字面上的意思，Img Alt本就是作為圖片的替代文本使用，不必再次強調這是一張圖片。

 

 

延伸閱讀：SEO是什麼？SEO行銷入門基本概念全解析！

延伸閱讀：網站/網頁設計公司這樣挑不踩雷！5大原則教你找到專業設計公司

 

 

 

＊ 歡迎分享這篇文章，分享時請加入文章來源：凱士網頁設計公司

 

 

 

 

 

 

Eric Wang 凱士網頁設計公司 專案顧問 Eric，擁有設計、理工、管理等跨領域背景，樂於和不同領域的專業工作者進行分享與討論。在專案工作外，同時也兼任大學行銷系業界講師及企業內訓課程講師，長期致力於「網頁設計白話文運動」。