Img Alt是什麼？Img Alt 3大優點與Img Alt寫法3大原則！
Welly SEO 編輯部
2023-12-28更新
# SEO優化
# 內容SEO
# 技術SEO
Img Alt怎麼寫？與HTML Img Title有什麼差別？Img Alt SEO有哪些好處？本文將統整Img Alt對SEO排名的優點，並且分享撰寫Img Alt SEO的3大原則與應該避免的3種Img Alt寫法！
Img Alt是什麼？3分鐘認識HTML Img Alt！
（一）HTML Alt意思代表什麼？圖片替代文字還有哪些稱呼？
你可能在網路上曾經看過有人問「Alt Text是什麼」、「Alt Tag是什麼」，其實這些指的都是Img Alt，英文全名是Image Alternative，中文名稱為「圖片替代文字」，也稱作「Alt屬性」、「Alt描述」。
Img Alt是HTML網頁語言中的一種屬性，其主要功能是在圖片無法正常顯示時，該區塊將顯示相關文字描述，以確保用戶在閱讀文章時仍能大致了解原始圖片的內容，並且同時能夠提高搜尋引擎排名的機會。
Img Alt（圖片替代文字）是HTML圖片標籤的屬性，其用途在於圖片失效時，能夠顯示的描述性文字，以便讓用戶及搜 尋引擎了解圖片內容。
HTML Img Title是什麼？跟Img Alt有什麼不一樣？
（一）HTML Img Title介紹：Img Title的作用與功能
HTML Img Title代表的是「圖片標題」，可以想像成是該圖片的名字。當你的滑鼠移動到圖片上時 (滑鼠hover效果)，網頁上會自動出現一段文字，該文字即為HTML Img Title。
而Img Alt則是在圖片無法正常顯示時才會出現的替代文字，當圖片能夠正常呈現時，Img Alt替代文字則不會主動顯現。
網路上有些文章會把兩者混肴、寫成「Img Alt Title」，這是不正確的寫法。因為Img Alt跟Img Title雖然都是HTML語法標籤，但是其實是不同的東西，用途也並不一樣。以下就讓我們來為你做個整理。
HTML Img Title與HTML Img Alt之間通常相互搭配使用，可以參考下方3種語法範例：
📝 HTML Img Title語法範例
< img src="圖片網址" title="滑鼠移動到圖片上時要顯示的文字" >
📝 HTML Img Alt語法範例
< img src="圖片網址" alt="圖片失效時要顯示的描述替代文字" >
📝 HTML Img Title + HTML Img Alt語法範例
< img src="圖片網址" alt="圖片替代文字" title="圖片標題" >
（二）HTML Img Title與HTML Img Alt差異總整理
| HTML Img Title | HTML Img Alt | |
|---|---|---|
| 功能 | 圖片標題。 當滑鼠移動到圖片上方時，將顯示圖片說明文字。 | 圖片替代文字。 當圖片失效時，將顯示Img Alt替代文字來描述圖片內容。 |
| 目的／用途 | 加強用戶理解圖片與閱讀互動性 | 確保用戶瀏覽時能夠正確理解完整內容，並且提高搜尋引擎排名機會 |
| 文字內容 | 提供用戶可能會想知道的圖片資訊、名稱或輔助說明 | 將圖片的情境或內容具體描述 |
使用Img Alt的3大好處！Img Alt SEO不可忽視的重要性！
（一）Img Alt對SEO有哪些好處？ Img Alt 3大優點報你知！
📍 改善使用者閱讀體驗
Img Alt作用主要發揮在當圖像無法顯示時，Img Alt替代文字會出現在該圖像位置，協助使用者理解圖片的內容，這有助於確保在圖像失效的情況下，文章內容仍能被正確理解。
並且，當視力障礙族群透過特定閱讀器將文章內容轉換成音頻時，Img Alt替代文字也能轉成音檔，幫助視障者理解或想像具體的圖片內容，大幅降低特定用戶閱讀上的不便。
📍 幫助搜尋引擎理解圖片內容
Google無法像人一樣直接解讀圖片，因此搜尋引擎需要透過文字資訊來理解圖片的內容。
Img Alt這個屬性提供了對圖片的描述性資訊， 協助Google更好地理解網頁內容，而這也表示，當Img Alt中的關鍵字與圖片內容相關時，將有助於提升圖片在搜尋結果中的排名。
此外，假如搜尋引擎無法找到你所設定的Img Alt，Google可能會採用圖片上傳時的檔名作為描述，所以在上傳圖片之前，建議確認檔名是否與圖片內容相關。
📍 提升網頁曝光機會
搜尋引擎將圖片納入其搜尋結果中，並提供圖片搜尋選項，透過為圖片添加相關的Img Alt關鍵字，可以增加圖片出現在搜尋結果中的機會，進一步提高網頁曝光率與網站流量。
Img Alt怎麼寫比較好？3大Img Alt寫法原則公開！
（一）撰寫Img Alt該把握的3大原則！
🔺 精準的情境描述
Img Alt替代文字應該精確地描述圖片所呈現的情境或內容，這樣即使圖片無法顯示，用戶仍能夠理解其資訊，同時也有助於搜尋引擎了解圖片的內容。
我們以一張「在棉被裡的狗」的圖為例：
最佳的寫法是 < img src="dog.png" alt="一隻躲在白色棉被裡只露出頭的狗" >
這樣的寫法準確地描述出圖片情境，當圖片失效時，使用者也能夠想像出圖片上所呈現的內容。
撰寫Img Alt時，把握住「不看圖片也能想像出內容」的描述文字是最重要的原則 之一。
🔺 文字保持簡潔
盡可能讓Img Alt替代文字簡潔且具體，撰寫時請選擇一個主要的描述詞，不要使用過分冗長、艱深或使用不必要的詞語，簡單明瞭的描述更容易被用戶理解，同時也有助於提高SEO效能。
🔺 適當包含關鍵字
如果情況允許，在Img Alt替代文字中加入與內容相關的關鍵字，將有助於提高圖片在SERP中的能見度。
然而在增加關鍵字時，應該讓關鍵字「自然」呈現在文字描述中才是最好的方法，勿過度濫用或硬塞入關鍵字，以免被Google視為垃圾內容。
除了上述3大原則外，圖片型的CTA也應該要增添Img Alt，千萬不要放過任何一個可以增加頁面能見度的優化項目！
（二）增加Img Alt應該避免的3大用法！
📌 空的Img Alt屬性
應該避免讓Img Alt屬性空白，空的Img Alt屬性無法提供任何關於圖片內容的資訊，對搜尋引擎和使用者皆無幫助。
當圖片未能正常顯示時，缺少Img Alt可能讓讀者感到疑惑，並且對於SEO無加分效果。
📌 胡亂堆疊關鍵字
這個是我們看過相當多客戶文章中出現的錯誤寫法，請大家注意，千萬不要這樣寫。
設定Img Alt替代文字時，切勿為了增加流量而隨意塞入關鍵字，相反，Img Alt替代文字應該傳達簡潔精確的圖片描述，過多的關鍵字堆疊可能會導致Google將其視為低品質內容，進而對網站造成負面影響。
我們依據上一個段落所使用的「在棉被裡的狗」圖片作為舉例，胡亂堆疊關鍵字的寫法為可能會長這樣：
< img src="dog.png" alt="小狗,棉被裡的狗,白色棉被裡的狗,可愛小狗,只露出頭的狗" >
這種隨意填充關鍵字的寫法很有可能會被Google判定成黑帽SEO的手法而被懲罰。
📌 過多無意義贅字
避免在HTML Alt用法中增加過多無意義的描述，過多的贅字可能會混淆資訊，影響用戶的閱讀體驗，並且可能導致搜尋引擎無法正確理解圖片內容。
例如：
< img src="dog.png" alt="這是一隻米黃色的狗躲在白色的棉被中,眼睛看起來很小好像沒睡飽" >
上面示範的Img Alt內容過於冗長，且加入了過多不必要的描述（除非「眼睛看起來很小好像沒睡飽」其實才是該文使用此張狗狗照片的重點），我們建議在設定Img Alt時，應該審慎評估當前文章內容，以確保Img Alt替代文字能夠傳達必要的資訊。
（三）查看Background Image Alt是否設定成功的3種方法！
Chrome擴充工具查看方法
🛠️ 工具1：Detailed SEO Extension
此擴充工具能夠一鍵查看已設定完成與未完成的Img Alt圖片總數，並且你能夠個別匯CSV檔案報告進行檢視。
🛠️ 工具2：SEO META in 1 CLICK
SEO META in 1 CLICK在圖片的資訊中，自動歸納出Img Alt名稱，並且提供圖片連結，滑鼠移動到連結上就能直接顯示出圖片。
這裡下載：SEO META in 1 CLICK
Windows系統查看方法
- 方法1：點按鍵盤「Ctrl＋Shift＋I」
- 方法2：點按鍵盤「F12」
- 方法3：網頁右上角「⋮」設定選單 ➜「更多工具」➜「開發人員工具」
iOS系統查看方法
- 方法1：點按鍵盤「Command＋Option＋I」
- 方法2：在網頁中點按滑鼠右鍵 ➜「檢視網頁原始碼」
以上就是Img Alt替代文字的介紹，如果您想要了解更多SEO資訊，或者想要獲取免費的SEO健檢報告，都可以透過下方黃色按鈕與Welly團隊聯繫！
