相信新手剛踏入 SEO 百慕達的你一定都知道，搜尋引擎對圖片的理解限制相對較多，那我們要怎麼將「圖片」的重要訊息傳遞給搜尋引擎呢？那就是本篇的重點「設置 Image Alt」的重要度啦！圖片的解語花 Image Alt 到底是什麼？跟 Image Title 到底差在哪？Alt Text 規劃原則又有哪些？如果看完前言還在迷茫的你，就趕快進入本文一起了解 Image Alt 對圖片 SEO 的重要性！
什麼是 Alt Text？Image Alt 屬性背景介紹！
Alt 又稱為 Alt 描述 或 Alt 屬性，是 Image 標籤常用的基本屬性之一，而 Alt Text 則是我們常說的「替代文字」，意即寫在 Alt 屬性中的描述性文字，當圖片失效或是無法顯示等情況時，才會代替圖片顯示該段「描述性文字」，所以建議在規劃 ALT 屬性的內容時，可以將圖片的特色皆表達出來，就算圖片失效無法顯示時， Alt Text 也可發揮它的效用，讓使用者在腦中也可浮現圖片原有的樣子！
設置 HTML Img Alt 主要優點有哪些？對 SEO 有什麼助益？
除了圖片失效可以讓使用者腦補的功能外，Alt 屬性主要還有下方優點：
-
改善使用者體驗：
若你網站中破圖很多又沒設置 Image Alt Text，頁面可能還沒捲動個兩下，使用者就阿雜到氣火攻心，一怒之下直接跳出，甚至還會影響回訪的意願；反之，如果有設置完善的 Image Alt Text，就有一定機率提高使用者的回訪意願，至少可以腦補說故事，將使用者體驗的傷害降至最低。
-
閱讀無障礙：
若有設置完善的 Image Alt Text，也可幫助視力障礙的族群，透過特定閱讀器將其轉換成音頻，進而理解圖片上面的內容，降低閱讀上的隔閡。
-
有利搜尋引擎理解圖片內容：
由於搜尋引擎不易理解圖片上的資訊，在常見圖片 SEO 的操作上，都會建議設置 Image Alt Text，以利搜尋引擎理解圖片上的內容。
-
提高主題相關性：
沿用第三點的觀念，由於搜尋引擎可以透過 Image Alt Text 來判定圖片主題，故在 Alt Text 的設計上，亦可加入「合理的」關鍵字布局，來集中頁面主題的相關性，進而增加整體頁面的競爭力度。
-
增加頁面曝光機會：
若圖片有設置 Image Alt，就有高機率會出現在「圖片」的搜尋結果中，對於一些使用者在搜尋時，傾向在圖片的搜尋結果上尋找靈感的關鍵字來說，透過同時在圖片搜尋版位中競爭排名，無疑可大大的增加曝光及進站的機會。
舉例來說，若你是一個小小的品牌電商，相較跟大電商競爭網頁搜尋引擎結果那前十名的名額，不妨改變策略，同時透過關鍵字研究來設計 Img Alt 的內容，說不定也是另外得到流量、獲得新客的另一個突破方向！
? 更多圖片 SEO 項目及操作歡迎參考：
HTML Img Alt 與 Img Title 的差異在哪裡？
簡單介紹完 Img Alt 後，有一點概念的小夥伴一定會舉手發問「那 Img Alt 跟 Img Title 的差別在哪裡？不是都在形容圖片嗎？」，剛有些基礎的大家一開始大概會有 87% 會搞錯這兩個的用途及呈現方式，其實這兩個只是有一咪咪血緣關係的遠房親戚，從根本來說就是不一樣的屬性，Alt 屬性只有特定標籤才可以使用的屬性，然而 Title 是通用屬性，也就是所有 HTML 都可以通用的屬性，這樣講很複雜齁，應該有很多小夥伴開始皺眉頭了，接著就讓我們用實例，簡單來看看這兩個放在 Img 標籤時的差別在哪裡吧！
註：以下範例僅以放在 Img 標籤做示範
- HTML Img Alt：為「圖片替代文字」，意即當圖片失效等破圖情況，這段文字會「代替」圖片來呈現，讓使用者可以憑空想像出圖片的一段描述性文字
- HTML Img Title：為圖片的「標題」，就是當你滑鼠指標指過去圖片時，會自動出現的一段文字
HTML Img Alt 與 Img Title 的語法範例說明
我們舉個簡單的例子來對比就比較不會混亂啦~以下面這段語法及圖片為例
_____________________________________________________________________
<img src=”圖片網址” alt=”賞櫻的可愛歐告” title=”帶著歐告踏青去“>
_____________________________________________________________________
Alt 屬性不建議的寫法範例
如我們前面提到的，HTML Img Alt 的內容可以讓爬蟲更了解圖片想表達什麼，除了可集中主題增加頁面競爭力外，也有一定機率在圖片版位曝光，帶來意料之外的流量，以下簡單列舉在設計 Image Alt 時，有哪些是常見但「不建議」的寫法。
-
空的 Alt 屬性：
<img src=”20221111.jpeg” alt=””>
-
搪塞關鍵字：
<img src=”20221111.jpeg” alt=”狗,歐告,黑狗,黑犬,土狗,米克斯,賞櫻,衝鋒衣”>
-
無意義圖片分類名稱：
<img src=”20221111.jpeg” alt=”image01″>
最佳寫法有公式？及格的 Alt Text 怎麼寫？
差的寫法道理懂了就很好理解，那究竟好的 Alt 內容該怎麼寫？下方我們一樣簡單舉例來說明，用一張圖片比較「資優生」跟「留級生」的差別，大家就會有豁然開朗的感覺啦~
? 留級生寫法（poor）：
<img src=”20221111.jpeg” alt=”狗,歐告,黑狗,黑犬,土狗,米克斯,游泳,寵物教室,寵物友善,寵物救生衣”>
? 及格線寫法（okay）：
<img src=”20221111.jpeg” alt=”黑狗米克斯”>
? 資優生寫法（excellent）：
<img src=”20221111.jpeg” alt=”黑狗米克斯穿著救生衣學游泳”>
這樣一比較是不是就比較有 feel 了呢，其實 Image Alt Text 內容規劃的主要重點就是寫出可以描述你圖片意象的內容，不用刻意搪塞關鍵字就可以啦~
HTML Img Alt 規劃 4 重點！簡單寫出亮眼的替代文字！
我要怎麼寫出所謂「好的」Alt 描述？只要遵循下方簡單的幾個原則再搭配上面的範例，大家都可以輕鬆寫出合格的 Image Alt Text！
- 描述情境：
Alt 屬性存在的重要意義就是以文字來代替圖片說明，在破圖等圖片失效情況也不影響使用者的閱讀體驗。
- 簡明扼要：
用最少的字來形容圖片的情境，且避免無意義的說明，避免主題發散。
- 適當使用目標關鍵字：
這點非常重要！如果搪塞關鍵字有可能會被判定為黑帽操作進而被處罰，以 awoo 的經驗，建議每個目標關鍵字在各張圖片最多帶到一次即可。
- 容易忽略的圖片：
有些圖片明明也有一定重要度，但總是會被大家遺忘要加上 Alt 屬性（常見例子：如表單按鈕、圖片連結），由於這些也是頁面的重要資訊，在規劃上也要記得設定 Image Alt Text！
那我怎麼檢查是否有設置 Alt 屬性？
現在大部分的線上工具也都有 Alt 檢查功能，但從便利性來說，筆者個人比較推薦直接安裝 Chrome 外掛，簡單一鍵查找，在視覺上也比較可以一目了然知道哪張圖片沒有設置 Alt！以下推薦常用的兩款外掛給大家參考：
（圖片來源：維基百科）
? 更多好用的、SEOer 愛用的 Chrome 外掛歡迎參考：
SEOer 推薦的 Google Chrome 擴充功能一篇全攻略！
結語：圖片 SEO 從 Img Alt 開始
就像我們前面介紹的，Alt 屬性主要是「描述圖片的一段敘述性內容」，在搜尋引擎方面可以讓爬蟲更友善的理解圖片、集中頁面主題；於使用者體驗上，當圖片失效等破圖情況時，也能有效降低閱讀上的困難。雖然 Alt 屬性相對其他 SEO 策略，只是微不足道的小項目，但有時候當對手都很強的時候，說不定這小小的 Alt 小兵也能立大功，成為在眾多競品中脫穎而出的契機之一！
如有任何自然流量增加的問題，或想瞭解關於 awoo SEO 優化服務，歡迎立即諮詢，將有 awoo 專業顧問與您聯繫。
