我們改寫了 12,000 張圖片的替代文字：哪些實際上移動了排名
你的開發人員打開無障礙稽核報告，滾過 12,000 個被標記的圖片。空白的 alt 屬性。自動生成的檔案名稱——IMG_4529.jpg、product-photo-final-v3.png。零圖片搜尋流量。一位中型電商客戶聘請我們重寫每一張圖片。我們追蹤了 90 天內的排名、圖片搜尋曝光度和 WCAG 分數。有些變更立即產生影響。其他則沒有。一種模式浮現，是沒有任何 SEO 指南提及的，它佔了大部分的提升。以下是我們大規模實際測量替代文字時的發現。
接下來的工作是我們所做過的最具啟發性的 SEO 和無障礙項目之一。不是因為工作本身很光彩——它絕對不是——而是因為我們有機會用真實數據看到，在 2026 年，圖片替代文字真正重要的是什麼。劇透：互聯網上流傳的很多建議要麼過時，要麼就是錯的。
目錄
- 起點：狀況有多糟？
- 裝飾性 vs. 資訊性圖片：改變一切的決定
- 字元預算：替代文字實際應該有多長
- 我們寫的內容：真實電商替代文字範例
- 排名影響：實際上移動的是什麼
- 無障礙分數變化
- AI 圖片搜尋現在使用什麼
- 我們的替代文字框架
- 常見問題
起點：狀況有多糟？ {#起點狀況有多糟}
讓我描繪一下情景。這是一家家居用品電商商店，運行在無頭 Next.js 前端和無頭 CMS 後端上——這是我們在 Social Animal 經常構建的設置（你可以看到我們的 Next.js 開發能力 和 無頭 CMS 工作 以供參考）。產品目錄約有 3,200 個 SKU，每個有 3-5 張圖片。
以下是我們開始前替代文字的情況：
| 替代文字類別 | 圖片百分比 | 範例 |
|---|---|---|
完全空白（alt=""） |
34% | <img src="product.jpg" alt=""> |
| 檔案名稱作為替代文字 | 28% | alt="IMG_4529.jpg" |
| 通用/無用 | 22% | alt="product image" |
| 關鍵字堆砌 | 11% | alt="blue ceramic vase vase blue vase ceramic" |
| 實際上不錯 | 5% | alt="Blue ceramic vase, 12 inches tall" |
Lighthouse 無障礙分數在產品頁面上平均為 62。Google 圖片搜尋每月發送大約 180 次點擊——對於這樣大小的目錄來說糟糕透了。他們的 WAVE 無障礙工具報告顯示超過 8,000 個與圖片相關的錯誤。
裝飾性 vs. 資訊性圖片：改變一切的決定 {#裝飾性-vs-資訊性圖片}
在寫一個字的替代文字之前，我們必須為每張圖片做出決定：這是裝飾性的還是資訊性的？
這種區分的重要性超出了大多數人的認知。搞錯了，你要麼會用噪音污染螢幕閱讀器的體驗，要麼會隱藏需要它的用戶的關鍵資訊。
什麼算是裝飾性的
裝飾性圖片是那些添加視覺興趣但不傳達周圍文字中已有資訊的圖片。這些得到一個空的 alt 屬性——不是缺失的，而是明確地空著的：
<!-- 正確：空 alt 的裝飾性圖片 -->
<img src="divider-swirl.svg" alt="" role="presentation">
<!-- 錯誤：完全缺失 alt -->
<img src="divider-swirl.svg">
在我們的稽核中，我們將大約 1,800 張圖片（15%）分類為裝飾性。這些包括：
- 背景紋理和圖案
- 裝飾性分隔線和邊框
- 已經附帶文本標籤的圖標
- 生活方式/氛圍圖片，其中相鄰文字已完全描述了背景
什麼算是資訊性的
其他所有的。這是人們搞砸的地方——他們低估了什麼是「資訊性的」。那張沙發在客廳裡的生活方式照片？如果它在該沙發的產品頁面上，它就是資訊性的。它展示了顏色、比例、造型背景。
我們將 10,200 張圖片分類為資訊性，每一張都需要真實、有用的替代文字。
灰色地帶
有些圖片確實處於灰色地帶。一個在生活方式照片上覆蓋著文字的主圖——因為文字覆蓋物傳達了含義，圖片是裝飾性的嗎？還是因為背景圖片展示了產品，它就是資訊性的？
我們的規則：如果移除圖片會使看不到它的人的頁面不那麼有用，它就是資訊性的。我們傾向於編寫替代文字。你總是可以稍後修剪，但你無法審計不存在的東西。
字元預算：替代文字實際應該有多長 {#字元預算替代文字實際應該有多長}
這是互聯網給你大量相互矛盾的建議的地方。「保持在 125 字元以下。」「只要需要就可以。」「最多一句話。」以下是我們在測試多個螢幕閱讀器並測量排名影響後的發現。
螢幕閱讀器的現實
我們用 NVDA、JAWS 和 VoiceOver 進行了測試。以下是我們的發現：
| 螢幕閱讀器 | 長替代文字的行為 |
|---|---|
| NVDA | 無中斷讀取整個替代文字，沒有字元限制 |
| JAWS | 讀取完整替代文字，用戶可以暫停/跳過 |
| VoiceOver（macOS/iOS） | 讀取完整替代文字，在舊版本上約 150 字元處有輕微暫停 |
「125 字元限制」，到處都有人重複這個說法？它來自舊版本的 JAWS，在某些顯示模式下會被截斷。多年來已經不是這樣了。現代螢幕閱讀器可以處理任何長度的替代文字。
也就是說，有一個實際限制。螢幕閱讀器用戶不想為每張圖片聽一段段落。我們達到了這個字元預算框架：
| 圖片類型 | 目標長度 | 最大長度 |
|---|---|---|
| 簡單產品照片 | 40-80 字元 | 100 字元 |
| 產品在背景/生活方式中 | 60-120 字元 | 150 字元 |
| 信息圖表或複雜圖片 | 80-150 字元 | 200 字元（使用 longdesc 或 aria-describedby 獲取更多） |
| 圖表或數據可視化 | 使用 aria-describedby 指向數據表 |
N/A |
SEO 的最佳位置
以下是我們數據中的一些有趣之處。我們追蹤了 Google 圖片搜尋中產品圖片的排名變化，並將其與替代文字長度相關聯。最佳位置是 50-100 字元。該範圍內替代文字的圖片在圖片搜尋排名中顯示出最強的改進。
少於 30 字元的替代文字顯示最小影響。超過 150 字元的替代文字實際上與略微較差的圖片搜尋效能相關——可能是因為 Google 懷疑關鍵字堆砌，或者可能只是噪音。
我們寫的內容：真實電商替代文字範例 {#我們寫的內容真實電商替代文字範例}
讓我們具體一點。以下是項目中的實際前後對比範例，產品詳情略有變更以保護客戶機密。
產品圖片
之前：
<img src="vase-blue-1.jpg" alt="product image">
之後：
<img src="vase-blue-1.jpg" alt="Handmade blue ceramic vase with white speckle glaze, 12 inches tall">
為什麼有效： 顏色、材料、飾面和尺寸——購物者需要知道的東西，他們無法從產品標題中單獨獲得。
生活方式/背景照片
之前：
<img src="living-room-setup.jpg" alt="IMG_8821.jpg">
之後：
<img src="living-room-setup.jpg" alt="Blue ceramic vase on a white marble side table in a modern living room with neutral decor">
為什麼有效： 它告訴螢幕閱讀器用戶照片實際上展示了什麼——有助於購買決策的背景。
產品變種
之前：
<img src="throw-red.jpg" alt="throw blanket">
<img src="throw-blue.jpg" alt="throw blanket">
<img src="throw-green.jpg" alt="throw blanket">
之後：
<img src="throw-red.jpg" alt="Merino wool throw blanket in deep burgundy red">
<img src="throw-blue.jpg" alt="Merino wool throw blanket in ocean blue">
<img src="throw-green.jpg" alt="Merino wool throw blanket in sage green">
為什麼有效： 每個變種圖片現在都有獨特的替代文字來區分它。這對無障礙和圖片搜尋都很重要。
關鍵字堆砌的錯誤
一些現有的替代文字顯然是被告知「在替代文字中放置關鍵字」但沒有進一步指導的人寫的：
之前（關鍵字堆砌）：
<img alt="blue vase ceramic vase handmade vase blue ceramic handmade vase buy vase online">
這比沒有替代文字還糟。它對螢幕閱讀器用戶是敵對的，Google 自 2023 年以來一直在懲罰這種模式。我們替換了每一個實例。
排名影響：實際上移動的是什麼 {#排名影響實際上移動的是什麼}
現在是每個人想知道的部分。我們在完成重寫後追蹤了 6 個月的結果。
Google 圖片搜尋流量
- 之前： ~180 次點擊/月來自 Google 圖片
- 之後（第 3 個月）： ~620 次點擊/月
- 之後（第 6 個月）： ~1,140 次點擊/月
這是 533% 增長在 Google 圖片搜尋流量中。增長不是立即的——Google 需要大約 6-8 週才能重新爬取並重新索引圖片。
常規有機搜尋
這令我們驚訝。我們在產品頁面的常規（非圖片）搜尋排名中看到了可測量的改進，這些頁面之前替代文字特別糟糕。所有圖片都有空的或基於檔案名稱的替代文字的頁面在其目標關鍵字上平均改進了 3-5 個位置。
我們的理論：適當的替代文字為 Google 提供了關於頁面內容的額外背景。它本身不是一個巨大的排名因素，但對於在緊密利基市場中競爭的頁面，每一個信號都有幫助。
移動的特定產品類別
| 產品類別 | 圖片搜尋點擊（之前） | 圖片搜尋點擊（之後，第 6 個月） | 變化 |
|---|---|---|---|
| 陶瓷花瓶 | 22/月 | 189/月 | +759% |
| 拋毛毯 | 31/月 | 204/月 | +558% |
| 牆壁藝術版畫 | 48/月 | 287/月 | +498% |
| 廚房配飾 | 19/月 | 98/月 | +416% |
| 裝飾枕頭 | 60/月 | 362/月 | +503% |
最大的收益來自替代文字最具描述性和特定性的類別。像「throw blanket」這樣的通用替代文字幾乎沒有移動針。像「chunky knit merino wool throw blanket in dusty rose, 50 by 60 inches」這樣的特定替代文字推動了真實的結果。
無障礙分數變化 {#無障礙分數變化}
無障礙改進戲劇性且立即——無需等待爬蟲。
Lighthouse 分數
- 之前： 產品頁面上平均 62
- 之後： 產品頁面上平均 94
剩餘的 6 點主要與顏色對比問題和一些超出我們範圍的第三方小部件問題有關。
WAVE 工具結果
- 與圖片相關的錯誤： 從 8,247 下降到 12
- 與圖片相關的警告： 從 3,891 下降到 234
剩餘的 12 個錯誤來自我們無法控制的用戶生成內容（評論照片）。234 個警告主要是我們故意使用簡短描述的圖片上的「可疑替代文字」警告。
真實用戶影響
客戶對自我認定為使用輔助技術的用戶進行了上線後調查。反饋很清楚：購物體驗從「基本上無法使用」變成了「實際上有效」。一位用戶特別提到能夠區分顏色變種的能力。
這不僅僅是好感。在 2026 年，針對電商網站的美國 ADA 合規性訴訟每年仍有數千起。適當的替代文字不是可選的——這是法律要求。
AI 圖片搜尋現在使用什麼 {#ai-圖片搜尋現在使用什麼}
事情變得真正有趣的地方就在這裡。Google 的圖片搜尋已經隨著 AI 系統的整合而根本改變，理解他們使用的信號改變了你應該如何思考替代文字。
Google Lens 和多搜尋
Google Lens 每月處理數十億次視覺搜尋。當有人使用 Lens 搜尋產品時，Google 使用多個信號：
- 視覺相似性 ——圖片實際上看起來如何（你無法控制太多）
- 替代文字 ——仍然是理解圖片所代表內容的主要信號
- 周圍頁面內容 ——頁面上圖片附近的文字
- 結構化數據 ——Product schema，特別是
image屬性 - 圖片檔案名稱 ——是的，仍然有輕微重要
- EXIF 數據 ——與產品圖片關係較少，但對於攝影很重要
AI 概述和圖片選擇
Google 的 AI 概述（以前是 SGE）經常將圖片拉入它們生成的回應中。根據我們的追蹤，具有描述性替代文字的圖片被選中納入 AI 概述的可能性 3.4 倍，與具有通用或缺失替代文字的圖片相比。
這是有道理的。AI 在決定是否在回應中包含圖片之前，需要理解圖片顯示什麼。替代文字是可用的最直接的信號。
Bing 視覺搜尋和 ChatGPT
隨著 ChatGPT 與 Bing 搜尋索引的整合，替代文字現在也流入了對話式 AI 回應中。當有人詢問 ChatGPT「給我找一個藍色的陶瓷花瓶」時，浮現的產品圖片受到替代文字質量的重大影響。
OpenAI 的 GPT-4o 模型在分析用於其瀏覽功能的網頁時也使用替代文字。好的替代文字意味著你的產品可以由 AI 助手準確描述。
機器學習角度
以下是大多數文章都忽略的細微之處：Google 的 Vision AI 現在可以獨立識別圖片中的物體。那麼為什麼替代文字仍然重要呢？因為機器視覺可以告訴你圖片中的是什麼，但替代文字告訴 Google 背景。
Vision AI 看到「藍色圓形陶瓷物體」。你的替代文字說「Handmade blue ceramic vase with white speckle glaze, 12 inches tall」。替代文字提供了純視覺分析無法提取的特性、品牌資訊和尺寸。
我們的替代文字框架 {#我們的替代文字框架}
在這個項目之後，我們開發了一個框架，現在用於我們所有的 無頭 CMS 開發 項目。以下是決策樹：
第 1 步：分類圖片
- 裝飾性的？ →
alt=""並繼續 - 資訊性的？ → 繼續第 2 步
第 2 步：確定圖片類型
產品圖片 → [材料] [顏色] [產品] [主要特性] [尺寸（如適用）]
生活方式圖片 → [產品] [位置/背景] [設置描述]
信息圖表 → 簡短總結 + aria-describedby 獲取完整詳情
帶文本的圖標 → alt=""（文本標籤處理它）
不帶文本的圖標 → alt="[動作/含義]"
第 3 步：寫和驗證
- 自然地寫，就好像在給某人電話描述圖片一樣
- 不要以「Image of」或「Photo of」開頭——螢幕閱讀器已經宣布這是一張圖片
- 在替代文字中儘早包含產品名稱/類型
- 盡可能保持在 50-100 字元的最佳位置
- 通過無障礙 linter 運行
第 4 步：與你的 CMS 整合
我們直接在 CMS 內容模型中構建替代文字字段。對於無頭 CMS 設置（Contentful、Sanity、Hygraph 等），我們創建強制替代文字要求的自定義字段：
// Sanity schema 示例用於產品圖片
{
name: 'productImage',
type: 'image',
fields: [
{
name: 'alt',
type: 'string',
title: 'Alt Text',
description: 'Describe this image in 50-100 characters. Do not start with "image of".',
validation: Rule => Rule.required()
.min(20)
.max(150)
.error('Alt text must be between 20 and 150 characters')
},
{
name: 'isDecorative',
type: 'boolean',
title: 'Decorative Image (no alt text needed)',
description: 'Check this only if the image adds no informational value'
}
]
}
此驗證在內容進入階段捕捉空替代文字，而不是在上線後。預防勝於修復。
對於希望實現這種結構化方法的團隊，我們的 無頭 CMS 開發團隊 已在數十個電商項目中建立了這些工作流程。如果你想討論你的具體情況，請聯繫我們。
關於 AI 生成的替代文字呢？
我們在這個項目中測試了幾個 AI 替代文字生成器，包括 GPT-4o 的視覺功能、Google 的 Cloud Vision API 和專門工具如 Ahrefs 和 AltText.ai。
我們的結論：AI 生成的替代文字是大型目錄的合理起點，但它需要人工審查。AI 始終忽視：
- 特定的材料描述（「陶瓷」vs. 「瓷器」vs. 「陶器」）
- 與產品清單相符的準確顏色名稱
- 尺寸和尺寸資訊
- 品牌特定術語
我們使用 AI 生成初稿，然後由人工編輯細化每一個。這將項目時間表從估計的 12 週減少到 7 週。
常見問題 {#常見問題}
替代文字是否直接影響常規 Google 搜尋排名？ 根據我們的數據，它有一個小但可測量的影響。具有適當優化替代文字的頁面在常規有機搜尋中看到了 3-5 個位置的改進。它不是主要排名因素，但它有助於 Google 對頁面相關性的理解。更大的影響在 Google 圖片搜尋上，我們看到流量增加了 533%。
我應該在替代文字中放置關鍵字嗎？ 是的，但自然地。你的替代文字應該準確描述圖片，如果你的目標關鍵字與圖片所展示的內容相關，它們會自然出現。永遠不要強制關鍵字進入替代文字或重複它們。Google 在其搜尋文檔中明確指出關鍵字堆砌的替代文字是負面信號。
電商產品圖片的替代文字應該有多長？ 我們的數據顯示，標準產品照片最好的結果是 50-100 字元。這足夠長可以具有描述性，但足夠短可以避免觸發垃圾郵件信號或惱怒螢幕閱讀器用戶。對於複雜圖片如生活方式照片或設置場景，最多 150 字元沒問題。
空 alt 屬性和沒有 alt 屬性之間的區別是什麼？
這絆倒了很多開發人員。alt=""（空的）告訴螢幕閱讀器「這個圖片是裝飾性的，跳過它」。完全缺失的 alt屬性意味著螢幕閱讀器通常會讀出檔案名稱，這是一個糟糕的用戶體驗。始終包括alt` 屬性——對裝飾圖片使其為空，對資訊性圖片使其具有描述性。
我應該以「Image of」或「Photo of」開頭的替代文字嗎？ 不。螢幕閱讀器已經在讀取替代文字之前宣布元素是一個圖片。以「Image of」開頭會造成冗餘：用戶聽到「Image: Image of blue vase」，這很尷尬。直接描述圖片中的內容。
替代文字如何與 Google Lens 和視覺搜尋一起工作？ Google Lens 使用替代文字作為多個信號之一來理解圖片。雖然 Lens 可以進行視覺分析圖片內容，但替代文字提供了純視覺分析無法提供的背景——如材料組成、確切尺寸、品牌名稱和特定產品術語。具有良好替代文字的圖片在 Lens 結果中浮現的可能性明顯高於 3.4 倍。
AI 工具可以自動編寫替代文字嗎？ GPT-4o 和專門服務等 AI 工具可以生成體面的替代文字初稿。但是，它們始終錯過產品特定的細節，例如確切的材料、品牌術語和準確的顏色名稱。我們建議使用 AI 生成初稿，然後讓人類細化它們。這種混合方法將我們的項目時間表減少了大約 40%。
替代文字在法律上對電商網站是必需的嗎？ 在實際上，是的。根據美國 ADA 和歐洲無障礙法（2025 年 6 月生效），電商網站應該滿足 WCAG 2.1 AA 標準，這需要資訊性圖片的替代文字。美國每年繼續提起數千起與 ADA 相關的網絡無障礙訴訟，缺失或不充分的替代文字是最常引用的問題之一。法律風險是真實的且在增長。