圖片 SEO 完整教學:14 個技巧讓圖片被 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 的三個核心

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

四、14 個圖片 SEO + AEO 實用技巧

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

許多網站上傳圖片時直接使用相機或系統預設名稱,例如 IMG_4823.jpg、DSC8842.png、螢幕截圖_p1.webp。這些檔名對搜尋引擎與 AI 來說幾乎沒有語意價值。

較佳的做法是使用能描述圖片內容的英文小寫檔名,以連字號 (-) 分隔單字:

• 不佳:IMG001.jpg
• 普通:tablet.jpg
• 較佳:ipad-air-13-blue-front.webp

2. 每張有資訊價值的圖片都要寫 alt 文字

alt 是圖片替代文字,也是圖片 SEO 中最關鍵的單一訊號。它同時服務三種讀者:

• 視障使用者的螢幕閱讀器
• 搜尋引擎 (Google、Bing)
• AI 助理 (ChatGPT、Claude、Perplexity、Google AI Overviews)

三者讀的都是同一段 alt,所以一段好的 alt 必須同時做到三件事:寫出圖片真正內容、與頁面主題有關、簡潔自然。

好的 alt vs 不好的 alt

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

這是很多人忽略的細節。Google 與 AI 在判斷圖片主題時,會大量參考圖片上下段落的文字內容。也就是說,圖片不該只是「插」在文章裡,而是要出現在對應的內容段落附近。

• 商品圖放在商品介紹、規格、價格附近
• 教學截圖放在對應的步驟說明旁
• 比較圖放在分析差異的段落中
• 食譜成品圖放在料理成果或做法區塊附近
• 案例實拍圖放在客戶服務內容或地點說明處

4. 善用圖說補充資訊

圖說 (<figcaption>) 不是必要,但用得好通常很有效。它可以補充 alt 不適合寫太長的內容,也能加強圖片和文章主題之間的關聯。

• alt:iPad Air 13 吋藍色款正面展示圖
• 圖說:圖為 iPad Air 13 吋藍色款,適合需要大螢幕閱讀、筆記與影音的使用情境。

這樣的搭配,比單一純圖片完整許多,也讓 AI 在引用時有更豐富的上下文可以使用。

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

有些網站為了版面美感,會把重要內容直接做成圖片,例如主標題、選單、商品規格、教學步驟、表格重點。這對 SEO 是不利的——搜尋引擎對 HTML 文字的理解,還是比圖片內的文字更穩定,而 AI 助理基本上不會去 OCR 您的圖片。

6. 使用清楚、有資訊價值的圖片

不是「有放圖片」就有 SEO 效果。真正有效的圖片,應該能幫助讀者理解內容,或提供文字以外的資訊。

同樣是「平板電腦推薦」文章:

• 如果只放品牌官圖,和競爭對手差異有限
• 如果有實拍照、尺寸對照、厚度對比、手持情境圖,內容差異化會明顯高出許多

AI 助理在挑選引用來源時,會傾向選擇「有獨家資料、第一手圖片」的頁面。台灣中小企業的優勢正在這裡:實拍、實作、真實案例,都是圖庫照片無法取代的內容資產。

7. 不是圖片越多越好,而是每張都要有意義

知道圖片重要後,常見的反向錯誤是「大量插圖」。但圖片太多反而會讓頁面變慢、主題分散。插圖前可以先問自己三個問題:

• 這張圖能幫助讀者更快理解內容嗎?
• 這張圖補充了文字說不清楚的地方嗎?
• 這張圖和本段主題直接相關嗎?

如果三個答案都是否定,這張圖可能沒有存在的必要。

8. 選對圖片格式

圖片格式直接影響畫質與檔案大小,進而影響網站速度。以下是目前的主流選擇:

9. 控制圖片大小,避免拖慢網站速度

圖片過大,是台灣中小企業網站變慢最常見的單一原因之一,尤其在商品頁、首頁、Blog 文章頁。圖片若沒有壓縮、又直接以原始尺寸 (例如 4000px) 放到只顯示 400px 的位置,Core Web Vitals 中的 LCP (Largest Contentful Paint) 指標通常會直接受到拖累。

實務建議

• 上傳前先壓縮 (品質 75-82 通常與原圖無視覺差異)
• 不要上傳超出實際顯示需求的大圖
• 使用 srcset 與 sizes 為不同裝置提供不同尺寸
• 首屏主視覺優先處理,通常是 LCP 元素
• OG 圖建議 1200×630px、檔案 300KB 以下

10. 善用 lazy load,但首屏主圖要例外

延遲載入 (lazy loading) 能加快初始載入,圖片多的頁面尤其有效。但若設定方式不對,反而會出現兩個問題:首屏 LCP 圖片被延遲、或搜尋引擎抓不到圖片。

常見錯誤

• 首屏主圖也加了 loading="lazy",導致 LCP 變慢
• 所有圖片完全依賴 JavaScript 動態生成,搜尋引擎抓不到
• 圖片要點擊或滾動到極後段才載入

正確做法

• 首屏主圖使用 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">

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

若您的網站有大量圖片 (電商、媒體、圖庫、作品集),建立 image sitemap 會明顯提升圖片被發現的速度。它的作用不是保證排名上升,而是幫助搜尋引擎更有效率地發現所有圖片,特別是當圖片透過 JavaScript 動態載入、或站內結構較複雜時。

image sitemap 可以單獨建立,也可以擴充進既有的 XML sitemap。每個 <url> 節點下,最多可放 1000 個 <image:image>:

<url>
  <loc>https://www.example.com/products/ipad-air-13</loc>
  <image:image>
    <image:loc>https://www.example.com/images/ipad-air-13-blue-front.webp</image:loc>
  </image:image>
  <image:image>
    <image:loc>https://www.example.com/images/ipad-air-13-blue-back.webp</image:loc>
  </image:image>
</url>

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

Schema 結構化資料能讓 Google 更明確知道圖片屬於什麼類型的內容,並可能觸發圖片搜尋的 Rich Results。常見可用 Schema 包括:

• Product:商品圖、價格、評價,可在圖片搜尋中顯示價格徽章
• Recipe:食譜成品圖,可顯示烹飪時間、評分
• Article:文章主圖,有助於 Google Discover 與 AI Overviews 引用
• ImageObject:授權資訊、創作者,適合圖庫網站與媒體

想了解結構化資料更完整的應用,可延伸閱讀 新視野 SEO 完整教學 的相關章節。

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

這一點常被忽略,卻是地基。如果圖片根本無法被存取,前面所有的優化都無法發揮。

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

14. 文件、圖表類圖片要對應 HTML 結構化內容

在 AI 搜尋時代,「圖表類圖片」面對的挑戰更明顯:AI 助理基本上不會解讀 chart 上的數據,但會引用您頁面中「同樣描述這份數據」的文字段落。

五、常見的圖片 SEO 錯誤

• 把 alt 寫成關鍵字列表 alt 的功能是描述圖片,不是堆疊關鍵字。「平板 平板推薦 平板品牌」這類寫法既不自然,也容易被搜尋引擎視為操弄訊號。
• 所有圖片都用空白 alt 裝飾性圖片可以使用空 alt,但所有圖片都空白就會浪費機會。商品圖、教學圖、案例圖都應該寫 alt。
• 商品變體的 alt 寫得一模一樣 「藍色 iPhone 16」「綠色 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 策略一起規劃,可延伸閱讀 新視野 SEO 完整教學,從關鍵字、內容、技術到 AI 搜尋優化逐步建立完整體系。

常見問答 FAQ