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

Img Alt是什麼?好的替代文字怎麼寫?SEO專家教你7秘訣!
Welly SEO 編輯部

Welly SEO 編輯部

2022-08-16更新

2022-03-01發佈

SEO優化

# SEO做法

# SEO優化

# SEO排名

Img Alt是什麼?為什麼設定圖片Alt對於SEO來說很重要?Alt 替代文字有什麼好處?本篇從HTML Alt意思開始,到HTML Img Alt 和Img Title的差別、圖片SEO的重要性、Alt Text最佳寫法和原則,將一一為你解答!

Alt是什麼?認識Alt HTML屬性

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

img alt的3大用途與目的

而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:作為圖片替代文字,用來描述圖片內容,當圖片失效時才會顯示,否則圖片正常顯示下,得從網頁原始碼才能看得見。

Img Alt 從網頁原始碼呈現範例

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

Image Alt屬性與Img Title語法範例

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

Image Alt屬性與Img Title語法範例,Alt當圖片失效會呈現文字,Img Title則需要把滑鼠移上去才會顯示

Img Title 語法範例:

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

Img Alt 語法範例:

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

(範例呈現效果參考自:Wibibi網頁設計教學百科)

Alt Text最佳寫法

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

alt text的最佳寫法

這時候獲得及格分數的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 SEO團隊聯繫!

最值得擁有的專業行銷團隊!現在就與Welly一起透過SEO優化提升業績吧!

熱門文章

編輯精選

最新文章