圖片 SEO 完整指南：Alt 描述、檔名、格式與 AI 搜尋優化

做 SEO 時，大多數人會把心力放在標題、關鍵字、內容與連結，圖片往往只是「順手放上去」的配角。但在 AI 搜尋時代，圖片已經是搜尋曝光與點擊的關鍵入口之一，不只 Google 圖片搜尋，連 ChatGPT、Perplexity、Google AI Overviews 在回答視覺類問題時，都會優先引用「圖片有完整文字描述」的頁面。本文從圖片 SEO 的基本觀念出發，完整講解三個核心、最關鍵的 Alt 替代文字 寫法，以及檔名、結構化資料、image sitemap、WebP/AVIF 格式、Core Web Vitals 等實務做法，協助您把圖片從「裝飾」變成「流量資產」。

一、圖片 SEO 是什麼？為什麼 AI 搜尋時代更重要

圖片 SEO (Image SEO) 簡單說，就是讓網站上的圖片更容易被搜尋引擎與 AI 系統找到、理解、收錄，進一步帶來圖片搜尋曝光與頁面流量。許多人會把圖片視為文章配角，但在台灣中小企業常見的情境中，商品圖、案例實拍、菜單照、裝潢前後對照、教學步驟截圖，這些圖片本身就具備搜尋入口的潛力。

AI 搜尋時代的圖片邏輯，已經和過去不一樣

過去談圖片 SEO，大多聚焦在 Google 圖片搜尋。但近年的關鍵變化是：ChatGPT、Claude、Perplexity、Google AI Overviews 並不是「看」圖片的像素，而是「讀」圖片旁邊的文字描述。它們透過 alt 文字、圖說、結構化資料、周圍段落來判斷一張圖片在講什麼，並決定要不要在生成答案時引用您的頁面。

圖片 SEO 不只關乎排名，也關乎「被引用」

在傳統 SEO 邏輯下，圖片 SEO 的目標是「圖片排在 Google 圖片搜尋前面，被點擊」。但在 AEO (Answer Engine Optimization) 邏輯下，目標多了一個：被 AI 助理引用、出現在答案來源連結中。兩者的共同基礎，都是讓圖片有清楚的文字描述、與頁面主題緊密結合。

二、Google 與 AI 如何理解網站圖片

Google 不是只看圖片檔案本身，它會綜合多種訊號來判斷這張圖片在講什麼。AI 助理的判斷邏輯也類似，只是更仰賴文字訊號。

搜尋引擎與 AI 共同參考的七個訊號

• 圖片檔名 (filename)
• alt 替代文字
• 圖片周圍的段落內容
• 圖片下方的圖說 (caption)
• 頁面的整體主題與標題層級
• 圖片是否能被正常爬取 (沒有被 robots.txt、登入牆擋住)
• 圖片品質、尺寸與載入速度

這代表一件很重要的事：圖片 SEO 不是只優化圖片本身，而是要讓圖片和頁面內容之間有清楚的關聯。一張圖片再清晰，如果頁面沒有相關文字說明，Google 與 AI 都很難準確判斷它的主題。反過來說，圖片放在主題明確、文字完整的頁面中，即使檔名不是最完美，搜尋引擎也能透過上下文補上理解。

三、做好圖片 SEO 的三個核心

在進入具體技巧前，先記住三個方向。後面所有的做法，本質上都是在解決這三件事：

四、Alt 替代文字：圖片 SEO 最關鍵的訊號

alt 替代文字 (Alt Text、alt 描述) 是寫在 <img> 標籤 alt 屬性裡的文字，用來描述圖片的內容或用途。它是圖片 SEO 中最關鍵的單一訊號，同時服務三種讀者：視障使用者的螢幕閱讀器、搜尋引擎，以及 ChatGPT、Claude、Perplexity 等 AI 助理。Google 在官方圖片 SEO 文件中也明確指出，alt 是「最重要的圖片中繼資料」。

Alt、title、檔名、caption 的差別

很多人會把這幾個搞混，但它們各自的角色完全不同：

Alt 撰寫的四個核心原則

原則 1：先描述圖片中真正重要的資訊

alt 不是把畫面所有細節都列出來，而是描述這張圖在頁面脈絡中的意義。同一張蛋糕照片，放在「甜點擺盤教學」與「烘焙食譜」兩個頁面，alt 寫法就會不一樣。差別不在字數，而在資訊量——「蛋糕」只交代了類別，「白色瓷盤上的多層巧克力蛋糕，夾層塗有巧克力糖霜，盤子右側放著銀色叉子」才真正具備替代效果。

原則 2：自然、精簡、清楚

用一到兩句自然語句把重點講清楚即可。實務上 alt 字數建議落在 50–125 字 (中文) 之間：太短 (例如只寫「鞋子」) 沒有資訊；太長則容易讓螢幕閱讀器朗讀疲勞，也可能在搜尋結果中被截斷。原則是「夠用就好」。

原則 3：可放關鍵字，但不要硬塞

如果關鍵字本來就和圖片內容相關，可以自然帶入；但不要為了 SEO 強行加入。把多個關鍵字用逗號串起來塞進 alt，既不自然、沒有閱讀價值，還可能被搜尋引擎視為關鍵字堆砌 (Keyword Stuffing) 的操弄訊號。

原則 4：不要寫「圖片是」「照片中」

alt 本來就是圖片的替代文字，不需要再加「這是一張圖片」這類開頭。螢幕閱讀器朗讀時本身就會先說「圖片：」，再讀「這是一張圖片」會變成尷尬的重複。

Smart Alt：寫給 AI 看的 alt

傳統 alt 只說明物件 (例如「咖啡杯」)；Smart Alt 則加入顏色、材質、風格、場景、用途，讓 AI 更容易理解圖片在頁面中的角色，也更可能在相關查詢中引用您的頁面：

alt="咖啡杯"

alt="深棕色陶瓷咖啡杯，杯身印有蒸氣咖啡圖案，放在木質桌面上，
     適合作為辦公室或居家咖啡擺設"

各類型圖片的 alt 範例

• 商品圖：涵蓋品名、顏色、材質、用途。例：alt="米色針織開襟外套正面實穿照，V 領設計搭配修身剪裁"
• 情境／動物圖：描述主體與情境。例：alt="一隻三花貓趴在戶外綠色草地上，瞇眼曬太陽休息"
• 功能按鈕：描述「功能」而非「外觀」。例：alt="立即購買"，不要寫 alt="紅色按鈕"
• 純裝飾圖：使用空 alt (alt="") 讓螢幕閱讀器跳過，但不要刪掉 alt 屬性本身——少了屬性，部分螢幕閱讀器會改唸檔名。

台灣中小企業常見情境的 alt 寫法

電商商品圖是 alt 投資報酬率最高的應用之一。若同款 10 張圖 alt 全寫「米色針織外套」，搜尋引擎無法區分，等於浪費 9 張圖的潛力。建議在後台建立 alt 撰寫模板，讓上架時依模板填寫。商品頁同時搭配 Product Schema，可參考商品頁 SEO的完整做法。

複雜圖片 (圖表、流程圖、資訊圖) 用三層架構

圖表、流程圖、資訊圖不適合把所有資訊塞進一句 alt，也因為 AI 助理基本上不會解讀 chart 上的數據，建議採「分層處理」：

Alt 檢核流程與工具

不確定一段 alt 寫得好不好時，可用「替代測試」：假設讀者完全看不到圖片，只聽得到這句 alt，他能不能理解這張圖在頁面中的角色？能，方向就對了。接著檢查 alt 是否與所在段落主題呼應、是否出現冗詞或關鍵字堆砌。整站批次檢查可用以下工具：

• Google Lighthouse (Chrome 開發者工具內建)：一鍵掃描單頁 alt 缺漏
• WAVE (WebAIM 出品)：免費無障礙檢測，標記缺漏 alt 的圖片
• axe DevTools：專業無障礙開發者常用的 Chrome 擴充套件
• Screaming Frog SEO Spider：可批次匯出整站圖片與 alt 對照表，適合大型網站定期健檢

五、其他圖片 SEO 實用技巧

1. 幫圖片取有意義的檔名

相機或系統預設名稱 (例如 IMG_4823.jpg、DSC8842.png) 對搜尋引擎與 AI 幾乎沒有語意價值。較佳做法是使用能描述圖片內容的英文小寫檔名，以連字號 (-) 分隔，例如 ipad-air-13-blue-front.webp。

2. 圖片周圍要有相關文字

Google 與 AI 判斷圖片主題時，會大量參考圖片上下段落的文字。圖片不該只是「插」在文章裡，而要出現在對應內容附近：商品圖放在規格與價格旁、教學截圖放在步驟說明旁、比較圖放在分析差異的段落中。

3. 善用圖說補充資訊

圖說 (<figcaption>) 可以補充 alt 不適合寫太長的內容，也加強圖片與主題的關聯，讓 AI 引用時有更豐富的上下文。例如 alt 寫「iPad Air 13 吋藍色款正面展示圖」，圖說補「適合需要大螢幕閱讀、筆記與影音的使用情境」。

4. 不要用圖片取代重要文字

把主標題、選單、商品規格、教學步驟、表格重點直接做成圖片，對 SEO 不利——搜尋引擎對 HTML 文字的理解比圖片內文字更穩定，而 AI 助理基本上不會 OCR 您的圖片。圖片可作視覺輔助，但重要資訊要同步寫在 HTML 文字中。

5. 用有資訊價值的圖片，但不是越多越好

真正有效的圖片應能幫助讀者理解內容，或提供文字以外的資訊。實拍、實作、真實案例，正是台灣中小企業相對於圖庫照片的差異化資產，也是 AI 助理最容易引用的內容類型。但圖片太多會讓頁面變慢、主題分散，插圖前先問：這張圖能幫讀者更快理解嗎？補充了文字說不清楚的地方嗎？和本段主題直接相關嗎？想在拍攝與上傳前把素材準備到位，可參考做網站準備資料清單。

6. 選對圖片格式

7. 控制圖片大小，避免拖慢網站速度

圖片過大是台灣中小企業網站變慢最常見的原因之一。若沒壓縮、又以原始尺寸 (例如 4000px) 放到只顯示 400px 的位置，LCP (Largest Contentful Paint) 通常會直接受拖累。實務建議：上傳前先壓縮 (品質 75–82 通常與原圖無視覺差異)、不要上傳超出顯示需求的大圖、用 srcset 與 sizes 為不同裝置提供不同尺寸、OG 圖建議 1200×630px 且 300KB 以下。

8. 善用 lazy load，但首屏主圖要例外

延遲載入能加快初始載入，但若把首屏主圖也加 loading="lazy"，反而會拖慢 LCP。正確做法：首屏主圖用 loading="eager" + fetchpriority="high"，非首屏圖片再用 loading="lazy"，關鍵圖片可搭配 <link rel="preload">，並確認圖片在 HTML 原始碼中就存在 (而非僅靠 JS 注入)。

<!-- 首屏主圖 (LCP 元素) -->
<img src="hero.webp"
     alt="台中老屋翻新前後對比，客廳系統櫃實作"
     width="1200" height="630"
     loading="eager"
     fetchpriority="high">

<!-- 非首屏圖片 -->
<img src="case-02.webp"
     alt="主臥更衣室收納設計，鏡面拉門展示"
     width="800" height="600"
     loading="lazy">

9. 圖片多的網站可考慮 image sitemap

若網站有大量圖片 (電商、媒體、圖庫、作品集)，建立 image sitemap 能提升圖片被發現的速度，特別是圖片透過 JavaScript 動態載入時。它可單獨建立，也可擴充進既有 XML sitemap，每個 <url> 節點下最多放 1000 個 <image:image>。一般中小企業形象站、圖片不多且已有正常 sitemap 與良好內部連結，邊際效益有限。

10. 為重要圖片加上結構化資料

Schema 結構化資料能讓 Google 更明確知道圖片屬於什麼內容，並可能觸發 Rich Results：Product (商品圖、價格、評價)、Recipe (食譜成品圖)、Article (文章主圖，有助 Discover 與 AI Overviews 引用)、ImageObject (授權與創作者資訊)。完整應用可參考結構化資料的說明。

11. 先確認圖片沒有被技術設定擋住

這是地基。如果圖片根本無法被存取，前面所有優化都無法發揮：

• 圖片網址能直接在瀏覽器開啟
• robots.txt 沒有擋到圖片路徑或 /images/ 目錄
• 頁面沒有被設定 noindex
• 圖片不需登入即可看到 (除非確實是會員內容)
• 手機版圖片正常顯示，且未被 CSS 隱藏
• CDN 或圖片主機沒有封鎖 Googlebot、GPTBot、ClaudeBot 等爬蟲 UA

六、常見的圖片 SEO 錯誤

• 把 alt 寫成關鍵字列表 「平板 平板推薦 平板品牌」這類寫法既不自然，也容易被視為操弄訊號。alt 的功能是描述圖片，不是堆疊關鍵字。
• 所有圖片都用空白 alt 或漏寫 alt 裝飾圖可用空 alt，但商品圖、教學圖、案例圖都應該寫；完全省略 alt 屬性還可能讓螢幕閱讀器去讀檔名。
• 商品變體的 alt 寫得一模一樣 「藍色 iPhone 16」「綠色 iPhone 16」若 alt 都寫「iPhone 16」，AI 會把多張圖視為同一個產品。
• 所有圖片都用相機預設檔名 IMG_4823.jpg、DSC8842.png 完全沒有語意，浪費可優化空間，也讓圖片 URL 不專業。
• 為了清楚而上傳超大原圖 原圖 5MB、顯示尺寸只有 400px，畫質沒比較好，網站卻明顯變慢，LCP 直接受傷。
• 首屏主圖也用 lazy load 首屏主圖通常就是 LCP 元素，加 loading="lazy" 反而拖慢首次內容繪製，是 Core Web Vitals 最常見的反模式。
• 商品頁缺少 Product Schema 沒有 Product Schema，AI 不知道這頁是商品頁，被引用為「購物建議」時的機會就會低很多。
• 手機版圖片體驗很差 台灣行動裝置流量普遍超過 7 成，手機版圖片變形、超出版面、載入慢，直接影響 SEO 與轉換。

七、圖片 SEO 優化順序建議

建議不要一次大改全站，可按以下五個步驟逐步推進，從技術地基往上做。

• 先處理技術基礎 檢查圖片是否被 robots.txt 封鎖、頁面是否 noindex、圖片是否能被正常爬取。這一步沒做好，後面所有優化都會失效。
  打開 Google Search Console「網頁索引」報表確認核心頁面狀態，並用 robots.txt 測試工具確認沒有誤擋 /images/ 或圖片 CDN。
• 優先優化重要圖片 從首頁主圖、商品主圖、文章封面、案例代表圖下手，改檔名、補 alt、加圖說。
  電商可先處理「銷售前 20% 商品的主圖」與「Blog 流量前 10 篇的封面圖」，投資報酬最高。
• 補強圖片周圍文字與圖說 檢查圖片附近段落是否與圖片內容呼應，必要的圖片補上 <figcaption>，讓圖片不孤立存在。
• 改善格式、尺寸與載入策略 把 JPEG 換成 WebP/AVIF、加上 srcset，主圖加 fetchpriority="high"，非首屏圖片加 loading="lazy"，目標讓 LCP 進入 2.5 秒以內。
• 最後再處理 sitemap 與結構化資料 建立 image sitemap、為商品頁加 Product Schema、為文章加 Article Schema。這些屬於進一步加強，前提是前四步先做好。

八、結論：把圖片當成內容資產

圖片 SEO 不是「加 alt」就結束，也不是上傳幾張圖就會自動帶來流量。在 AI 搜尋時代，真正有效的圖片 SEO，是把圖片視為內容的一部分，讓搜尋引擎能讀懂、讓 AI 助理願意引用、讓使用者覺得有幫助。整篇可以收斂成四件事：

• 讓搜尋引擎與 AI 爬蟲找得到圖片 (技術可存取性)
• 讓搜尋引擎與 AI 看得懂圖片 (檔名、alt、圖說、周圍文字)
• 讓圖片和頁面主題有清楚關聯 (內容相關性)
• 讓圖片不會拖慢網站速度 (WebP/AVIF、壓縮、lazy load、preload)

對台灣中小企業而言，實拍照、案例圖、產品實作圖，正是大型品牌與通用圖庫無法取代的差異化籌碼——關鍵在於，讓它們被搜尋引擎與 AI 看見。想搭配整套策略一起規劃，可延伸閱讀SEO 是什麼完整教學，從關鍵字、內容、技術到 AI 搜尋優化逐步建立完整體系；若圖片載入速度是主要瓶頸，可深入了解Core Web Vitals的優化方法。

常見問答 FAQ