Img Alt是什麼？好的替代文字怎麼寫？SEO專家教你7秘訣！

Alt是什麼？認識Alt HTML屬性

在HTML Img Tag（圖片標籤）中，HTML Alt意思是圖片替代文字，也常稱為Alt屬性、Alt描述，用於當網路速度太慢、圖片檔案出錯、瀏覽器禁用圖像等等，導致圖片失效的時候，Alt替代文字可以描述圖像的內容，作為補救措施。

而HTML Alt用法主要有3個目的：

1. 當圖片失效的時候，可以作為延續閱讀體驗的輔助。
2. 幫助視力障礙者，透過電腦輔助工具，理解圖片內容。
3. 幫助搜尋引擎爬蟲理解圖片內容，有助於圖片SEO排名。

HTML Img Alt 和Img Title的差別

在HTML的Img Tag中，還有一個很容易與HTML Alt 用法搞混的功能，叫做HTML Img Title。

Img Title與Img Alt是兩個完全不同目的的用法，呈現效果也不相同：

• Img Title：作為圖片標題，用來標示圖片說明文字，當滑鼠移到圖片上就會顯示出來。
• Img Alt：作為圖片替代文字，用來描述圖片內容，當圖片失效時才會顯示，否則圖片正常顯示下，得從網頁原始碼才能看得見。

具體兩者呈現效果的差異，請往下滑看示範圖片。

Image Alt屬性與Img Title語法範例

從下列範例，可以看到兩者其實差別只有在使用的語法為title還是alt，對於不具有程式背景的SEO行銷新手來說，非常容易搞混淆，所以這邊請大家要畫重點分清楚囉！

Img Title 語法範例：

＜img src="圖片網址" title="滑鼠移上來就看得到文字"＞

Img Alt 語法範例：

＜img src="圖片網址" alt="圖片失效就顯示這段文字"＞

（範例呈現效果參考自：Wibibi網頁設計教學百科）

Alt Text最佳寫法

假設我們今天以一張正在睡覺的橘貓照片當作Alt的範例：

這時候獲得及格分數的Alt寫法會是：

<img src="cat.png" alt="橘貓">

這種寫法雖然寫出了照片的主體／主角，但缺乏形容詞，不具有描述性，不論是對於人類或是搜尋引擎來說，在理解這張圖片上給出的資訊都十分有限。

想要寫出更優秀的Alt寫法可能是：

<img src="cat.png" alt="一隻蜷曲四肢、躺在木地板中央，瞇起眼睛睡覺的橘貓">

看？這樣寫是不是讓圖像畫面更生動了呢？試想一下，當圖片失效、無法正常顯示的時候，這樣的描述是不是正能夠維持一定水準的閱讀體驗，讓讀者更具有想像空間？

所以盡量添加更多描述性的字眼，盡可能還原圖像，會是一個更好的Alt寫法。

既然我們上面給出了及格版的Alt寫法，那麼不及格的會長怎麼樣？

不建議的Alt寫法：

1. ＜img src="cat.png" alt=" "＞

當你使用alt=" "的寫法，對於電腦來說這表示沒有任何替代文字存在，表示這張圖片很可能不具有意義，會被當成裝飾性圖片。

2.＜img src="cat.png" alt="一隻貓,橘貓,睡覺貓咪,可愛貓咪"＞

當你使用這種濫用關鍵字的填充寫法，很可能會讓搜尋引擎認為你在進行不恰當的操作，甚至嚴重情況下，很可能被判定成黑帽SEO，而導致被搜尋引擎懲罰的風險。

Img Alt 為什麼對SEO很重要？

Welly的團隊每一次在教客戶SEO操作時，總是會特別強調記得填寫Alt替代文字，這是為什麼呢？先前了解Alt的用途與程式碼後，再來讓我們談談填寫Alt SEO有什麼好處。

(一) 圖片Alt 替代文字對視障者更友善

首先從人權角度來說，隨著科技發達，網路使用者不只有視力正常的人，一定也存在許多視力不佳的使用者，不論是年紀大、視力退化，或是先天視力障礙的人，他們一樣有善用網路資訊的權利。

所以這時候網頁使用者若能好好填寫Alt替代文字，就能幫助這些視力不佳的人們，在使用電腦輔助工具之下，也能好好地讀懂你的網頁內容，同時側面也展現了品牌本身的細心與友善喔！

(二) 圖片失效時，Alt 替代文字輔助閱讀

網路使用期間，難免會遇到難以預料的狀況，例如檔案庫圖片突然不見了（src屬性錯誤）、用戶網速較慢、瀏覽器禁用圖片等等，導致圖片無法正確加載出來。

這時候如果你先前就有好好填寫Alt替代文字，那麼文字能夠替你彌補一部分閱讀體驗不佳的問題，透過恰當的形容引導讀者想像力，一邊讀你的網站內容，一邊腦中自然浮現畫面。

而我們都知道，所謂廣告可以說是販售夢想給消費者，所以當讀者腦中有相應畫面的時候，自然也會對你的品牌留下更深刻的印象！

(三) Alt替代文字，有助於圖片SEO

說了這麼多，其實最關鍵的還是Alt替代文字有助於圖片SEO排名！

儘管搜尋引擎已經十分進步，能夠流暢讀懂人類的遣詞用字，但在圖片解讀上卻依然還有所侷限，所以如果不填寫替代文字，搜尋引擎爬蟲是很難「看懂」你的圖片蘊含何種意義，自然也不會幫你的圖片做排名。

而隨著未來SEO視覺化搜尋趨勢越來越興盛，使用圖片、影片搜尋的用戶只會越來越多，這時不妨提早卡位，善用Alt替代文字爭取讓圖片也擁有曝光，做好視覺方面的SEO佈局，把圖片SEO也一並鞏固好！

（還以為圖片 SEO 不重要？那你應該要來認識 SERP！SERP是什麼？15種搜尋結果元素與SERP意思詳解！）

（其他延伸閱讀：SEO是什麼？SEO優化怎做？SEO搜尋引擎最佳化完整教學）

寫出好的Img Alt必備7個原則！

最後，我們參考國外SEO專家MOZ的文章，提供你7個寫出好Img Alt的原則。

1.盡可能具體描述圖片

正如上面我們所強調的，請盡量用文字還原圖片內容，才能達到Img Alt替代文字的目的。若該圖片只是設計、裝飾目的，則請將圖片放於CSS中，而不是HTML。

2.保持較短的字數

大多數螢幕會在Img Alt顯示到125個字符的時候截斷，這大約等於125個英文字、62-63個中文字，所以請盡量保持在此字數限制之內，以免造成不佳的閱讀體驗。

3.使用目標關鍵字

Img Alt能夠在SEO方面，為你的圖片爭取曝光，因此請使用與文案內容相同的核心關鍵字來描述圖片，才能夠讓搜尋引擎理解這張圖片與該關鍵字高度相關，進而獲取你想要的關鍵字排名。

4.避免濫用關鍵字／關鍵字填充

搜尋引擎不會懲罰寫得不好的Img Alt，但如果你將其作為填充關鍵字，過度濫用它，則很可能會被搜尋引擎判定為黑帽SEO，導致你的網頁被懲罰，所以請盡量還是以目標關鍵字＋描述性字眼來撰寫。

好奇使用黑帽SEO手法會有什麼下場？請看這篇：黑帽SEO是什麼？9種危險手法曝！萬一被抓請這樣做

5.避免以圖片取代文字

這不是針對Img Alt提出的建議，而是基於SEO的網頁基本原則，由於搜尋引擎沒辦法讀取圖片中的文字，所以重要內容請以網頁文案為主，不要用圖片取代文字。

6.無須在Img Alt中再度強調圖片、照片

除非你的目標關鍵字是照片、圖片相關，例如濕疹照，否則Img Alt已經假定該替代文本就是指圖片了，所以不必再額外強調。

7.按鈕若為圖像，也要設定Img Alt

這一步驟很多人會忽略，當你的按鈕是用圖片下去製作的時候，請記得也要設定Img Alt，例如搜尋、註冊、立即申請、立即前往官網等等。

以上就是Img Alt的介紹，如果您想要了解更多SEO資訊，或者想要獲取免費的SEO健檢報告，都可以透過下方黃色按鈕與Welly團隊聯繫！