你的圖片可能正在拖你的後腿
大家在做 SEO 的時候，注意力通常放在文字上面——關鍵字塞了沒、Title Tag 寫了沒、內部連結做了沒。但圖片呢？很多人的做法是：找一張圖、丟上去、收工。
這種做法有兩個問題。第一，沒有優化的圖片會讓頁面變得很慢，直接影響使用者體驗和排名。第二，你白白浪費了一個流量來源——Google 圖片搜尋佔了整體搜尋流量不小的比例，但如果你的圖片連 ALT 標籤都沒寫，Google 根本不知道那張圖在講什麼，自然也不會在圖片搜尋結果裡顯示你的圖。
圖片 SEO 不難，但裡面有不少容易忽略的細節。這篇把所有該注意的事項都整理出來，你可以拿來逐項檢查。
檔案命名：第一步就不能隨便
你的圖片檔名是 IMG_20260215_143022.jpg 還是 google-ads-bidding-strategy.jpg？
Google 會看圖片的檔案名稱來理解圖片內容。一個有意義的檔名等於在跟 Google 說「這張圖是關於某某主題的」。
檔案命名的規則：
用描述性的英文名稱 不要用相機自動產生的編號、不要用中文（雖然技術上可行，但 URL 裡中文會變成一串編碼，不好看也不好管理）。
用連字號分隔
google-ads-budget-allocation.jpg 而不是 google_ads_budget_allocation.jpg 或 googleadsbudgetallocation.jpg。Google 把連字號當成文字分隔符號，底線不是。
簡潔但有意義 不需要把整篇文章標題塞進檔名，但要能看出圖片在講什麼。3-5 個英文單字是合理的長度。
不要堆疊關鍵字
seo-seo-optimization-seo-tips-seo-guide.jpg 這種做法不但沒幫助，還可能被當成垃圾資訊。
這件事做起來不花時間，但很多人就是懶得做。養成習慣，每張圖上傳前花 5 秒取個好名字。
ALT 標籤：不只是為了 SEO
ALT 標籤（替代文字）是圖片 SEO 最重要的一個元素。它有三個用途：
-
給搜尋引擎看的：Google 沒辦法像人一樣「看懂」圖片（至少目前的理解力還有限），ALT 標籤是你告訴它圖片內容的主要方式。
-
給螢幕閱讀器的：視障使用者靠螢幕閱讀器瀏覽網頁，ALT 標籤會被朗讀出來。這是基本的網頁無障礙要求。
-
圖片載入失敗時顯示：網路差或圖片掛了的時候，使用者至少能看到 ALT 文字知道那裡原本有什麼。
ALT 標籤怎麼寫才好？
描述圖片實際的內容 想像你在跟一個看不到螢幕的人描述這張圖。「一位男性牙醫正在為女性患者檢查牙齒」比「牙醫」好得多。
自然地包含關鍵字 如果圖片跟你的目標關鍵字相關，在 ALT 裡自然地提到就好。不要為了 SEO 硬塞不相關的關鍵字。
不要用「圖片的」「照片顯示」這類詞 「圖片的 Google Ads 設定畫面」——Google 知道這是一張圖片，你不用告訴它。直接寫「Google Ads 帳戶設定畫面」就好。
每張圖的 ALT 應該不一樣 不要偷懶全部用同一個 ALT。每張圖的內容不同，ALT 自然也應該不同。
裝飾性圖片用空的 ALT
如果圖片純粹是裝飾用的（像是分隔線、背景花紋），ALT 設成空字串 alt=""，讓螢幕閱讀器跳過它。
我們做過一個測試：把一個旅遊網站上 200 張沒有 ALT 的圖片全部補上描述性的 ALT 標籤，三個月後 Google 圖片搜尋帶來的流量增加了 45%。這個投入產出比相當划算。
圖片格式和壓縮：速度的關鍵
圖片通常是網頁上最大的資源。一張沒壓縮的照片可能 2-3MB，如果頁面上有五六張這種圖，光是圖片就要下載十幾 MB。
選對格式
| 格式 | 適用場景 | 特點 | |------|---------|------| | WebP | 大多數情況的首選 | 比 JPEG 小 25-35%，支援透明 | | AVIF | 追求極致壓縮 | 比 WebP 再小 20%，但瀏覽器支援度略低 | | JPEG | 照片類圖片 | 通用性最高，品質不錯 | | PNG | 需要透明背景 | 檔案較大，適合簡單圖形 | | SVG | 圖示、logo、向量圖 | 檔案超小，可無限縮放 |
2026 年了，WebP 的瀏覽器支援度已經非常好，除非你有特殊需求，否則所有照片類圖片都應該用 WebP。
壓縮工具推薦
線上工具：
- TinyPNG / TinyJPG：簡單好用，免費版夠用
- Squoosh（Google 出品）：可以即時比較壓縮前後的品質差異
建構工具整合：
- 如果你用 WordPress，安裝 ShortPixel 或 Imagify 外掛，上傳時自動壓縮
- 如果你用建構工具（Vite、Webpack），有各種 image optimization plugin
壓縮的原則 照片類圖片壓縮到品質 75-85% 通常肉眼看不出差異，但檔案大小可以減少 50% 以上。要自己檢查壓縮後的品質，不要盲目壓到最小。
Responsive Images：讓不同裝置載入適當大小的圖
一張 2400px 寬的圖片，在手機上只需要 400px 寬就夠了。但如果你沒有做 responsive images，手機也會下載那張 2400px 的大圖再縮小顯示。白白浪費流量和載入時間。
HTML 的 srcset 和 sizes 屬性可以解決這個問題：
<img
src="product-800.webp"
srcset="product-400.webp 400w,
product-800.webp 800w,
product-1200.webp 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1200px) 800px,
1200px"
alt="產品展示照片"
width="1200"
height="800"
loading="lazy"
>
瀏覽器會根據裝置螢幕寬度和解析度，自動選擇最合適的圖片版本來下載。
如果你用 CMS 或框架，大多有內建或外掛幫你自動產生不同尺寸的圖片。WordPress 預設就會產生好幾個尺寸，Next.js 有 Image 元件，Laravel 的 Spatie Media Library 也能自動處理。重點是確保這些功能有正確啟用。
延遲載入和效能最佳化
除了壓縮和 responsive images，還有幾個圖片效能的重要優化：
延遲載入（Lazy Loading）
首屏以下的圖片不要在頁面載入時就下載。用 HTML 原生的 loading="lazy" 就行了，不需要額外的 JavaScript 函式庫。
但注意：首屏的圖片不要加 lazy loading。它是使用者第一眼看到的，你希望它越快出現越好。特別是 LCP 元素（通常是主圖），加了 lazy loading 反而會拖慢 LCP 時間。
明確設定寬高
每張 <img> 都應該設定 width 和 height 屬性。這讓瀏覽器在圖片載入前就能預留空間，避免 CLS（版面位移）問題。圖片突然跳出來把文字推下去的那種體驗，就是因為沒設寬高。
使用 CDN 把圖片放在 CDN 上，讓使用者從最近的伺服器取得。這對手機使用者特別有感，因為行動網路的延遲本來就比較高。
考慮用 <picture> 元素做格式降級
如果你想用 AVIF 但擔心部分瀏覽器不支援：
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="照片描述">
</picture>
瀏覽器會從上到下選擇它支援的第一個格式。
結構化資料和圖片搜尋
如果你希望你的圖片在 Google 圖片搜尋中有更好的呈現，結構化資料可以幫忙。
ImageObject Schema 用 Schema Markup 標記你的圖片，告訴 Google 更多關於這張圖的資訊：作者、描述、建立日期、授權方式等。
產品圖片
如果你是電商，Product Schema 裡的 image 欄位特別重要。正確標記產品圖片可以讓你的產品出現在 Google Shopping 的圖片搜尋結果裡，帶有價格和可用性資訊。
文章主圖
Article Schema 裡的 image 欄位會影響文章在搜尋結果和 Google Discover 中的呈現。Google 建議文章圖片的寬度至少 1200px。
其他 Rich Result Recipe、How-to、FAQ 等結構化資料類型都有圖片欄位。正確填寫可以讓你的搜尋結果更醒目、點擊率更高。
常見錯誤和檢查清單
整理一下圖片 SEO 最常見的錯誤：
檔名用相機預設編號
DSC_0001.jpg 對 Google 來說毫無意義。
ALT 標籤全部空白或全部一樣 要嘛沒寫、要嘛全部用同一個。兩種都不行。
圖片太大沒壓縮 一張圖 3MB，手機使用者等到天荒地老。
只用一個尺寸 手機也載入桌機版的超大圖片，浪費流量。
首屏圖片加了 lazy loading 結果 LCP 爆掉，PageSpeed 分數慘不忍睹。
圖片沒設寬高 頁面載入時到處跳動，CLS 分數很差。
用圖片取代文字 把重要的文字內容做成圖片。Google 讀不到圖片裡的文字（即使 OCR 技術有進步，你也不該依賴它）。
最後附上一份快速檢查清單：
- 所有圖片的檔名都有描述性的英文名稱
- 所有內容圖片都有寫 ALT 標籤
- 裝飾性圖片使用空 ALT
- 圖片使用 WebP 或 AVIF 格式
- 圖片經過適當壓縮
- 有設定 responsive images（srcset）
- 首屏以下的圖片有 lazy loading
- 首屏圖片沒有 lazy loading
- 所有圖片都有設定 width 和 height
- 產品圖片有加入 Product Schema
- 文章主圖寬度至少 1200px
圖片 SEO 的每一個項目單獨來看都不難，但加在一起的效果很顯著。花一個下午把你網站上的圖片全部盤點一次，該壓縮的壓縮、該補 ALT 的補 ALT、該改格式的改格式。這些基本功做好了，你的頁面速度和搜尋能見度都會提升。