圖片 Alt text 是什麼？html img alt 替代文字優化！Image SEO

5.1K

Alt text 的英文名稱叫做 alternative text ，中文意思可以叫做「替代文本」，在 HTML 網頁程式碼裡面也可以稱作「alt 屬性」。html img alt 屬性主要是用來描述一張圖片，畢竟 Google 不可能光靠圖片檔名就知道這張圖片大概是跟什麼有關，因此在圖片的 alt 屬性裡面加上描述文字就變得很重要，這也是 SEO 優化的一環，圖片優化英文名稱又叫做 Image SEO。

當你在進行 SEO 優化時，應該將每個 SEO 優化項目都精準的做到位，而 圖片 Alt text 就是其中一個優化項目，Google 必須靠 Alt text 才知道你這張圖片跟什麼有關。或許未來 Google 對於圖片的辨識能力會提升，到時候 Alt text 的重要性會降低，但是現階段，Alt text 優化（圖片 Image SEO）就是很重要的一個 SEO 優化項目，甚至圖片檔名也是優化項目之一。

如果你還不知道圖片的 Alt text 是什麼，或是你不知道應該怎樣在圖片的 alt 屬性加入描述性文字，或是還不知道怎樣對圖片進行優化，本篇文章都會有完整教學。

圖片 Alt text 是什麼意思？

Alt text 基本上指的就是 HTML 網頁程式碼裡面的<img>標籤裡的 alt 屬性（如下圖）。每張圖片在 HTML 裡面都是<img>標籤，而 alt 屬性主要是用來描述這張圖片是跟什麼有關的。

<img src="123.png" alt="圖片 Alt text">

例如「貓熊先生」網站首頁的網頁原始碼你就可以找到，貓熊先生的 Logo 圖片其實也加上了 Alt 屬性，而 Alt text 文本的值為「貓熊先生」（alt=”貓熊先生”），用來描述這張圖片就是「貓熊先生」的 Logo。

簡單的說，圖片的 Alt text 就是用來告訴搜尋引擎，這張圖片是“跟什麼有關？”，用 Alt text 來替代文字，因為圖片無法直接被 Google 理解，但 Alt text 裡面的文字則可以用來幫助搜尋引擎理解這張圖片。

Html 圖片 Alt text 如何正確加入替代文本？

很多人可能會問，到底怎樣的 Alt text，才是好的 Alt text。關於這點，Matt Cutts 在 Youtube 影片上有一隻影片，專門說明圖片的 Alt text 到底要怎樣寫比較好，這隻影片建議大家看完。

簡單的說，就是要用很精簡的字，精準的描述這張圖片到底是跟什麼有關，並且避免關鍵字堆疊，這樣就可以了。

圖片 Alt text 如何進行 SEO 優化（Image SEO）？

關於 Alt text 的優化技巧，其實 MOZ 有篇文章有做完整講解，有興趣的人可以參考：Alt text 。貓熊先生結合自已的實務操作經驗，總結以下幾點。

1.圖片 Alt text 包含主攻關鍵字

由於 Alt text 依然是 SEO 優化項目之一，因此 Alt text 包含關鍵字，也是很重要的。但你必須確保你的圖片跟你主攻的關鍵字是有關的，你不能拿一張毫無相關的圖片，然後加入到你的文章裡面，然後在 Alt text 裡加入關鍵字，這是非常糟糕的做法。

雖然 Alt text 包含關鍵字是最佳情況，但如果你的圖片實在是跟關鍵字無關，那麼也不用硬要在 Alt text 加入關鍵字。

2.Alt text 要避免關鍵字堆疊

雖然 Alt text 裡面要加入主攻的關鍵字，但這不是叫你要進行關鍵字堆疊，事實上關鍵字只要出現一次就夠了，剩餘的文字你應該要盡可能的用來精準描述這張圖片到底是跟什麼有關。

3.Alt text 要盡可能的精準描述圖片

就跟 Matt Cutts 在影片中的建議一樣，你的 Html Alt text 應該要精準的描述你的圖片，如果你的圖片跟你主攻的關鍵字無關，那麼也不需要硬要加上關鍵字。

4.Alt text 要保持精準且簡短

優化圖片的 Alt text 不能像寫 Meta Description 一樣那麼長。要能夠很簡短又能精準的描述這張圖片，當然如果還能同時包含關鍵字，那是最好的。

5.可以用文字，就盡量不用圖片

圖片應該是文字的輔助，雖然國外有 SEO 網站曾經研究過，搜尋排名跟一篇文章裡的圖片數量有相關性，也就是排名較前面的文章，通常平均有比較多的圖片。但你的圖片應該是文字的輔助，如果你可以用文字來完整解釋你的觀點，就不要自己硬將文字做成圖片。

貓熊先生看過最糟糕的做法是，直接將文章標題做成圖片，這實在是太糟糕了。基本上文章頁面的標題應該使用 H1 標籤，但貓熊先生看過有網站將文章標題拿掉，並且直接將文章標題做在圖片裡面，用圖片裡面的文字取代標題文字，這是非常不好的做法。

6. Alt text 要避免無意義的文字

Alt text 要精準描述你的圖片，所以要盡可能的將毫無相關的字拿掉。例如如果是一張黑色的狗的圖片，你的 Alt text 可能會命名成“黑色的狗”（只是舉例），但不要命名成“這是一隻黑色的狗”，前面的「這是一隻」這幾個字，完全是多餘的。

7.圖片按鈕也要加上 Alt text

如果你的網頁上有按鈕，而且該按鈕是用圖片做的，不要忘記一樣要加上 Alt text，例如可以加上「alt=”送出”」、「alt=”加入購物車”」…等等。

8.圖片檔名也要優化

圖片檔名其實也是 SEO 優化項目之一，雖然如此，但基本上不建議使用中文的圖片檔名，而是要將中文翻譯成英文之後，使用英文的圖片檔名。你的圖片檔名也可以包含關鍵字，但不要堆疊關鍵字，請使用有意義的字來當作你的圖片檔案名稱。

Image alt text 跟 Image title 差在哪裡？

在圖片標籤<img> 裡面，除了 Alt 你可能還會發現另外一個屬性叫做 title，這兩個屬性的作用是不太一樣的。以下方的網頁程式碼來舉例。

alt 是指「圖片替代文字」，當你在進行圖片 SEO 優化時，也是優化 alt 屬性，而 title 屬性裡面的文字，則是使用者使用瀏覽器瀏覽網頁時，當使用者將滑鼠移動到圖片上方時會顯示的文字。這是 alt 跟 title 之間的差別。

<img src="圖片網址" alt="圖片替代文字" title="圖片標題">

另外值得一提的一點是，當你的圖片連結如果失效了，也就是你的網頁圖片連結失效因而無法顯示在網頁上時，這時會顯示 Alt text 裡面的文字，而不是 title。

Image title text 需要優化嗎？

既然 Alt text 才是替代文本，那麼可能有人會問：那 title text 需要優化嗎？

基本上貓熊先生在寫文章的時候，會順便填寫圖片的 title 屬性，因為也不花時間。有時候很懶的時候， Alt text 跟 Title text 填寫的文字是一模一樣的（XDD）。

圖片 Alt text 常見問題