top
icon-mail-alt phone
X

替代文字-SEO 搜尋引擎最佳化工具: alt text

使用此屬性可指定圖片的替代文字。亦可用於描敘圖片的內容以讓搜尋引擎知道該圖片的內容。

圖片使用替代文字分析

讓我們來檢查看看,觀察一下您的網頁圖片使用替代文字的狀況

請輸入您的網址
範例: https://www.nim.com.tw

此工具為奈思網頁設計,設計、開發、維護。

搜尋引擎優化,圖片替代文字 <img alt="圖片替代文字" >

Alt text (alternative text) 是 HTML img 的一個屬性

主要被使用在 

<body>
  <img alt="圖片替代文字" />
</body> 

之間,

使用此屬性可指定圖片的替代文字。亦可用於描敘圖片的內容以讓搜尋引擎知道該圖片的內容。

使用 alt 屬性的好處

  • 當使用者在瀏覽圖片時,滑鼠移到圖片上方時,瀏覽器會自動帶出圖片的替代文字的提示。
  • 當網路和伺服器出現問題,瀏覽器無法正確的下載圖片,瀏覽器會顯示其替代文字,使用者也可以大約了解其中內容,不至於會感到困惑。
  • 當然還有最重要的就是,增加圖片的替代文字,亦有利於搜尋引擎索引您的圖片了解您的圖片,在圖片搜尋結果中也能出現您的圖片。

圖片替代文字如同下圖紅色框

圖片替代文字 - 滑鼠移到圖片上方時,瀏覽器會自動帶出圖片的替代文字的提示

HTML 程式碼範例

<img src="webdesign.jpg" alt="網頁設計案例,電子商務網站設計">

圖片使用替代文字建議

  1. 使用圖片會佔據較多流量,因此除非使用圖片較能豐富表達、說明,否則盡量以 HTML 文字和 CSS 來呈現。我們在許多網頁上看到明明可以使用文字表達,但是卻用了圖片來呈現僅有文字的圖片。
  2. 具體的描敘圖片內容。
  3. 中文在 75 字以內,英文在 125 字以內
  4. 圖片替代文字使用該網頁設計的關鍵字來增加其關鍵字密度,藉此讓搜尋引擎更能掌握網頁內容
  5. 勿一昧的填充關鍵字在圖片替代文字中,過多只會您的網頁搜尋優化帶來反效果。

圖片使用替代文範例

福斯 Volkswagen 2020 Golf GTI 汽車,鐵灰色

Photo by Martin Katler on Unsplash

  • ⭐ <img src="car.jpg" alt="汽車">
  • ⭐⭐ <img src="car.jpg" alt="福斯 Golf 汽車">
  • ⭐⭐⭐ <img src="car.jpg" alt="福斯 Volkswagen 2020 Golf GTI 汽車,鐵灰色">

繼續學習