產品圖片替代文字：6 種等於沒寫的寫法

產品圖片替代文字（alt），就是尺寸圖悄悄消失的地方。圖片照常載入，尺寸就用 48 級大字標在上頭，可是除了人眼以外的每一個讀者——螢幕閱讀器、搜尋引擎爬蟲、AI 回答引擎——拿到的都是一片空白。

Baymard Institute 的電商無障礙基準研究給了具體數字：55% 的電商網站沒有用替代文字傳達資訊型圖片的核心內容，64% 把文字直接嵌進圖片裡，9% 只用一張圖來呈現複雜資訊。如果你賣的是家具、五金或建材，最後那 9% 幾乎一定包含你，因為你的尺寸表就是一張 JPEG。

以下是從真實商品圖庫裡挑出來的六種替代文字寫法、每一種為什麼失效，以及該改寫成什麼。

產品圖片替代文字實際上要扛的工作

產品圖片替代文字是存放在圖片 alt 屬性裡的文字替代內容——螢幕閱讀器會用這段文字代替圖片唸出來，它也是所有「看不到圖」的系統唯一能取得的圖片描述。

它有兩種讀者，而多數賣家只替第一種編了預算：

W3C 的網頁無障礙推動計畫（WAI）把根本問題講得很直接：當文字被烤進圖片裡，「更好的設計做法是使用以 CSS 排版的真實文字，而不是以圖片呈現文字」；而當圖片形式的文字真的無法避免時，文字替代內容必須包含與圖片中完全相同的文字。印在 JPEG 裡的尺寸不是產品資料，它是產品資料的一張照片，除了人眼沒有東西讀得懂。

在歐洲，這件事現在還多了一條法律界線。《歐洲無障礙法案》——即 2019/882 號指令（EU）——在第 2(2)(f) 條把電商服務列為受規範服務，各會員國自 2025 年 6 月 28 日起適用。第 4(5) 條給了提供服務的微型企業豁免，第 3(23) 條把微型企業定義為員工少於 10 人、且年營業額或資產負債表總額不超過 200 萬歐元。如果你的規模超過這條線，又賣給歐盟消費者，那張尺寸表 JPEG 就不再只是轉換率問題。

反面寫法 1：檔案名稱

alt="IMG_4821.jpg"。alt="sofa-3-final-v2-USE-THIS"。alt="chair_dim_01"。

圖片從資料夾匯出、批次上傳、沒有人寫說明，就會變成這樣。頁面上若缺少 alt 屬性，多數螢幕閱讀器會退回去唸檔名——顧客聽到的是「I M G 底線 四 八 二 一 點 j p g」，然後就離開了。

修法一點也不高明：寫一句話，說清楚這張圖裡的這個具體產品。

反面寫法 2：關鍵字堆砌

alt="sofa couch settee 3 seater sofa cheap sofa modern sofa living room sofa buy sofa online"。

Google 自家的圖片指南直接點名了這件事：替代文字是「為圖片提供更多中繼資料時最重要的屬性」，而往裡面塞關鍵字「會造成糟糕的使用者體驗，也可能讓你的網站被視為垃圾內容」。Google 拿出來當正面示範的那一條只有四個字：alt="Dalmatian puppy playing fetch"。

還有一筆沒人提的成本。螢幕閱讀器會照使用者的朗讀速度把整串唸完，中途無法跳讀。九個重複關鍵字就是九秒噪音，讀者在這九秒裡對你的產品一無所獲。

寫那句真正的描述。你真正想排的關鍵字，會自然地在裡面出現一次。

反面寫法 3：只以圖片形式存在的尺寸表

這是最貴的一種，也是家具、服飾與建材業的預設做法：把整張尺寸表匯出成 1200 像素寬的 PNG，丟進圖庫。

W3C 把這類圖歸為複雜圖片，並要求提供兩段式的文字替代——一段簡短描述用來辨識這張圖並指向長描述，一段長描述作為「圖片所傳達關鍵資訊的文字呈現」，而且要讓所有人都取得到，不能藏起來。

實務上，「讓所有人都取得到」就是全部答案。別想把十二項尺寸硬塞進 alt 屬性。把這張表用真正的 HTML 表格發在頁面上，再讓 alt 屬性指向它：

alt="Larsen 系列沙發尺寸表，相同尺寸已列在下方表格中"

然後把表格放在下面。這不會花你什麼成本——標記好的表格可被索引、可被 AI 回答引擎直接引用、可翻譯，還能在手機上自動排版，而一張 9pt 小字的 1200 像素 PNG 做不到。像標準沙發尺寸這樣的參考頁面，正是為此以文字形式存在。如果你還想照顧那些從不往下捲的買家，把尺寸留在圖上也行，兩個都留。圖片和表格不是競爭關係；有圖沒表才是問題。

反面寫法 4：描述照片，而不是描述數字

在一張尺寸圖上寫 alt="grey fabric sofa in a bright living room"。

這是最不易察覺的一種失敗，因為這句話嚴格說來沒錯。它描述了一張照片，只是沒有描述這一張照片——而這張照片存在的全部理由，就是它帶著產品描述裡沒有的五個尺寸。

兩條規則幾乎涵蓋所有情況：

• 如果這張圖的職責是好看，就描述它看起來的樣子。
• 如果這張圖的職責是承載資訊，那替代文字就要承載這些資訊——數字、單位，以及每個數字量的是什麼。

出錯最集中的地方，是同一個產品兩種圖都有的時候。同一張沙發的主圖與尺寸圖需要完全不同的替代文字，把主圖的 alt 貼到尺寸圖上，等於丟掉頁面上唯一一張能回答「放得下嗎」的圖。

反面寫法 5：替裝飾性圖片寫一整段替代文字

背景紋理、分隔線圖形、A+ 模組頂端的品牌花飾。有人替它們一律寫上 alt="beautiful natural oak wood grain texture background"，於是螢幕閱讀器使用者在每兩張真正的產品圖之間，都得聽三句風景描寫。

裝飾性圖片要用空的 alt 屬性——alt=""——它告訴輔助科技直接跳過這張圖。這和「乾脆不寫這個屬性」是兩回事：不寫會讓圖片變成一個沒有標籤的未知物件，照樣會被唸出來。空屬性和缺屬性在你的 CMS 裡長得一模一樣，行為卻完全相反。

有一個判斷值得特別講清楚：比例參照圖不是裝飾性圖片。把產品跟一張標準 A4 紙並排拍的照片是在做資訊工作，它的替代文字就該把這件事講出來。

反面寫法 6：一段替代文字，配十二張圖

批次編輯工具讓這件事變得毫不費力。商品頁上每張圖都寫 alt="Larsen 3-seat sofa"，螢幕閱讀器使用者就把同樣五個字聽十二遍，永遠不會知道第 4 張是尺寸圖、第 7 張是布料特寫、第 9 張是包裝紙箱。

按功能幫它們編號，而不是按位置。以下是我們交給尺寸類產品賣家的範本：

60 秒自我檢查

先在你賣得最好的五個商品頁跑一遍，再去跑其他的。

• 沒有任何 alt 屬性帶著副檔名（.jpg、.png、.webp）
• 同一個商品頁上沒有兩張圖共用完全相同的替代文字
• 每張尺寸圖的替代文字裡至少有一個數字和一個單位
• 每張尺寸表圖片旁邊都附上同樣資料的 HTML 表格
• 裝飾性圖片寫的是 alt=""，而不是缺屬性、也不是一段描述
• 沒有任何 alt 屬性把同一個關鍵字重複超過一次
• 替代文字用的是店面所在語言，而不是只有英文
• 替代文字裡的尺寸和規格表裡的尺寸對得上——去核對一遍，它們經常對不上

最後這條抓到的錯誤比其餘全部加起來還多。一個數字一旦被畫到圖片上，它就跟來源紀錄斷了連結，接著在往後每一次規格改版裡一路錯下去。同樣的失敗也出現在商品資料饋給裡：產品尺寸結構化資料談的正是那些因為同樣原因一直空著的欄位。

這跟「被引用」有什麼關係

搜尋引擎索引 alt 屬性已經二十年了。改變的是還有誰在讀它。一個 AI 回答引擎在組出「小坪數該選多深的沙發」這類回答時，打不開你的 JPEG，它只能用你 HTML 裡的文字——產品描述、規格表和 alt 屬性。所有你只畫在圖上、別處沒寫的東西，對它來說都不存在。

撇開無障礙法規、也撇開螢幕閱讀器不談，上面這套紀律的實際理由就在這裡：你以文字形式發布的尺寸，才是你能被引用的尺寸。

常見問題

產品圖片替代文字該寫多長？

長到能說清圖裡有什麼，短到一口氣唸得完。主圖通常 5 到 12 個字詞。尺寸圖會更長，因為數字本身就是內容。如果你寫著寫著超過大約兩行，那這就是一張複雜圖片，需要兩段式處理——一段簡短的 alt，加上以頁面正文形式發布的完整資料。

替代文字對 SEO 有幫助嗎？

有，但它是脈絡，不是一根能拉的排名槓桿。Google 把替代文字描述為圖片中繼資料最重要的來源，同時明確把塞關鍵字列為垃圾行為。請為看不到這張圖的人寫；SEO 效益是把這件事做好之後的副產品。

尺寸表圖片的替代文字該怎麼寫？

寫一句簡短的辨識句，指向真正的表格——例如「Larsen 系列沙發尺寸表，相同尺寸已列在下方表格中」——然後真的把表格用 HTML 發出來。想把一整張尺寸網格塞進 alt 屬性，做出來的東西螢幕閱讀器使用者跟不下去，爬蟲也解析不成列。

裝飾性產品圖片需要替代文字嗎？

它們需要一個空的 alt 屬性 alt=""，這和把屬性省略掉不是同一回事。空屬性告訴輔助科技跳過這張圖；缺屬性會讓它變成未知物件，照樣被唸出來，通常就是唸檔名。

《歐洲無障礙法案》管得到我的網路商店嗎？

如果你向歐盟消費者提供電商服務，而且不是微型企業，那就管得到——電商服務列在 2019/882 號指令（EU）第 2(2)(f) 條中，自 2025 年 6 月 28 日起適用。第 4(5) 條的微型企業豁免適用於員工少於 10 人、且年營業額或資產負債表總額在 200 萬歐元以下的服務提供者。細節請查你所在國家的國內轉換立法，因為執法與罰則是在會員國層級設定的。

為什麼我的尺寸標註還沒被看清就被裁掉了？

那是另一個問題，但病根一樣——資訊只活在像素裡。通路圖庫會照自己的比例裁圖，靠邊擺的標註就消失了；產品圖片長寬比講的是各通路的安全區規則。

來源與依據

• Baymard Institute — 用「ALT」文字傳達「資訊型」圖片的核心內容（55% 的網站沒做到）
• W3C 網頁無障礙推動計畫 — 圖片教學：以圖片呈現的文字
• W3C 網頁無障礙推動計畫 — 圖片教學：複雜圖片
• W3C 網頁無障礙推動計畫 — 圖片教學：裝飾性圖片
• Google Search Central — Google 圖片最佳做法，含替代文字指引
• EUR-Lex — 2019/882 號指令（EU）（歐洲無障礙法案）：第 2(2)(f) 條、第 3(23) 條、第 4(5) 條、第 31 條
• 歐盟執委會 — 歐洲無障礙法案：受規範的產品與服務

一次修好，而不是一張圖修一次

上面每一種反面寫法，都是同一個失敗換了頂帽子：一個尺寸被畫進了圖片，卻從來沒被寫到機器讀得到的地方。光靠養成更好的替代文字習慣修不好它，因為你要描述的那些數字，本來就是手工打在照片上的，而且已經開始跟規格漂移了。

真正撐得住的做法，是把尺寸圖層當資料而不是當美術素材：貼著產品的真實邊緣去量，讓數字是量出來的而不是目測的；把標註圖層維持成可編輯的活圖層，而不是壓平成一張 JPEG；接著從同一個來源匯出兩樣東西——依各通路規格尺寸輸出的標註圖片，以及可以直接貼進規格表與 alt 屬性的文字尺寸清單。這就是測量式標註工具與 AI 生圖的差別：一個能告訴你它量到了什麼，另一個是在你的產品旁邊編了一個看起來像那麼回事的數字。如果你本來就要重做商品頁素材，規格表是讓這些數字活起來的正確位置，因為買家和你自己的型錄讀的都是這份文件。