你有活用alt屬性嗎?做好圖片SEO優化的alt屬性使用教學

你知道網站的圖片也能做SEO優化嗎?

我們在網站中經常少不了使用圖片,來豐富整體網站的內容度與可看性。圖文並茂的內容也總是較能吸引使用者目光,讓使用者在網站上停留更久的時間,達成更好的使用者體驗等各種對網站SEO來說很棒的效果。

可惜的是,在幫客戶規劃網站建議時,我們常發現總是會有些相同的錯誤點,其中一個就是沒有為圖片寫入「alt屬性」內容。在操作SEO時,「alt屬性」是一個做好圖片SEO優化的項目,也是幫助排名與網站整體評價上升的角色之一。今回我們就以此主題來好好的解說一下。

alt屬性

什麼是alt屬性?

搜尋引擎在讀取網頁內容時,其實並不會像人類一樣能夠理解圖片的內容與用意,也不清楚此圖片跟網頁內容有何相關性?因此,替圖片加上「alt屬性」,對於搜尋引擎的爬蟲(crawler)在抓取、讀取網頁內容時,更能理解網頁上的圖片是什麼用意、與內文有何關係。「alt屬性」就是一個讓搜尋引擎了解圖片內容的方式。

因此,當使用者在搜尋引擎上搜尋圖片時,如果你有為網站上的圖片加上「alt屬性」,你網站的圖片也有更大的機會出現在較前面的搜尋結果!為圖片加上「alt屬性」就是做好圖片SEO優化的一個重要步驟之一!

alt屬性的正式名稱

alt的英文正式名稱為「alternate」,有「替代」的意思;中文又常被稱作「alt描述」或「alt替代文字」。基本上alt屬性是代替網站內含有文字圖片的純文字情報。因為Google爬蟲目前還無法完善的識別圖片內容,當alt屬性裡記載了圖片的說明文字,爬蟲就能借此更加了解圖片內容的資訊。另外,對於無法看到圖片的使用者來說,用來理解圖片也十分有幫助,當圖片無法顯示時,alt屬性的替代文字可以協助使用者瞭解其圖片內容。

alt屬性的簡單確認方法

至於該如何確認自家網站內的圖片是否有設alt屬性呢?方法其實有很多種,在此介紹比較簡單的方式。
※建議使用「Mozilla FireFox」瀏覽器

・步驟 1

在想確認的圖片上點擊右鍵,選擇「檢視圖片資訊(F)」。

alt屬性的確認方法-步驟1-檢視圖片資訊

 

・步驟 2

點選「檢視圖片資訊(F)」後,會出現下面圖片般的頁面資訊。
1)圖片的URL位置
2)關聯文字,也就是圖片的alt屬性內容
3)圖片預覽

※網站頁面上所有的圖片都可以用這種方式確認。有記載alt屬性內容的圖片都會在 2)的地方顯示內容,若圖片沒有alt屬性內容的話,則那行會顯示空白。
※若同個頁面裡有多張圖片,可利用 1)上下移動來確認圖片內容。

alt屬性的確認方法-步驟2-頁面資訊

以這種方法就可以確認全部圖片是否都有寫入alt屬性內容了。若發現沒有alt屬性內容,就盡早寫入吧!但是,alt屬性的寫法其實是有一定的條件,就讓我們以SEO觀點來說明一下「alt屬性」。

alt屬性與SEO優化的關聯性

以SEO優化的觀點來說,當Google爬蟲在讀取頁面時,HTML上的純文字,毫無疑問的爬蟲一定可以直接抓取,但圖片的情況下,因為爬蟲無法讀取圖片,若沒有寫入alt屬性內容,爬蟲就無法判斷圖片的用途,進而無法給予評價。所以如果圖片有設定好「alt屬性」,爬蟲就能根據寫入的內容來辯別認識,有強化頁面與關鍵字、圖片SEO優化的效果。下圖為爬蟲抓取圖片資訊的地方。

圖片原始碼

舉例說明(好vs壞)

必需要注意的是alt屬性的內容設定也需要注意,不然也可能會造成反效果,以下就讓我們來舉例說明介紹。

▼好的例子

圖片上寫有「完全成果報酬型的SEO服務、幫助貴公司網站排入前10名!」文字,alt屬性也跟著配合的寫入相同文字。這種情況下,當人們看到圖片上的文字與Google爬蟲判別到的文字(alt屬性內容)相同時,就會有好的評價。

好的例子

▼壞的例子

圖片上雖然寫有「詢價or詢問請按此!」,但alt屬性卻寫成「按此」。這種情況下,Google爬蟲對這張圖片的認知就只有「按此」而已。

壞的例子

alt屬性的使用方法、寫法

alt最佳化有一定的條件與規則,請試著對應下列項目來製作或修改網站內容。

  • 頁面內有使用圖片時,請同時將alt屬性內容一並寫入
  • 圖片與alt屬性的文字內容需一致
  • alt屬性沒有文字限制,所以與圖片上的文字相同即可
  • 以SEO來說,不同的圖片裡不可使用相同的關鍵字
  • 若有想規劃的關鍵字,可用圖片內也含有的關鍵字的狀態下來操作。

SEO策略的影響

確實的寫入alt屬性內容,能提高排名上昇的可能性。如果什麼都不寫,則很有可能會錯失評價的機會。但若是寫入與圖片無關的內容,又或是狂塞、堆砌一堆關鍵字(例:alt=”寵物用品、狗狗用品、貓咪用品”),這樣的方式反而容易被懲罰、降底排名,還需特別注意!

最後,對於操作圖片SEO優化來說,alt屬性是一個有效的手段。一起來使用正確的手法來製作網站吧!