HTML Image Alt 全攻略!簡單四原則,讓 Google 輕鬆看懂你的圖片!

HTML Image Alt 全攻略!簡單四原則,讓 Google 輕鬆看懂你的圖片!

相信新手剛踏入 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 的內容,說不定也是另外得到流量、獲得新客的另一個突破方向!

 html-image-alt優點-增加頁面曝光機會

 

? 更多圖片 SEO 項目及操作歡迎參考:

     優化網站圖片五步驟,為你的網站帶來百萬流量

     圖片搜尋也能SEO,4種技巧大公開

 

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=”帶著歐告踏青去“>

HTML Img Title 意思               HTML Img Alt Text 意思

_____________________________________________________________________  

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 內容該怎麼寫?下方我們一樣簡單舉例來說明,用一張圖片比較「資優生」跟「留級生」的差別,大家就會有豁然開朗的感覺啦~

image 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!以下推薦常用的兩款外掛給大家參考:

  1. Alt Text Tester
  2. SEO META 1 Copy

without image alt text 範例

           (圖片來源:維基百科

? 更多好用的、SEOer 愛用的 Chrome 外掛歡迎參考:

     SEOer 推薦的 Google Chrome 擴充功能一篇全攻略!

 

結語:圖片 SEO 從 Img Alt 開始 

就像我們前面介紹的,Alt 屬性主要是「描述圖片的一段敘述性內容」,在搜尋引擎方面可以讓爬蟲更友善的理解圖片、集中頁面主題;於使用者體驗上,當圖片失效等破圖情況時,也能有效降低閱讀上的困難。雖然 Alt 屬性相對其他 SEO 策略,只是微不足道的小項目,但有時候當對手都很強的時候,說不定這小小的 Alt 小兵也能立大功,成為在眾多競品中脫穎而出的契機之一!

 

如有任何自然流量增加的問題,或想瞭解關於 awoo SEO 優化服務,歡迎立即諮詢,將有 awoo 專業顧問與您聯繫。

立即聯絡阿物 

延伸閱讀:數位時代下的品牌經營,教你如何運用 SEO+AI 提高品牌信任

延伸閱讀:SEO 與站內搜尋,如何創零售電商站內搜尋最大價值