alt 屬性與圖片 SEO 的最佳實踐

alt 屬性(替代文字屬性)是 HTML <img> 標籤的一個屬性,用於描述圖片的內容或功能。它的主要目的有兩個:其一是當圖片無法顯示時(例如連結失效或使用者關閉圖片載入),瀏覽器會顯示 alt 屬性的文字,提供替代性的資訊;其二是協助無障礙瀏覽,讓使用螢幕閱讀器的視障使用者能透過 alt 文本了解圖片內容。

一個基本的例子如下:

在上述範例中,alt 的內容描述了圖片:「一杯拿鐵咖啡放在木桌上,旁邊擺著咖啡豆」。如果圖片檔無法載入,使用者將會看到這段文字。更重要的是,這段描述提供了搜尋引擎及輔助技術(如螢幕閱讀器)可讀的資訊。

為什麼 alt 重要?因為圖片本身對搜尋引擎和輔助工具來說是「不可見」的——它們無法像人類一樣真正看懂圖片。alt 屬性則扮演了圖片與文字之間的橋樑,讓機器「讀懂」圖片。如果沒有適當的 alt 文本,搜尋引擎可能無從判斷圖片內容,視障者也會錯過圖片傳達的資訊。因此,良好的 alt 屬性是提升網站可及性和 SEO 成效的雙贏策略。

從 SEO 的角度來看,圖片的 alt 文本有多方面的實際作用:

提供圖片語意資訊給搜尋引擎:搜尋引擎會索引網頁上的文字資訊,包括圖片的 alt 文本。透過 alt,搜尋引擎可以理解圖片的主題和與周圍內容的關聯性。事實上,Google 等搜尋引擎也會使用電腦視覺演算法分析圖片內容,但 alt 文本仍是關鍵的線索,有助於更準確地判斷圖片所表達的意涵。

提升圖片搜尋排名:許多人透過 Google 圖片搜尋來尋找資訊。良好的 alt 文字能提高圖片在相關關鍵字下於圖片搜尋結果中排名的機會,進而替網站帶來更多流量。Google 官方也強調,alt 文本是優化圖片搜尋的重要部分。如果你的網站在 時尚、旅遊、美食 等視覺性強的領域,圖片搜尋流量更是不可忽視的流量來源。

強化網頁整體相關性:適當的 alt 文本可以強化頁面的主題關鍵字相關性。當網頁正文、標題以及圖片 alt 都圍繞著相似的主題時,搜尋引擎更能明白該頁面的內容焦點。例如,一篇關於「沖泡咖啡技巧」的文章,內含描述咖啡拉花的圖片,其 alt 寫了「拿鐵拉花的近照」,這會進一步強化文章與咖啡主題的相關程度。

影像連結的錨文字 (Anchor Text):如果圖片同時是超連結(點擊圖片會導向其他頁面),那麼圖片的 alt 文本會被搜尋引擎視為該連結的錨文字。錨文字是搜尋引擎用來理解連結目標頁面主題的依據之一,因此為作為連結的圖片提供描述性的 alt,有助於搜尋引擎瞭解被連結頁面的內容。例如,網站 LOGO 圖片通常連到首頁,常見做法是將 alt 設為公司名稱,這樣對 SEO 和使用者體驗都更友善。

避免過度優化:需要注意的是,雖然 alt 文本對 SEO 有幫助,但切勿濫用關鍵字堆砌。也就是不要在 alt 裡無意義地列出大量關鍵字或重複關鍵字。這種做法不僅無助於排名,還可能被搜尋引擎判定為垃圾訊息,影響網站信譽。此外,冗長且不自然的 alt 文字也會降低使用者體驗(螢幕閱讀器使用者聽到冗長的文字會感到厭煩)。總之,請專注於真實且有意義的描述,自然而然地包含相關關鍵詞即可。

除了 alt 屬性,圖片檔案名稱也是圖片 SEO 的一部分。雖然檔名對 SEO 的影響沒有 alt 來得直接,但一個好的檔名可以為搜尋引擎提供額外的線索,而且也利於日後檔案管理。

1. 描述性的檔名:理想的圖片檔名應該簡潔且能描述圖片內容。例如,coffee-latte-art.webp 就比 IMG_0001.webp 好得多,前者讓人(和搜尋引擎)一看就知道是咖啡拉花的圖片。對中文內容網站而言,檔名可以使用拼音或英文進行描述(如 hong-shao-niu-rou-mian.webp 代表紅燒牛肉麵),因為直接用中文可能產生亂碼路徑或需要進行 URL 編碼。如果一定要用中文,請確認服務器與瀏覽器對路徑編碼的支援,或使用意義清晰的拼音/英文替代。

2. 檔名與 alt 保持一致的語意:建議檔名所描述的對象或場景,應該和 alt 文本談論的是同一件事。例如,有一張「台北 101 夜景」的照片,可以這樣處理:圖片檔名為 taipei-101-night.webp,alt 文本寫作alt="夜晚燈光下的台北 101 大樓"。兩者都指向同樣的主題(台北101夜景),就形成了語意上的一致性。這並不是說 alt 要機械性複製檔名,而是內容對齊:檔名提供簡要主題,alt 提供更豐富的細節描述。

3. 切勿重複堆砌:避免將相同的關鍵詞在檔名和 alt 裡重複過多次。比如檔名已經是 red-apple.webp,alt 就不需要又寫「紅色的蘋果圖片」。可以更自然地描述,如 alt="紅蘋果放在木桌上,背景有柔和日光". 搜尋引擎可以理解這段文字也提到了蘋果(語意相關),不必一字不差重複檔名內容。

4. 組織大量圖片的命名:如果您的網站有大量圖片(如電商網站的商品圖),手動命名可能困難,可以考慮批次規則來自動命名,例如包含產品名稱或分類的字首。保持命名規律既能提供 SEO 線索,也方便管理。記得避免使用完全沒有意義的通用檔名(如 image1.webp, image2.webp),那對搜尋引擎幾乎沒有幫助。

總而言之,圖片檔名是 輕量的 SEO 加分項。做好檔名可以錦上添花,但真正關鍵的仍然是 alt 文本本身。建議您花心思撰寫好 alt,同時順手把檔名也取好,兩者相輔相成。

良好的 alt 文本不僅是為了搜尋引擎,也是為了人——特別是視覺障礙的使用者。無障礙網頁設計要求我們為非文字內容提供文字替代,alt 正是針對圖片的替代文字。因此,撰寫 alt 時也要考慮它對輔助技術的作用:

螢幕閱讀器會朗讀 alt:視障使用者透過螢幕閱讀器瀏覽網頁時,當軟體遇到圖片,就會讀出該圖片的 alt 文本。如果 alt 缺失,某些螢幕閱讀器可能會讀出圖片的檔名(往往是晦澀的字串)或直接跳過,這會讓使用者無法了解有圖片內容被遺漏了什麼。因此,每張具有資訊價值的圖片都應提供 alt,以確保資訊無障礙。

裝飾性圖片使用空的 alt:並非每張圖片都需要有內容豐富的 alt。如果一張圖片純粹是裝飾用途,對理解內容沒有幫助(例如版面上的分隔線、背景花紋、裝飾性的小圖示),最好將 alt 屬性留空或標記為空字串(alt="")。這告訴螢幕閱讀器「可以忽略這張圖」,避免干擾使用者。例如:

上述範例中,alt="" 表示這張圖沒有資訊意義,螢幕閱讀器會直接跳過不讀。務必不要完全省略 alt 屬性(如 <img src="divider.webp"> 沒寫 alt),因為缺少 alt 有些輔助技術可能會讀出圖片檔名(例如"divider.webp"這種無意義字串),反而造成困擾。

提供上下文而非贅述:撰寫 alt 給無障礙使用時,要抓住圖片的要點。想像你在向看不到圖片的人描述它,應該說出圖片中最重要的資訊是什麼。例如,一張資訊圖表(infographic),你不可能把所有文字都塞進 alt,那會過於冗長且不實際。你應該描述圖表主旨:「alt="說明顧客滿意度提升趨勢的資訊圖:近三年滿意度從 70% 提升至 90%"」。這樣使用者能大致了解圖表的結論。如果需要傳達更詳細的數據,可以在正文中另外補充文字說明,或使用圖表說明文字(caption)來呈現細節,而不是全部放在 alt 裡。

圖像中的文字資訊:如果圖片內包含了文字(例如拍攝的海報、地圖上的地名、或截圖中的界面文字),應在 alt 裡包含那些文字內容或重點資訊。這對 SEO 也是好的做法,因為搜尋引擎目前對於圖片中的文字(雖然具有 OCR 技術,但未必可靠)還是主要依賴我們提供的替代文字。同時也確保螢幕閱讀器用戶獲得相同資訊。然而,如果圖片中文字很多(如長篇截圖),建議在頁面上以文字形式呈現主要內容,而 alt 依然保持簡明扼要。

按鈕和功能性圖標:對於那些具有交互功能的圖像(如點擊後提交的按鈕、可點擊的圖標),alt 應該說明它的功能或目的,而不只是外觀。例如,一個放大鏡圖標按鈕用於搜尋功能,alt 可設為alt="搜尋"(或更完整地 alt="提交搜尋查詢"),讓使用者知道按下去會執行搜尋。如果這類圖標沒有適當的替代文字,使用螢幕閱讀器的用戶可能會不知道有個可點擊的功能存在。

總結無障礙重點:每張圖片都要判斷其在內容中的角色——資訊性還是裝飾性。資訊性的,就寫出對理解內容有幫助的描述;裝飾性的,就用空 alt 隱藏。這樣一來,網站對所有使用者都更友好,同時搜索引擎也會因此獲得清晰的資訊,提升整體 SEO 表現。

根據圖片的用途和性質,我們需要調整撰寫 alt 的方式。以下針對幾種常見的圖片類型,提供最佳實踐建議和範例:

情境照片指的是真實照片,通常描繪人物、風景或具體場景,用來增強文章情境或提供視覺例證。例如部落格文章開頭的一張氣氛照片、介紹產品時的使用場景照等等。

撰寫情境照片的 alt 文本時,要描述照片中的關鍵元素,並考慮這張照片與文章主題的關聯:

點出主要對象:說明照片中最重要的人物或物件是什麼。例如,一篇辦公室生產力文章搭配的照片,裡面是一群人在開會,你可以寫 alt="團隊成員在會議室討論專案"。這樣就抓住了「團隊合作開會」這個主體。

加入場景與氛圍:如果場景本身有意義,可以簡要提及。像上述例子,加上「會議室」就讓人更具體地知道場景。如果是一張旅遊文章的配圖 showing 一個山谷美景,alt 可寫 alt="清晨薄霧中的阿里山山谷,陽光灑在樹梢上",呈現出氛圍之餘也點出地點。

聯繫內容主題:確保 alt 的描述對文章內容是有意義的,而非無關緊要的細節。比如文章討論瑜伽冥想,配圖是一個人打坐的照片,alt 應強調「冥想」的元素,如 alt="清晨公園裡打坐冥想的女子"。這就比僅僅描述「一名女子坐在草地上」更契合主題。

避免的情境: 不需要在 alt 開頭寫「圖片為:…」或「照片顯示:…」。直接敘述內容即可,因為螢幕閱讀器會在遇到 <img> 時告知那是圖片。我們不妨把字數控制在一兩句話以內,精簡但具體。

插圖通常是非寫實的圖片,可能是向量圖、漫畫風格、圖示或示意性的圖形,用來輔助解釋某個概念或步驟。例如產品教學中的示意圖、部落格中的概念圖等。

撰寫插圖的 alt 文本,需要點出插圖所代表的概念或內容:

說明圖中元素代表什麼:插圖往往帶有比喻或簡化的符號意義,比如一個上升的箭頭圖示代表「成長」或「上升趨勢」。alt 可以寫明這層意思,例如 alt="上升的箭頭圖示,象徵業績成長",讓人一看就知道這個圖意欲傳達「成長」的概念。

簡述插圖內容:如果插圖比較具體,也可以描述圖中實際畫了什麼。如教程文章中的操作流程插畫,alt 可寫 alt="電腦螢幕與齒輪組成的插圖,表示系統設定流程"。這裡提到螢幕和齒輪,是圖中的主要元素,也暗示了設定的主題。

強調與主題的關聯:和情境照片類似,插圖的描述最好和當前上下文主題緊密相關。不要僅描述插圖的表面,而忽略它出現的目的。例如,如果插圖用於強調安全,可能畫了一把鎖,alt 除了說「鎖」也可以補充「代表資料安全」之類的字眼,以銜接文章討論的重點。

插圖的 alt 一般不需要很長,抓住隱喻或重點即可。一些美觀裝飾性的插畫(例如純裝飾的花邊圖案)則可視為裝飾性圖片,使用空 alt。

圖表(如長條圖、圓餅圖、折線圖)以及 資訊圖 (infographic) 含有資料或資訊,是用來呈現數據、統計或複雜資訊的圖像。

為這類圖片撰寫 alt 文本是最具挑戰的,因為它們往往資訊量大,但 alt 文本需保持簡潔明瞭。我們可以遵循以下原則:

傳達圖表的標題或結論:將圖表要表達的核心資訊濃縮進 alt。假設有一張折線圖顯示網站過去一年的每月流量,alt 可以寫 alt="2025 年各月份網站流量折線圖,顯示流量呈現穩步上升趨勢"。這一句話包含了圖表主題(網站流量、時間段)以及結論(穩步上升)。

不要逐數逐字描述:切忌把每個數據點都寫出來,例如「一月 1000,二月 1200,三月 1400...」這樣會讓 alt 冗長且無法有效傳達資訊。用一句話概括趨勢或幾個關鍵比較點即可。如果某個數值特別關鍵(例如某月流量創高峰),可以提及:「...在 8 月達到 5000 的峰值」。

輔助文字說明:由於 alt 長度有限(建議不超過 125 個字元,約幾十個漢字),如果圖表相當複雜,可以考慮在圖片下方增加圖表說明(Caption)。caption 是直接顯示在頁面上的,對 SEO 也有幫助,而且能寫得比 alt 詳細一些。同時,你可以在正文中討論圖表細節。這樣 alt 只需扮演一個概括角色。如有需要,也可以在 HTML5 中使用<figure>和<figcaption>標籤來包含圖片和說明文字,使內容語義更清晰。

資訊圖 (Infographic) 特例:資訊圖通常混合圖像和大量文字資訊。如果你放上一整張資訊圖,最佳做法是將圖中的重點內容在文章中文字敘述,或至少提供一段總結。alt 則寫成這張資訊圖的摘要,如 alt="資訊圖表:列出提升工作效率的5個要點,包括時間管理、環境優化等"。這樣確保使用者即使看不到圖,也能掌握概要,詳情可從文章文字獲得。

裝飾性圖片指的是對內容沒有實質資訊貢獻的圖像。這類圖純粹是美觀用途,例如分隔線、背景圖片、裝飾花紋、或文章內為了版面好看而插入的與內容無直接關聯的照片。

對於這些圖片,正確的處理方式通常是:

使用空 alt 或 CSS 背景圖:如前文所述,為裝飾圖像添加 alt="",讓螢幕閱讀器跳過。如果圖片只是裝飾,甚至可以考慮不要用 <img> ,直接透過 CSS 背景加上,這樣在 HTML 結構上就沒有多餘的圖像元素需要描述。但若因為某些原因必須使用 <img> 插入裝飾圖片,務必讓 alt 為空字串。

避免多餘描述:千萬不要為了「每張圖都有 alt」而硬加描述,因為對於裝飾圖,那些描述既不幫助 SEO,也影響無障礙體驗。例如,一個純粹裝飾性的照片(只為增添色彩,與內容無直接關聯),寫 alt 反而會讓螢幕閱讀器讀出與內容無關的資訊,讓使用者分心。這類情況下最好是 alt="" 處理,或在 HTML 裡加上 role="presentation"(呈現性角色)來表示它是無意義的圖像。總之原則是:沒有資訊量的圖,就不應佔用使用者的注意力。

LOGO 與圖示:值得一提的是,公司 Logo 圖標儘管在視覺上裝飾頁眉,但它通常代表公司的名稱或首頁連結,屬於資訊性圖片而非純裝飾。對 Logo 的 alt 應該寫公司名稱或網站名稱,例如 alt="MyWebsite 官方標誌"。這樣對於識別品牌和無障礙都是有意義的。如果 Logo 僅是裝飾而沒有實際品牌識別需求(很少見的情況),才會考慮空 alt。

綜上,在處理裝飾性圖片時的關鍵就是不讓它們干擾到不需要看到它們的人。以 SEO 而言,裝飾圖不需要也不應該去塞關鍵字;以無障礙而論,讓它們靜默是對使用者最友善的做法。

近年來 AI 生成圖片和各種素材庫(stock photos)的使用越來越普遍。我們在為這類圖片編寫 alt 時,也有一些特別的考量:

視同一般圖片處理:首先,無論圖片來源是 AI 還是素材庫,本質上對 alt 的要求並沒有改變。該描述什麼就描述什麼。AI 生成圖像可能風格獨特或內容虛構,但我們仍然照其表現內容如實描述。比如 AI 繪製的一隻幻想生物,alt 可寫 alt="AI 繪製的紫色幻想生物,具有龍的翅膀和鹿的角"。重點是讓人了解圖片呈現了什麼。

確認圖片與內容的相關性:使用素材庫照片時,要小心評估這張照片是否真正增強了內容。如果照片只是為了美觀但內容相關性弱(例如某技術文章開頭放了一張抽象的商務人士握手圖),那對讀者和 SEO 的價值都有限。這種情況你可以選擇將 alt 留空,因為描述「兩個商務人士握手」對理解文章技術內容沒有幫助,反而可能誤導。或者,更好的方式是挑選更貼近主題的圖片。總之,確保 alt 文本所描述的確是讀者需要知道的資訊,而不是圖片無關緊要的細節。

避免誤導或過度描述 AI 圖片:AI 生成圖有時會存在細節上的不真實(例如人物有些奇異的特徵)。撰寫 alt 時不需要指出「這是 AI 生成」或強調那些怪異細節,除非你的文章討論的正是 AI 圖片本身。否則,就按正常的圖片描述即可。同樣地,如果 AI 圖片用來表示一個概念,請著重那個概念,而非圖片的瑕疵。例如 AI 拼湊的辦公室場景可能有些怪異,但你要描述的重點應該是「辦公室裡的多人協作場景」,因為這才是文章想傳達的概念。

素材庫圖片的版權聲明 vs. alt:有時候我們會標註圖片來源或版權(如攝影師姓名)。這些訊息不應放在 alt 裡。alt 的目的是描述圖片內容,而非記錄攝影者或版權資訊。如果需要,可以在圖片說明或頁面其他位置標註來源。把版權訊息硬塞進 alt,對使用者和 SEO 而言都是干擾(尤其螢幕閱讀器朗讀一串名字或網址,令人費解)。

示意性素材圖:很多素材庫圖其實和「情境照片」一樣,例如表達團隊合作、有一群辦公室人員笑容滿面那種標誌性照片。如果你使用這些來搭配內容,alt 也應如上所述地去描述 與內容相關的層面。比如文章談效率工具,配了一張人在用電腦的素材照片,那 alt 不妨寫 alt="辦公室人員專注使用電腦,提高工作效率",把圖片情境和主旨結合。千萬別寫成 alt="穿白襯衫的男子坐在桌前打字" 這樣平鋪直敘卻無重點。

簡而言之,對 AI 或素材圖片一視同仁:有意義就寫出意義,沒意義就靜默略過。同時更要注意,不要因為圖片漂亮就勉強找話說,確保 alt 文本真正服務於內容和讀者。如果圖片本身就是文章討論的重點(例如你在評論某張 AI 畫作),那 alt 可以較詳盡地描述其風格特色;反之,如果圖片只是輔助,那 alt 就保持精簡專注於主要資訊。

除了在 HTML 中善用 alt,我們還可以透過 JSON-LD 結構化資料(Schema.org 標記)來提供圖片的額外資訊,進一步優化圖片的搜尋表現。結構化資料是一種給搜尋引擎看的後台語法標記,能讓 Google 等搜尋引擎更有效地理解你網頁的內容元素,包括圖片。

為什麼要用結構化資料? 因為搜尋引擎除了一般搜尋結果,還提供各種「豐富結果 (Rich Results)」。例如:產品搜尋可能在結果中直接顯示商品圖片和價格,食譜搜尋在圖片角落顯示「食譜」標籤與評分,文章可能出現在圖文並茂的精選摘要中等等。透過 Schema.org 標記圖片,您有機會讓圖片在搜尋結果中獲得這些附加展示。

以下是一些結構化資料與圖片結合的實用方式:

Article(文章)或 BlogPosting schema:如果你是發表文章或部落格,你可以在 JSON-LD 中聲明這篇文章的主圖。搜尋引擎會知道這張圖是文章的主要圖片。在 Google 新聞或 Discover 平台上,適當標記主要圖片有助於系統選圖。範例:

上述 JSON-LD 描述了一篇文章,包括標題、主要圖片及其屬性(連結、尺寸)和 caption 等等。"caption" 欄位可用來放置對圖片的文字說明,一般可以與我們在 HTML 中寫的 alt 相呼應(不必一字不差,但內容上一致)。這讓搜尋引擎明確知道這張圖的說明,而不僅僅是從網頁上下文推測。

ImageObject schema:如果單純想為圖片提供結構化資料,Schema.org 提供了 ImageObject 類型,讓你描述圖片本身的屬性,例如來源、作者、許可證等等。這對於圖片被大量轉載或希望宣示版權時很有用。你可以在 JSON-LD 中獨立列出圖片信息。例如:

這段標記提供了圖片的說明文字、版權資訊以及作者。representativeOfPage: true 則表示這張圖片是頁面內容的一個代表(例如主要圖片)。Google 圖片搜尋在索引圖片時,會考慮這些結構化數據,可能在圖片結果中顯示一個「許可」徽章或提供圖片的詳細資訊頁。

各類豐富結果所需的圖片:不同的 Schema 結構化資料類型可能要求或建議提供圖片。例如 Recipe(食譜) 結構資料要求至少一張菜餚成品圖,Product(產品) 類型需要產品圖片,Event(活動) 可以有宣傳海報等。將這些圖片嵌入結構化資料有兩大好處:一是增加獲得特殊搜尋結果形式的機會(比如在圖片搜尋中顯示「產品價格」或「食譜」標記),二是幫助搜尋引擎明確關聯圖片與特定實體。舉例來說,一旦你在 Product schema 中標記了 "image": {...},Google 就知道哪張圖片是這個產品的照片,並可能在使用者搜尋該產品時直接呈現那張圖。

實作提醒:結構化資料通常放在頁面的 <head> 區域或頁尾,不會直接顯示給使用者,但搜尋引擎的爬蟲會讀取。你可以同時擁有 alt 文本和 JSON-LD 標記——這兩者並不衝突,反而相輔相成:alt 負責無障礙和一般 SEO,JSON-LD 負責強化機器理解和豐富結果。我們也建議遵循 Google 提供的一般結構化資料指南,確保標記正確且不要違規(比如不要提供與實際內容不符的描述或標記無關圖片)。

結構化資料並不是 SEO 初學必須掌握的,但對於中級進階者來說,是提升網站在搜尋結果中表現的秘密武器。善用它,能讓你的圖片在茫茫網海中更具存在感,並且更有效地觸及目標受眾。

最後,我們整理了一些關於 alt 屬性和圖片 SEO 的常見問題,幫助大家進一步釐清觀念:

Q: alt 跟 title 有什麼不同?

A: alt 屬性是替代文字,主要供螢幕閱讀器和搜尋引擎閱讀,用於描述圖片內容,本身不會在滑鼠懸停時顯示(除非圖片載入失敗時才顯示在頁面上)。而 title 屬性通常會在使用者將滑鼠懸停在元素(包括圖片)上時以工具提示(tooltip)的方式出現。對圖片而言,title 並非必需,大多時候也沒有實質的 SEO 貢獻。另外,title 工具提示對行動裝置或鍵盤導航的使用者幫助不大,因此在無障礙設計上也不是可靠方式。簡言之:alt 提供內容描述給搜尋引擎和無障礙使用者;title 則只是給視覺用戶的一點補充提示(且很多時候可有可無)。除非有特定需要,不然你可以專注撰寫好 alt,並不一定要為每張圖片加 title。

Q: 一定每張圖片都要加 alt 嗎?

A: 幾乎是的,但要視情況而定。對於任何傳遞資訊、與內容相關的圖片,應該都提供描述性的 alt,這樣才能兼顧 SEO 和無障礙。如果圖片純屬裝飾或版面需要(對理解文章毫無幫助),則仍建議加上空的 alt(alt=""),表示你沒有遺漏 alt,而是有意識地將其留空以供輔助工具忽略它。完全不寫 alt 屬性並不是好習慣,因為那會讓一些輔助技術無所適從,也可能被視為未充分優化。特別注意:如果你的網站上有一些模板產生的圖像(例如 icon 字體、樣板圖),要確保它們不是無意間都沒有 alt。如果實在無法為每一張自動生成的圖加上有意義的 alt,就至少批次給它們 alt="" 以標示為裝飾性圖片,避免無內容的圖片干擾使用者或讓搜尋引擎迷惑。

Q: alt 文字應該多長?有字數限制嗎?

A: 沒有硬性字數上限,但一般建議控制在一兩句話以內,也就是大約不超過 125 個字元。這個建議主要考量幾點:其一,過長的 alt 會導致螢幕閱讀器持續朗讀太久,影響使用體驗;其二,一些較舊的輔助技術在處理超長的替代文字時,可能會有截斷的情況(125 字元這個數字常被引用是因為早期某些螢幕閱讀器在這附近截斷,不過現代工具大多沒有嚴格限制,但我們依然遵循簡潔原則)。重點是,精簡且具描述性比字數多更有價值。要做到這點,撰寫 alt 前可以先問自己:「這張圖片最核心的資訊是什麼?」把那部分講清楚即可。另外,也避免冗詞贅句,例如「這是一張…的圖片」這類廢話可以省略。當然,如果圖片本身非常複雜(例如一整張資訊圖包含多段資訊),超過 125 字元也未必寫得完全,這種情況下建議如上所述,用 caption 或文章正文補充,alt 則抓重點描述。

Q: alt 文本應該包含關鍵字嗎?這會對 SEO 更有利嗎?

A: 應該包含適當的關鍵詞,但不要強行塞入。換句話說,如果圖片本身就跟你的內容主題相關,那描述圖片內容的 alt 自然會提及一些關鍵詞,這沒問題,也是應該的。比如你的文章關於「有機花茶」,配圖是一杯花茶,你的 alt 可能會寫「一杯熱氣騰騰的有機花茶,杯旁散落著玫瑰花瓣」。裡頭「有機花茶」就是關鍵詞,但它合理地存在於描述中。然而,切忌為了SEO而刻意在alt硬塞大量關鍵字。像是剛才的例子,如果你寫成「有機 花茶 甜菊 花茶 有機 茶飲」這種明顯堆砌的詞串,不但搜尋引擎會判斷出異常(可能視為作弊),讀者也完全得不到有用資訊。最好的方法是:把 alt 當作服務讀者的文字來寫,順帶考慮到包含與主題相關的詞彙。只要圖片確實貼合內容,alt 自然會增強關鍵詞相關性,而不需要也不應該羅列生硬的SEO關鍵字。