第九章：SEO 新手必懂的圖片 Alt描述 - Alt Text 替代文字指南

Alt 描述(替代文字)是指附加在 <img> 圖片標籤內,用於說明圖片內容的文字描述。它不會直接顯示在頁面上(除非圖片載入失敗),而是存在於 HTML 原始碼中。Alt 描述有兩大核心功能:

總而言之,alt 描述的角色就是在圖片「不在場」時代為發聲,確保不損及網頁資訊的完整性。想像一下,當你打電話為朋友口述網頁內容時,你會如何描述圖片而不提到「這裡有一張圖片」?這正是撰寫 alt 文字時應有的思維。

Alt 替代文字不僅是無障礙考量,它在 SEO 優化中也扮演舉足輕重的角色。以下從三個層面說明其重要性:

搜尋引擎爬蟲無法直接「看懂」圖片,因此需要依賴文字來理解圖片主題。Alt 文本正提供了這種線索。如果圖片與頁面內容相關卻缺少描述,搜尋引擎可能無法判斷兩者的關聯性,錯失提升頁面相關性的機會。根據 Moz 的研究,帶有描述性文字的圖像更有可能出現在 Google 圖片搜索結果的前列。Google 也在其官方指南中強調利用 alt 屬性來理解圖片內容的重要性。

有了適當的 alt 描述,圖片更容易在 Google 圖片等搜索中取得良好排名,為網站帶來額外流量。Google 圖片是全球第二大搜索引擎,據統計約佔所有線上搜索的 20.45%。也就是說,每五次搜索就有一次與圖片有關,這是相當可觀的流量來源。Google 的搜尋專家 John Mueller 曾指出,alt 文本是讓圖片在 Google Images 中獲得良好排名的極為重要因素。因此,為圖片撰寫優質的替代文字,可以抓住這部分潛在訪客。此外,當圖片帶有連結時,alt 文本還會被視為錨文字(anchor text),有助於 Google 瞭解連結目標頁面的內容。

良好的 alt 描述讓網站更符合無障礙規範,提升整體使用者體驗。視障者能透過螢幕閱讀器獲取圖片資訊,而一般使用者在圖片載入失敗時也能看到文字說明,不至於摸不著頭緒。換言之,alt 文本不只對搜尋引擎友好,對真人讀者也是一種貼心的照顧。這種良好的使用體驗正是 SEO 間接追求的目標之一——滿足使用者需求。

現今即使圖像識別技術日益進步,搜尋引擎仍然高度依賴文字的輔助來理解和分類圖像。人工智慧的圖像辨識並非萬無一失(例如有案例顯示 Google 的演算法曾將奶油誤判為起司),因此我們不能完全仰賴機器去「看懂」圖片。在可預見的未來,提供清晰的 alt 描述依然是站長的責任,也是提升網站可信度和競爭力的關鍵之一。

撰寫優質的 alt 替代文字並不艱深,遵循一些基本原則即可事半功倍:

一個簡單實用的撰寫技巧是:腦中先想一句完整話來描述圖片,例如「這是一張 ___ 的照片」,然後把開頭「這是一張」拿掉,剩下的部分就能成為不錯的 alt 文本。例如,對於一張巧克力蛋糕的照片,你心中描述:「這是一張巧克力起司蛋糕的照片」,拿掉開頭後 alt 文本就是「巧克力起司蛋糕」。如果圖片內容較複雜,也可以稍微展開描述,例如:「這是一張我家貓咪在玩玩具的插畫」,去頭後變成 alt 文本:「我的貓 Mark 正在玩他的玩具」。透過這種方式,確保描述既自然又貼切。

以下是幾組 alt 替代文字的好壞範例,體會優質描述的特點:

再例如,一張放著甜點的圖片：

從以上例子可以看到,越精準、生動的描述,越能提升圖片替代文字的品質。尤其在電商網站中,若是產品圖片,建議在 alt 文本中加入產品名稱或型號等細節,例如:alt="Sony WH-1000XM5 無線降噪耳機",有助於搜尋引擎將圖片與特定商品查詢相關聯。

撰寫 alt 替代文字時,新手常踩到以下地雷,請務必避免:

最嚴重的錯誤就是沒有提供 alt。缺少替代文字會讓搜尋引擎和使用輔助工具的使用者完全失去圖片資訊。就算某些純裝飾性的圖像可以留空(例如排版用的線條或圖示),也應明確標註 alt="" 而非完全省略屬性。因為如果完全沒有 alt 屬性,某些螢幕閱讀器可能會轉而讀出圖片檔名,往往是冗長且毫無意義的(例如 image123.png)。

相反地,若是純裝飾用途的圖片卻填寫了 alt 文本,也會造成困擾。裝飾性圖片對內容沒有實質意義,螢幕閱讀器應直接略過。為這類圖片添加替代文字只會讓視障使用者聽到多餘資訊,干擾他們理解主要內容,同時也不會給 SEO 帶來任何好處。正確做法是使用空的 alt,例如 <img src="decoration.png" alt="">,讓輔助工具知道可忽略此圖。

Alt 文本過於籠統(例如都只寫「一張圖片」或「圖像1」)幾乎起不了任何作用。像「my image」這樣的描述既無法提供有用資訊給使用者,對 SEO 也沒有幫助。應避免使用過於抽象的字眼,務求讓替代文字能單獨替代圖片的資訊。如果你自己都覺得這段文字無法讓人聯想到該圖,表示它不夠具體。

前述最佳實踐已提及,但仍要強調,過度堆砌關鍵字是常見錯誤。有人可能誤以為在 alt 中堆滿關鍵詞有助提升排名,實則適得其反。例如:alt="奶油, 牛油, 黃油, butter, 無鹽奶油, 有鹽奶油" 這種列舉式做法不僅影響可讀性,搜尋引擎也會判定為作弊行為。切記自然至上,相關的關鍵詞點到為止即可。

若圖片周遭已經有說明文字,例如圖說或標題,切勿簡單複製那些文字當作 alt。重複的資訊對使用者和搜尋引擎而言都是噪音,無助於提供額外價值。Alt 文本應該提供額外或補充資訊,或是在沒有圖片時單獨傳達圖片意義的資訊。

總之,撰寫 alt 描述時請秉持一個原則:為了提供資訊給需要的人。不論是搜尋引擎還是視障讀者,他們需要的是有用、有意義的內容,而不是缺失、冗餘或過度優化的文字。

了解了原理,現在來看看如何在實作中為圖片加入 alt 替代文字。

非常簡單,只需在 <img> 標籤中加入 alt 屬性即可。例如:

<img src="steak-pie.jpg" alt="經典英式牛排餡餅">

以上程式碼中,alt="經典英式牛排餡餅" 就是替代文字的設定。確保每個 <img> 標籤都有對應的 alt 屬性(裝飾性圖片可設為空字串)。

大部分現代 CMS 都提供友好的介面來添加圖片的替代文字,無需手動編輯 HTML 原始碼。例如,在 WordPress 中,當你在文章或頁面中上傳插入圖片時,側欄會提供一個「替代文字」欄位讓你填寫描述。WordPress 甚至貼心地提示:「描述圖片的目的。如圖片僅為裝飾,可留空。」這正是我們前面討論的原則應用。填寫好替代文字後,WordPress 會自動將其加入該圖片的 HTML <img> 標籤中,非常方便。

各種 CMS 的操作大同小異,例如 Squarespace、Shopify 等也有對應的說明文件教你如何為圖片添加 alt 文字。重點是:在每次上傳圖片時都別忽略了替代文字這個欄位！養成這個習慣後,網站的無障礙與 SEO 表現都會更加分。

為了確保我們掌握最新、最權威的作法,來看看主流 SEO 資源對圖片 alt 文本的觀點:

根據 Google 官方的《圖片發佈指南》,提供描述性的 alt 文本是提供圖片中更多中繼資料的最重要屬性。Google 會結合 alt 文字、電腦視覺算法和頁面內容來理解圖片主旨。此外,如果圖片本身作為一個超連結,alt 文本會被視為該連結的錨文字,因此更應填寫具有意義的內容。Google 建議撰寫 alt 時,要著重於「有用、資訊豐富且和頁面內容相關」的描述,同時適度使用關鍵詞但避免填塞。

他們也特別舉了例子說明何謂不良的 alt 用法(如缺失或關鍵字堆砌),以及理想的撰寫方式。例如,對於檔名 puppy.jpg 的圖片:沒有 alt 是不好的,寫一串無意義關鍵字也是不好的；單純寫 "puppy" 算比較好,而最佳做法是寫 "Dalmatian puppy playing fetch"(大麥町小狗玩接球)。這充分體現了上述我們討論的原則。

Moz 等SEO業界人士強調,儘管圖像識別技術在進步,alt 替代文字在2025年仍然對 SEO 至關重要。因為搜尋引擎不會冒險完全依賴 AI 去理解用戶圖片,作為站長仍需提供文字線索。Moz 的研究也支持了 alt 的價值:圖像有適當的替代文字,有助於其在相關搜尋中取得更好排名。他們建議每當上傳圖片時都應添加 alt,這已成為基本的 SEO 操作之一。同時 Moz 也提醒不要過度堆砌關鍵詞,應自然地融入一兩個相關關鍵詞即可。總之,在 Moz 看來,alt 文本不僅沒有過時,反而是簡單卻常被忽略的 SEO 奧秘,新手更應好好把握。

Ahrefs 提供的指南與工具也非常重視圖片 alt 文本的作用。他們將 alt 列為圖像優化的首要步驟之一。在 Ahrefs 的教學中,歸納了 alt 文本的四大作用:提升無障礙、增進主題相關性、助攻 Google 圖片排名,以及作為圖片連結的錨文字。這些觀點與我們前述分析不謀而合。此外,Ahrefs 強調在寫好 alt 文字的同時,不是每張圖片都需要非填不可。例如純裝飾性的圖像,正確處理方式是不寫內容但保留空的 alt 屬性,以防止螢幕閱讀器讀出檔名。

Ahrefs 還提供了許多實用建議,例如利用瀏覽器擴充功能檢查網站有哪些圖片缺少 alt,優先修正那些流量高的重要頁面的圖片描述。他們也提醒,不必吹毛求疵追求網站上每一張圖片都有 alt,而是應著眼於對使用者和 SEO 最有影響的重點圖片進行優化。這種務實的態度很適合初學者參考:把精力用在刀口上,先做好關鍵頁面的圖片 SEO。

最後,我們將 alt 替代文字放進整體網站圖片 SEO 策略中來看。Alt 文本雖小,但在圖像優化中處於承上啟下的位置:

搜尋引擎會參考圖片檔名來猜測內容,因此使用簡短描述性的檔名(如 "black-kitten.jpg" 優於 "IMG00023.jpg")是基本功。檔名加上 alt 替代文字,等於給了搜索引擎圖片內容的雙重提示:一個在檔名、一個在 HTML 中。兩者最好相互呼應又不完全重複,提供豐富的信息。

Google 明確表示會從頁面內容(包括圖片周圍的文字如標題和圖說)來判斷圖片主題。因此,一張有完整優質 alt 文本的圖片,若再配有相關的圖說說明或放在對應的段落上下文中,將有助於搜尋引擎更全面地理解。簡而言之,圖片所在的位置和周邊文字也很重要,alt 文本應與整體內容相協調。

這雖然不是 alt 文本本身的問題,但好的圖片 SEO 也包含圖檔優化(壓縮、使用適當格式)以確保載入快速。載入速度是 SEO 排名因素之一,而以輕量的圖片加上文字替代方案,能同時滿足性能和無障礙需求。

如果你的網站大量使用圖片(例如電商產品圖片),可以考慮使用結構化資料(如 Product 結構化資料把圖片 URL 包含在內)以及提供圖片網站地圖(sitemap)等方式,讓搜尋引擎更容易抓取和理解你的圖片內容。在這些進階作法中,alt 文本依然是基礎且不可或缺的一環:結構化數據中的圖片屬性通常需要搭配良好的替代文字說明才能發揮最大效益。

概括而言,alt 替代文字在圖片 SEO 策略中扮演著基礎但關鍵的角色。它與檔名、圖說、頁面內容、技術優化等要素相互配合,共同提升網站在搜尋引擎與使用者心中的形象。對於 SEO 初學者來說,掌握 alt 文本優化是邁向圖像優化的第一步,成本低但回報高。