圖片 SEO 優化指南：命名、壓縮、結構化標記

你也許曾有這種經驗？花了三天拍商品照、修圖、上架，每一張都美得像雜誌封面，結果 Google Search Console 開出來，圖片帶來的曝光數字趨近於零。更尷尬的是，競品那張看起來很普通的產品圖，反而一直在 Google 圖片搜尋裡霸佔前面的版位。

圖片優化要同時處理三件事：讓搜尋引擎能發現並理解圖片、讓頁面快速顯示，以及讓讀者取得正確的視覺資訊。檔名、替代文字、圖文脈絡、尺寸與載入方式各自解決不同問題；這些做法能改善搜尋與部分 AI 功能理解圖片的條件，但不保證索引、排名或引用。

重點摘述：先確認圖片能被發現、清楚呈現必要資訊，並以合適尺寸載入。按圖片用途撰寫 alt，把補充解說放在鄰近正文；再檢查格式、尺寸及 LCP 圖片的載入時機。

圖片 SEO 為什麼值得你花一整個下午搞懂

在完整的站內 SEO中，圖片可協助讀者理解產品、步驟或資料，也可能成為搜尋入口。是否值得投入，應依主題與自己的流量、轉換資料判斷，而不是假設每個產業都比五年前更依賴圖片。

第一，圖片搜尋可讓讀者發現視覺內容。商品、教學與設計靈感常適合圖片呈現，但流量是否帶來交易仍須驗證，不能保證比文字搜尋更容易轉換或長期穩定帶來訂單。

第二，圖片會影響載入與版面體驗。LCP 元素可能是圖片，也可能是文字；未預留空間的圖片可能造成 CLS。INP 則衡量互動回應，不能把主要原因一概歸為圖片。應以實際效能資料找出瓶頸，詳見Core Web Vitals 完全攻略。

第三，Google 的 AI 搜尋也可能搭配圖片。官方仍建議相關、高品質的視覺內容與一般 SEO 基本功，沒有公開一套可保證選圖的結構化資料公式。可參考Google AI Overviews 完全指南，並把引用結果與推論分開記錄。

Google 用視覺分析與文字脈絡理解圖片

Google 官方說明會結合電腦視覺、alt 與頁面內容理解圖片。檔名僅提供輕微線索，附近段落與圖說也有幫助；不能把 Google 描述成完全看不見圖、只能讀旁邊文字。

對讀者而言，清楚的圖片與準確解說應互相補充。對搜尋系統而言，圖像、替代文字與正文一致，也能減少理解上的歧義；不必用大量重複標記代替有用內容。

圖片 SEO 同時涉及圖像本身與承載頁面。清晰度、尺寸、可存取性和真實內容都要檢查，不能只改檔名或 alt 就預期搜尋表現改善。

從圖片誕生那一刻起，SEO 就已經開始

製圖前先決定用途、資訊內容、授權與顯示尺寸，能減少後續返工。若是教學或比較圖，先列出讀者需要理解的關係，再決定圖上的文字與細節。

圖片應提供與文章相符的資訊。實拍、圖解或合法圖庫都可使用，不能保證原創或 AI 改圖必定排得更好。使用商用免費圖庫仍須核對授權；換色或裁切不會自動取得新權利。AI 去背工具可協助製作素材，但不能把加工後圖像冒充實拍證據。

照片若記錄真實測試，可補充第一手經驗；示意圖則應讓讀者知道是概念說明。AI 生成的場景不能證明作者實際做過測試，也沒有「加工圖庫就增加 E-E-A-T 分數」的機制。概念可參考E-E-A-T 完整指南。

尺寸要在製作階段就想清楚最終用途。一張 6000×4000 的原始檔，直接上傳到網站是災難。你應該先問：這張圖最大會被顯示在多寬的容器裡？手機上是幾像素？ retina 螢幕需要兩倍密度嗎？在拍攝或設計階段就鎖定「實際需要的最大尺寸加上一到兩倍密度」，後續的壓縮與響應式處理才會輕鬆。

檔名：Google 認識你圖片的第一句話

檔名可提供圖片主題的輕微線索。新圖片宜用簡短、具描述性的名稱；已上線圖片則要衡量改名造成的 URL 變更，不必只為 SEO 批次改掉所有相機檔名。

好的檔名有三個原則：

• 描述實際內容。例如 red-running-shoes.jpg 比無意義編號容易管理；不必硬加無關品牌或購買關鍵字。
• 用連字號分隔單字，不要用底線或空格。Google 把連字號當成字詞邊界，但底線會被當成同一個字的一部分。seo-checklist.png 優於 seo_checklist.png。
• 簡短但清楚。Google 沒有三到六個單字的固定門檻，避免堆砌即可。

新圖片的檔名可用少量字詞描述主要內容，再以連字號分隔，方便辨識與管理。既有圖片若只是命名不理想，先評估改址成本；整體 URL 命名與維護方式可參考網址優化指南。

多語系網站可共用同一圖片資源並在各頁提供相應語言的 alt。若圖像本身已在地化，可使用合適語言的檔名並正確編碼 URL；英文拼音沒有已公布的優先待遇。既有網址保持穩定，必要改址時再規劃對應。

Alt 文字不是關鍵字垃圾桶，是語意橋樑

Alt 文字（替代文字）的主要目的，是讓使用螢幕閱讀器的人理解圖片提供的資訊。有資訊意義的圖片應以簡潔文字描述與上下文相關的內容，不必硬湊完整句子或塞關鍵字；純裝飾圖片通常應使用空的 alt=""。

Google 早就公開說過，Alt 文字是它理解圖片內容的主要訊號之一。但這不代表你該把所有想排名的字塞進去。十年前那種 alt="台北 SEO 公司 SEO 服務 關鍵字排名 第一頁 優化" 的寫法，現在只會讓 Google 覺得你在作弊。正確的寫法是：

站在一個看不見這張圖的人的立場，用一句話告訴他這張圖在傳達什麼，然後在自然的情況下把核心關鍵字放進去。

舉個對比例子。一張「廚房裡擺著一組木質砧板與陶瓷刀」的商品圖：

很多初學者會把 Alt、Title、Caption、Figure 搞混，這裡一次說清楚。這四個角色各自服務不同目的：

• Alt：提供圖片在當下情境中的替代資訊；連結或按鈕圖需描述功能，裝飾圖通常留空。
• Title：img 的 title 屬性可能顯示滑鼠提示，但觸控與輔助工具不一定能可靠取得，不能代替 alt，也沒有已公布的固定 SEO 權重。
• Caption（圖說）：顯示在圖片下方的說明文字，讀者看得到，也是 Google 讀的脈絡之一，特別適合放補充資訊。
• Figure（圖片區塊）：HTML5 的語意標籤，搭配 <figcaption> 可以明確告訴 Google「這段文字和這張圖是一組的」。

把這四個角色分清楚，你就不會一股腦把同一段字塞進每個欄位。記住一個原則：Alt 負責語意，Caption 負責脈絡，Title 負責體驗，各司其職。

這裡再補兩種特殊情境的 Alt 寫法。第一種是純裝飾圖，例如頁面的背景花紋、分隔用的線條圖、純粹用來排版的色塊。這類圖對理解內容沒有幫助，應該用空的 Alt（alt=""）明確告訴螢幕閱讀器「直接跳過這張」。注意是空字串，不是完全不寫 Alt 屬性；完全不寫的話，有些螢幕閱讀器會把整串檔名念出來，反而干擾使用者。第二種是圖表與資訊圖，這類圖承載大量資訊，光靠一句 Alt 不夠。常見的做法是：Alt 寫一句摘要（「2026 年台灣電商各品類圖片流量佔比長條圖」），然後在緊鄰的正文或 Caption 裡把圖表的關鍵數字用文字再講一遍，確保視障讀者與 Googlebot 都能拿到圖裡的資訊。

格式選擇：WebP、AVIF 還是 JPEG？一張決策表講清楚

格式直接決定檔案大小與畫質。選錯格式，再怎麼壓縮都事倍功半。目前的格式版圖是這樣的（依 web.dev 的格式選擇建議，2026 年）：

照片可比較 WebP、AVIF 與 JPEG 的實際輸出；需要無損細節時也可用 PNG 或無損 WebP。簡單向量圖適合 SVG，但沒有所有 logo 一律某格式的規則，社群與其他發布管道也需驗收相容性。

選擇格式的目標是在相同視覺品質下，把位元數砍到最低。速度可能影響使用體驗與轉換，但改善幅度須以自己網站量測；不能從其他網站的案例推論每快一秒就有固定營收效果。

同一張圖可提供不同格式或構圖版本。使用 <picture> 時，瀏覽器依序檢查 <source> 的格式支援與 media 條件，再依適用的 srcset 選擇圖片；沒有符合來源時，由 <img> 提供備援。AVIF、WebP、JPEG 的順序應依實際畫質、檔案大小與目標裝置測試決定，不能假定 AVIF 每次都是最小檔。

壓縮與響應式尺寸：讓同一張圖在小螢幕上不拖垮速度

選對格式之後，下一層是壓縮與響應式尺寸。這兩件事要一起做，因為它們解決的是同一個問題：不要把桌機需要的大圖，原封不動送到手機上。

以可接受畫質與實際檔案大小選參數。來源、格式與內容不同，壓縮率也不同，不保證每張圖能減半或縮小六到八成。圖表文字和細線應特別檢查，可參考圖片壓縮工具實測，但不要盲目套用同一品質值。

srcset 與 sizes 可提供不同解析度候選。瀏覽器也會考慮像素密度、版面及自身策略，不保證手機一定取最小檔。以下範例是首屏以下的一般內容圖，若實測為 LCP 圖則不可沿用 lazy 設定：

<img
  src="content-800.webp"
  srcset="content-400.webp 400w, content-800.webp 800w, content-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="木質砧板搭配陶瓷水果刀的廚房擺設"
  width="800" height="600"
  loading="lazy" decoding="async">

srcset 與 sizes 應符合實際容器，width 和 height 用來提供比例。loading="lazy" 適合非首屏關鍵圖片；decoding="async" 是解碼呈現提示，不等於絕不阻塞主執行緒，也不存在因此拿到技術 SEO 滿分的說法。

正確 width、height 可讓瀏覽器提早推算比例並保留空間；CSS 仍須配合，例如響應式圖常用 max-width:100% 與 height:auto。這能減少圖片造成的位移，但字型、廣告或動態內容仍可能造成 CLS，不能保證整頁完全不跳。

CSS aspect-ratio 也能為容器保留比例，適合已知構圖的版位。它與 width、height 應符合實際圖片或裁切設計；是否改善 CLS，要看整頁測試結果，不是一加就消除全部位移。

WordPress 核心已能為適用的媒體圖片產生尺寸與響應式標記，不一定需要外掛。佈景主題、區塊與外掛可能改變輸出，仍需檢查實際 HTML；可參考WordPress 圖片優化指南。

載入順序也是 SEO：LCP 圖片、Lazy Loading 與 CDN

圖片怎麼被送出去，跟它本身的內容一樣重要。這一層有三個關鍵。

第一，確認實際 LCP 元素。若是圖片，應避免 lazy loading，並讓 HTML 能及早發現它；視情況使用 fetchpriority="high"。只有發現時機較晚等情況才評估 preload，避免所有圖都搶高優先級，改善幅度須量測。

第二，依重要性延後非關鍵圖片。首屏以下圖片通常可使用 lazy loading，並保留正確尺寸。不能讓關鍵內容必須點按或捲動後才生成可發現的 URL；詳見延遲載入的完整做法。

第三，評估 CDN 的快取與傳輸效果。內容傳遞網路可透過快取與節點分布改善傳輸，路由不一定選地理最近的節點。應比較實際命中率與載入時間，再決定設定；原理與服務選擇見CDN 完整解析，整體流程可接著看網站速度優化指南。

載入策略要讓當前畫面所需的資源及時到位，並減少不必要的傳輸。Core Web Vitals 用於排名系統，但良好分數不保證前段排名，也不能把所有效能問題歸給圖片。

結構化資料讓圖片走進 Rich Result

到目前為止談的都是「讓 Google 看懂圖」，這一段要談「讓 Google 把你的圖放進特殊版位」。這就是結構化資料的戰場。

結構化資料是用一組標準化的標記（最常見是 JSON-LD 格式），明確告訴 Google 這個頁面、這張圖屬於什麼類型。對圖片來說，最常被用到的是 ImageObject、商品頁的 Product（含 image 屬性）、食譜的 Recipe、文章的 Article。當你的標記正確，Google 才有機會把你的圖放進購物卡片、輪轉區、Rich Result 這些高點擊率的版位，細節見 Google 的圖片搜尋文件（2026 年版本）。

商品頁應依適用的 Product 或 Merchant listing 規範提供清楚、能代表商品的圖片，不是一律只能正方形，也不保證顯示購物卡片。可配合商品頁 SEO 手冊與結構化資料教學檢查內容與標記。

結構化資料可以明確描述頁面與圖片的關係，實際呈現仍由 Google 決定。可參考Entity SEO理解身分與關係，但不要把標記數量當成信心分數或引用保證。

結構化資料要發揮效果，有一個前提常被忽略：標記的內容必須跟頁面上肉眼可見的內容一致。Google 會比對你的 JSON-LD 標記和實際渲染出來的頁面，如果你標了一張圖是某個商品，但頁面上根本看不到那張圖，或圖片跟商品對不上，這個標記不但無效，還可能被判斷為欺騙。老實說，別急著堆砌一堆花俏的標記類型，先把最基本的 image 屬性填一張貨真價實、跟頁面主題完全吻合的代表圖，這件事比什麼都實在。

圖片 Sitemap：主動告訴 Google「這個站有這些圖」

圖片 sitemap 可在頁面 URL 項目內提供 image:image 與 image:loc，協助發現圖片。image:title、image:caption、image:geo_location 與 image:license 已不再是 Google 支援的圖片 sitemap 標籤；授權資訊應改看適用的結構化資料或 IPTC 規範。

圖片 sitemap 可協助補充未透過一般抓取發現的圖片，也允許 image:loc 使用其他網域如 CDN。使用 CDN 並不代表 Google 無法判斷能否索引；重點仍是可公開抓取、格式與頁面脈絡。整體流程可看Sitemap 教學。

如果你的圖片是靠 JavaScript 渲染的，這裡要特別小心。Google 雖然能執行 JavaScript 來發現圖片，但它的渲染排程是異步且資源有限的，重要圖片最好還是用標準 <img> 標籤直接寫進 HTML，而不是全靠 JS 動態注入，原則見 Google 的 JavaScript SEO 基礎說明（2026 年版本）。JavaScript 對 SEO 的整體影響，可以進一步讀 JavaScript SEO 介紹。

AI 搜尋時代的圖片新戰場：Google Lens 與視覺搜尋

生成式搜尋讓圖片的可發現性、圖文脈絡與來源資訊更值得檢查，接下來整理可實際控制的項目與限制。

傳統的圖片 SEO，目標是「在 Google 圖片搜尋排前面」。但搜尋行為正在質變。越來越多使用者不再打字，而是直接用 Google Lens 拍一張照、或上傳一張圖，讓 AI 告訴他這是什麼、哪裡買、怎麼做。這種「以圖搜尋」的流量，本質上是把圖片從「被動被找到」翻轉成「主動觸發搜尋」，背後的完整運作機制與優化對策可以進一步讀 視覺搜尋與 Google Lens。

針對視覺與 AI 搜尋，可以先檢查下列項目；它們不是保證引用的新資格清單：

1. 選擇相關且能代表內容的圖。原創圖可能更能解釋特定案例，但沒有公開數字能保證其 AI 引用率高於圖庫圖。
2. 維持圖片與文字一致。讓段落說明圖像在此處的用途，讀者可核對資料與步驟；這也符合搜尋意圖解析的內容原則，不代表已知 AI 選圖內部公式。
3. 提供可查證的來源與授權。保留作品來源、頁面資訊和適用標記，有助讀者確認來由。圖片 sitemap 不保證 AI 加上出處或帶來高品質流量；延伸見AEO 優化指南。

圖片可用來呈現產品外觀、流程或資料關係，是否值得長期維護應看內容用途與實際成效。不能承諾一張原創圖未來幾年持續被 AI 引用，或價值必然複利。

檢索與生成有多種實作，不能假定每個 AI 服務都採用相同的圖片選擇流程。可用Retrieval（檢索）的運作理解概念，但 Google 公開的網站要求仍以可索引、預覽資格與一般 SEO 基本功為準。

準確的標題、圖說與標記可以減少資訊矛盾；增加欄位不等於提高某個已知 AI 信心分數。與生成式引擎優化（GEO）一起評估時，應記錄實際呈現與引用，不把推測寫成保證。

WordPress 網站的圖片 SEO 系統化做法

WordPress 可把圖片上傳、尺寸產生與正文編輯整合成固定流程。仍應依主機與外掛功能驗收，不必用市場占有率推論某個網站的優化效果。

一個系統化的 WordPress 圖片 SEO 流程，可以切成四塊：

• 先整理用途、尺寸與格式。保留原始檔，網站提供實際需要的衍生版本；比較畫質與位元大小後選格式，不強制所有圖片轉成 WebP。
• 需要時使用外掛自動化。壓縮、格式轉換與 CDN 可能有不同方案和主機需求；啟用前核對目前功能與可回復方式。相關操作可參考Smush 完整教學。
• 檢查載入方式與快取。非關鍵圖片可延遲載入，已確認的 LCP 圖片則應避免 lazy loading。WordPress、佈景主題與外掛都可能影響輸出，請檢查最終 HTML 並量測；快取工具可參考快取外掛推薦。
• 在媒體與文章中編輯 alt，另核對結構化資料。Alt 可以由 WordPress 媒體或區塊欄位管理，不必依賴 SEO 外掛；插入既有文章後仍需確認實際值。標記工具可參考Rank Math 教學與Yoast vs Rank Math。

把這四塊串起來，WordPress 站的圖片優化就能從「每次手動」變成「一套固定流程」。這也是 WordPress 站相對自架站的一個實質優勢：生態成熟、可重複、可交接。整體的 WordPress SEO 系統化建議，可以再延伸讀 WordPress SEO 全攻略。

WordPress 6.4 起的新安裝預設停用附件頁，既有網站升級則保留原設定；停用時附件頁導向媒體檔，而非一律導向母文章。附件頁也不等於 /wp-content/uploads/ 下的實際檔案。是否停用須看頁面用途，不能把所有附件頁都當成無價值；大型站可再評估爬取預算優化。

圖片 SEO 常見錯誤 vs 正確做法對照表

觀察許多網站的圖片優化會發現，有些錯誤反覆出現，而且常常是「以為做對了其實做反了」。下面這張對照表把最常見的幾個收攏在一起，你可以拿來檢視自己網站的現況。

表格裡最後一項特別值得提醒。很多人改版時把舊圖刪掉、換上新路徑，卻忘了那些舊圖可能已經被別人引用、被 Google 圖片收錄。一旦舊路徑 404，等於把已經累積的圖片連結資產丟進垃圾桶。重要的圖片換路徑時，請比照網頁換網址的邏輯，用 301 轉址把舊路徑指到新圖。轉址的完整觀念可以對照 301 與 302 轉址教學，而網址層級的重複內容處理則可以看 Canonical URL 指南，兩者是同一套「保留資產、避免流失」的思維。

怎麼驗證自己做對了：GSC 圖片報表與速度檢測

優化做完不算數，要能驗證。圖片 SEO 的驗證分兩條線：收錄與曝光、速度與體驗。

圖片搜尋表現可看 Search Console。成效報表的圖片搜尋類型提供查詢、曝光、點擊等資料，通常按承載頁面歸屬，不是逐張圖的完整索引或轉換報告。高曝光低點擊還可能受查詢與版型影響，不能直接怪 alt；操作見GSC 教學。

速度與體驗可用 PageSpeed Insights 與 Lighthouse 檢查。LCP 元素可能是圖片，也可能是文字區塊；先確認實際元素，再檢查相關資源大小、載入時機與渲染延遲。可用 網站速度測試工具 在優化前後以相近條件測試，並分開判讀實驗室結果與實際使用者資料。

圖片流量下降時，可用網址檢查查看承載頁的索引、抓取與渲染內容，再核對 img src、圖檔回應和 robots 設定。網址檢查不是每張圖是否已建立圖片索引的直接報告；相關排查屬於技術性 SEO。

一份今天就能動工的圖片 SEO 行動清單

讀完一堆觀念，最重要的是踏出第一步。下面把整套圖片 SEO 濃縮成一份由淺入深的行動清單，照著走就行：

1. 按用途盤點圖片。先檢查重要頁面是否有缺失 alt、資訊不清或檔案過大的圖片；空 alt 可能是正確的裝飾圖設定，不能自動全部補字。
2. 建立畫質驗收流程。保留原圖、產生合適尺寸，按照片或圖表比較格式與品質；不必全站套同一參數。
3. 核對檔名與替代文字。新檔名簡短具描述性；alt 按內容或功能填寫，不強迫完整句子或關鍵字。
4. 確認 LCP 圖的載入方式。避免延遲載入，必要時提高優先級，修改前後用相同條件量測。
5. 補上圖片 Sitemap 與關鍵頁面的結構化資料。商品頁優先補 Product 標記的 image 欄位，文章頁補 Article。
6. 每個月看一次 GSC 圖片報表。追蹤曝光與點擊變化，找出表現好的圖反推它做對了什麼，再把那個模式套到其他圖。

圖片應隨正文與產品資訊維護，重要圖像改動後也要重新驗收 alt、尺寸和來源。這可以改善資訊與使用體驗，但沒有未來會自動累積流量的保證。

Google 同時使用視覺分析和頁面資訊。製作時先照顧讀者需要，再確認圖片可以發現、載入與理解；網站規模、主機與素材限制不同，維護成本也不能一概說成不花錢。

走完上面的清單，可以減少常見的圖片發現、語意、尺寸與載入問題；最終仍要用 Search Console、PageSpeed Insights 與實際裝置測試結果驗證。