一張沒處理過的相機原圖，動輒三、四 MB，放進文章裡會把載入時間拖到好幾秒；而檔名還叫「IMG_2087.jpg」，Google 完全看不懂它在拍什麼。這兩件事各自打中 SEO 的不同環節——前者拖垮網頁速度與 Core Web Vitals，後者讓你的圖片在 Google 圖片搜尋裡形同隱形。

圖片 SEO 就是把這兩端一起顧好的功夫。它不只是「把圖片壓小一點」，而是一整套從檔名、替代文字、格式、尺寸到圖片 sitemap 的訊號工程，目的是讓搜尋引擎看懂每一張圖、讓使用者在最快的時間看到它，並讓這些圖片有機會在 Google 圖片搜尋這個獨立版位拿到曝光。

這篇會用 WordPress 與 WooCommerce 站長實際操作的角度，把圖片 SEO 從頭到尾走一遍：搜尋引擎到底怎麼讀圖、檔名與 alt 各自負責什麼、該選哪種格式、響應式圖片與延遲載入怎麼配速度、圖片 sitemap 與結構化資料怎麼提交，最後收進一份可以照著做的上線檢查流程。

搜尋引擎其實看不懂圖片，它靠周邊訊號猜

先講清楚一件常被誤解的事：Google 的爬蟲沒辦法像人一樣「看懂」一張 JPG 在拍什麼。雖然 Google 近年確實有影像辨識技術，但排名時它主要還是靠圖片周邊的文字訊號去推測內容，這也是整套圖片 SEO 的底層邏輯。

Google 判讀一張圖片時，會綜合這幾個來源：圖片的檔名、alt 替代文字、圖片說明（caption）、圖片周圍的段落文字，以及整個頁面的標題與主題。換句話說，你給的文字訊號愈一致、愈精準，Google 愈能把這張圖對應到正確的搜尋意圖。

這帶出一個實務原則：重要的資訊不要只放在圖片裡。很多電商會把產品規格、促銷文案直接做進圖片，結果是搜尋引擎讀不到、螢幕報讀軟體念不出來、網頁翻譯工具也處理不了。頁面標題、選單、關鍵說明文字都應該寫在 HTML 裡，圖片負責呈現，文字負責被讀懂。

圖片做好 SEO 的回報有兩個層面。一是網頁本身的速度與使用者體驗變好，間接幫助整站排名；二是圖片有機會出現在 Google 圖片搜尋這個獨立版位，等於在搜尋結果頁多搶下一個曝光位置，使用者點圖片或標題都能導回你的網站。

圖片檔名與 alt 文字各自負責什麼

檔名和 alt 是圖片 SEO 裡最常被混為一談、卻分工明確的兩個欄位。一句話分工：檔名用英文、給機器讀路徑與索引；alt 用自然描述、給機器理解內容也給看不到圖的人聽。

圖片檔名要用英文描述內容，不要保留相機亂碼

檔名會出現在圖片網址、圖片 sitemap 裡，當頁面上找不到合適的描述文字時，Google 甚至會拿檔名當圖片搜尋結果的摘要。所以「IMG_2087.jpg」「DC0001.jpg」這種相機預設檔名等於白白浪費一個訊號欄位。

正確做法是用能描述內容、以連字號分隔的英文檔名，例如把一張藍色男版運動鞋的圖命名為 blue-running-shoes-mens.webp，比 IMG_2087.jpg 好得多。幾個要點：

• 一律用英文加連字號：用 - 分隔單字（woocommerce-checkout-setting.webp），不要用底線、空格或中文。中文檔名上傳後常被伺服器轉成一串編碼，反而更難讀。
• 描述內容、不要堆關鍵字：檔名講清楚這張圖是什麼即可，硬塞 seo-image-seo-optimize-image-best.webp 這種重複關鍵字只會被當作垃圾訊號。
• 上傳前就改好：WordPress 預設不會幫你重新命名檔案，圖片網址一旦被索引就固定了，事後改檔名等於換網址，要處理重導。所以命名這一步在上傳前做最省事。

替代文字要精準描述圖片，自然帶入關鍵字

alt（alternative text，替代文字）寫在 <img> 標籤的 alt 屬性裡，當圖片載入失敗時會顯示這段文字，螢幕報讀軟體也會念出它給視障使用者聽。它同時是 Google 理解圖片內容最重要的單一欄位，也是無障礙網頁的法規要求。

寫 alt 的原則是「先把圖片如實描述清楚，再自然地把關鍵字放進去」。和檔名不同，alt 可以用中文、可以寫得比檔名長一點、更精確。

• 太空泛：alt="巧克力"
• 較理想：alt="咖啡風味的黑巧克力磚"

如果是產品圖，把產品名稱與型號寫進 alt（例如「Philips HX9911 音波電動牙刷」），使用者用型號搜圖時你才有機會出現。但同樣不要塞關鍵字——把同一個詞重複三次、或硬湊一串「白T恤，白T恤推薦，購買白T恤」，比不寫 alt 還糟，會被判定為操弄。一張圖一段自然描述，足矣。

WordPress 在媒體庫裡每張圖都有獨立的「替代文字」欄位，插入文章時也能單獨設定；WooCommerce 的商品圖、相簿圖也都吃這個欄位，上架商品時順手填掉是最省力的做法。

WebP、AVIF 還是 JPEG，圖片格式該怎麼選

直接給結論：一般網頁用途優先用 WebP，它在同等畫質下檔案明顯比 JPEG 小，而且所有主流瀏覽器都支援。需要更極致的壓縮可以考慮 AVIF，需要去背透明或向量圖示時才回頭用 PNG 或 SVG。

Google 圖片搜尋目前支援的格式有 JPEG、PNG、WebP、BMP、GIF、SVG。各格式的定位可以這樣分：

實務上，一個穩當的工作流是：用 PNG 或原圖保存母檔，輸出網頁版時轉成 WebP；攝影作品這類需要保留高細節的站，可以用 WebP 縮圖連結到高畫質 PNG 原圖。AVIF 在同一張圖上可能只有 WebP 的四分之一大小，但它對細節的抹平比較明顯，若要用，建議放進 <picture> 標籤的第一個 <source>，讓不支援的瀏覽器自動往下退回 WebP 或 JPEG。

WebP 並非萬靈丹——少數情況下它的輸出反而比原檔大，輸出後比對一下檔案大小再決定要不要採用。

壓縮與尺寸，怎麼把檔案壓小又不糊掉

圖片拖慢網頁，幾乎都出在兩件事沒做：尺寸沒裁、檔案沒壓。順序是先裁尺寸、再做壓縮，兩步分開處理效果最好。

先裁到實際顯示尺寸。 最常見的浪費，是把一張 4000 像素寬的原圖丟進一個只有 800 像素寬的版位。瀏覽器還是得下載整張大圖再縮小顯示，頻寬全浪費掉。上傳前先依版位需求把圖片裁到合理尺寸——內文大圖抓 1200 至 1600 像素寬通常就夠，縮圖區塊則裁更小。

再做壓縮。 尺寸對了之後，用壓縮工具進一步縮減檔案。壓縮服務的原理是用更聰明的演算法、並剝除使用者看不到的中介資料（例如相機 EXIF、GPS 標記），在肉眼幾乎無感的前提下把檔案壓小。線上工具如 Squoosh、TinyPNG、iLoveIMG 都能上傳後直接比對前後差異再下載。

要留意的是別壓過頭。為了追求極小檔案把畫質壓糊、或硬塞一張遠小於版位的圖再放大，都會犧牲使用者體驗，失去放圖的意義。畫質和速度是要取得平衡，不是二選一。一般內文圖片控制在數百 KB 以內、單張盡量不超過 400 KB，是不錯的起手基準。

WordPress 站可以靠外掛把這兩步自動化。常見的壓縮外掛（如 ShortPixel、TinyPNG 系列、各家 WebP 轉檔外掛）會在上傳時自動壓縮並產生 WebP 版本，省去每張手動處理。WooCommerce 商品圖數量多，這類外掛幾乎是必備。

響應式圖片與延遲載入，讓速度與排名一起到位

光是壓小檔案還不夠，真正影響行動裝置體驗與 Core Web Vitals 的，是「在對的裝置上載入對的尺寸」與「載入的時機與優先序」。這一段是多數中文教學講得最淺、卻最能拉開差距的地方。

用 srcset 與 sizes 讓手機只載小圖

響應式圖片的做法，是同一張圖準備多種尺寸，讓瀏覽器依裝置螢幕自動挑最合適的那一張載入，手機就不用下載桌機等級的大圖。實作上靠 <img> 的 srcset 與 sizes 兩個屬性：

<img src="photo-600w.webp"
     srcset="photo-300w.webp 300w, photo-600w.webp 600w, photo-1200w.webp 1200w"
     sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px"
     width="1200" height="800"
     alt="WooCommerce 結帳頁設定畫面">

srcset 列出每個尺寸版本與它的實際寬度（用 w 標示），sizes 則告訴瀏覽器在不同螢幕寬度下這張圖大概會佔多寬，瀏覽器據此挑檔。對 Retina 這類高解析螢幕，也可以改用 1x、2x、3x 的描述子。

好消息是，WordPress 上傳一張圖後會自動產生多種尺寸並自動加上 srcset——你上傳一張 1200×600 的圖，手機訪客拿到的可能是自動產生的 320 像素小圖。所以多數 WordPress 站長不必手寫這段，但理解它在背後做什麼，才知道為什麼別把上傳的原圖弄得過大、也才知道遇到主題沒處理好時該往哪查。

標好 width 與 height，避免版面跳動扣分

每個 <img> 都應該標上 width 與 height 屬性。它的作用是讓瀏覽器在圖片還沒載入前就先預留正確的空間，避免圖片載入瞬間把下方內容往下擠——這種跳動就是 Core Web Vitals 裡的 CLS（累積版面配置位移），分數差會直接影響排名評估。標好寬高，是一個成本極低、效益明確的動作。

延遲載入要避開首屏，否則反而扣分

延遲載入（lazy loading）是把使用者還沒捲動到、不在首屏的圖片延後載入，只有快進入視窗時才下載。這能縮短初始載入時間、改善 LCP（最大內容繪製），對圖片很多的長文章特別有感。做法很單純，在 <img> 加上 loading="lazy" 即可。

但有個關鍵反向操作：首屏（above the fold）的主圖絕對不要延遲載入。首圖通常就是 LCP 元素，延遲它反而拖慢最重要的那個指標。首屏主圖應該反過來提高優先序，用 fetchpriority="high"，或在 <head> 用 <link rel="preload"> 預先載入。preload 所有瀏覽器都支援，fetchpriority 則在部分瀏覽器尚未支援，可依需求選用。

簡單記：螢幕一打開就看得到的圖優先載、看不到的圖延後載。順序顛倒會把 LCP 和 FCP 一起拖差。

圖片 sitemap 與結構化資料，幫圖片被收錄、被加標記

當圖片夠多、又想認真經營圖片搜尋曝光時，圖片 sitemap 與結構化資料是把圖片「主動報給 Google」的兩個手段。前者管收錄、後者管在搜尋結果上的呈現外觀。

提交圖片 sitemap，讓爬蟲找得到每張圖

圖片 sitemap 的作用，是把網站上每張圖片的網址與資訊整理成清單交給 Google，特別是那些靠一般爬取不容易發現的圖片（例如由 JavaScript 載入的）。它的結構類似網頁的 XML sitemap，可以獨立成一份，也可以把圖片資訊併進既有的網頁 sitemap 裡，兩種都行。

WordPress 站長幾乎不必手工製作。Yoast SEO、Rank Math 這類主流 SEO 外掛產生的 XML sitemap 預設就會把圖片納入，安裝啟用後在 Google Search Console 提交 sitemap 網址即可。非 WordPress 的站，則可以用 Screaming Frog 這類工具產生 sitemap。

加結構化資料，讓符合條件的圖片帶上徽章

結構化資料是用機器可讀的格式（通常是 JSON-LD）向 Google 描述頁面內容。就圖片而言，Google 圖片搜尋目前支援三種類型的結構化資料會讓圖片在結果中帶上對應標記：產品（Product）、影片（Video）、食譜（Recipe）。

舉例來說，食譜頁加上對應結構化資料後，圖片在搜尋結果可能會多一個徽章標記，更容易被點。對 WooCommerce 商品而言，Product 結構化資料能讓商品圖在圖片搜尋帶上價格、庫存等資訊——許多 WooCommerce 與 SEO 外掛會自動輸出這段，不必手刻。電商、旅遊、餐飲這類視覺需求強的網站，最值得優先補上。

哪些內容最該優先做圖片 SEO

不是每張圖都值得花同樣力氣，把資源放在「使用者本來就會用圖片搜尋」的主題上，投報率最高。

兩類關鍵字最該留意。一是描述性關鍵字，使用者需要看到圖才能確認是不是自己要的，例如「無印風家具」「熱氣球景點」「短髮造型」這類；二是帶型號或品牌的關鍵字，像「iPhone 16 Pro」這種，使用者常用圖片去辨識特徵與外觀。電商、旅遊、餐飲、設計類網站的圖片搜尋行為特別密集，這些站的商品圖、情境圖都該逐張把檔名與 alt 補好。

判斷一個關鍵字值不值得做圖片 SEO，最簡單的方法是直接在 Google 搜這個詞，看搜尋結果頁上方有沒有跳出圖片版位。有，就代表這個查詢帶視覺意圖，值得投入。

另外提一個容易被忽略的曝光位置：Google Discover。Google 建議用於 Discover 的圖片寬度至少 1200 像素，並在 robots meta 標籤加上 max-image-preview:large，圖片才有機會以大尺寸呈現。這對內容型網站爭取 Discover 流量很有幫助，雖然 Google 不保證一定給大圖，但這個設定是站長能做的基本動作。

一張圖上線前，照這個順序走一遍

把前面的環節收成一條可以照做的流程，每次要放圖時跑一遍，圖片 SEO 就不會漏項：

• 第一步、選對的圖：優先用原創、與內容相關的圖，避免和別人撞同一張圖庫照片被當重複內容。圖片放在相關段落附近，最重要的圖放在文章前段。
• 第二步、裁尺寸：依版位把圖裁到實際顯示尺寸，內文大圖約 1200 至 1600 像素寬。
• 第三步、轉格式並壓縮：輸出成 WebP，用壓縮工具或外掛把檔案壓到數百 KB 內，壓完比對畫質。
• 第四步、命名檔案：上傳前改成英文、連字號分隔、描述內容的檔名。
• 第五步、填 alt：上傳後在媒體庫填入精準描述、自然帶關鍵字的替代文字。
• 第六步、確認技術設定：確認 <img> 有 width、height，首屏主圖不要延遲載入、非首屏的圖開啟 loading="lazy"，響應式 srcset 由 WordPress 或主題處理好。
• 第七步、提交與標記：確認 SEO 外掛的圖片 sitemap 已在 Search Console 提交；商品、影片、食譜頁補上對應結構化資料。

圖片搜尋的流量競爭，目前還遠不如一般網頁搜尋擁擠，這代表把上面這套流程做扎實的網站，相對容易在圖片版位拿到曝光。從今天起，每次往文章或商品頁放圖，就把這七步當成標準動作跑完——不必一次回頭改完整站，新放的圖先做對，舊圖再分批補，圖片 SEO 的效益會隨著內容累積慢慢長出來。