圖片 SEO 完整指南，alt、檔名、WebP、lazy load 與 CLS 一次搞定

本文重點

• 捨棄中文與流水號檔名，改用連字號分隔的英文小寫關鍵字，避免 URL 編碼錯誤導致 404 破圖。
• alt 文字需控制在 125 字元內並精準描述畫面，裝飾性圖片直接留空屬性，嚴禁堆疊關鍵字。
• WebP 是兼顧畫質與效能的最佳選擇，體積比 JPEG 小 30%，且已獲 99% 主流瀏覽器支援。
• 圖片未標尺寸將導致 CLS 扣分，應使用 srcset 提供響應式大小，有效縮短 LCP 載入時間。

文章的圖片不僅能讓內容更生動，更是獲取額外搜尋流量的重要管道。做好圖片 SEO 可以幫助搜尋引擎正確理解圖片內容，並大幅提升網頁的載入速度與使用者體驗。這篇文章將帶你從檔名命名、格式挑選到效能最佳化，一步步掌握圖片最佳化的核心技巧。

一、圖片 SEO 的核心概念與一般 SEO 的差異

圖片 SEO 的核心在於將視覺內容轉化為搜尋引擎能夠理解的文字與程式碼，同時確保圖片不會拖慢網頁載入速度。這與一般專注於文字內容與網站架構的 what-is-seo 略有不同。

對人類讀者來說，一眼就能看出圖片裡是一隻正在睡覺的橘貓；但對 Google 爬蟲（Crawler）而言，它只能看到一堆像素與程式碼。因此，我們必須透過檔名、替代文字（alt text）、周圍的內文以及結構化資料，來「翻譯」這張圖片的意義。此外，圖片通常是網頁中佔用頻寬最大的元素，如何平衡畫質與檔案大小，直接關係到網站的 Core Web Vitals（網站核心指標）表現。

二、在按下儲存前決定好檔名與資料夾結構

檔名與資料夾路徑是 Google 判斷圖片主題的第一個線索，在圖片上傳到網站之前，就應該先做好規劃。

（一）用關鍵字描述檔名並避免無意義流水號

根據 Google 官方 Search Central 文件，檔名會為圖片提供關於主題的線索。直接使用描述性的英文單字並以連字號（hyphen）分隔，是最友善的命名方式。

• 錯誤示範：IMG_2345.jpg、screenshot-2023-10-01.png（毫無語意）
• 錯誤示範：apple_pie_recipe.jpg（底線不利於搜尋引擎斷詞）
• 正確示範：apple-pie-recipe.jpg、iphone-15-pro-titanium.jpg

（二）資料夾結構與 CDN 路徑的權衡

圖片的 URL 路徑同樣具有語意價值。將圖片分類存放在有邏輯的資料夾中，比全部丟進同一個根目錄更好。例如 /images/recipes/apple-pie/ 會比 /wp-content/uploads/2023/10/ 提供更多上下文資訊。

如果網站有使用 CDN（內容傳遞網路），建議設定自訂網域（如 cdn.yourdomain.com）來發布圖片。這樣即使未來更換 CDN 服務商，圖片 URL 也能保持不變，避免長期累積的圖片 SEO 權重流失。

（三）中文檔名與 URL encoding 容易踩到的雷

強烈建議新手避免使用中文命名圖片檔案。當中文檔名上傳到伺服器後，通常會經過 URL encoding（網址編碼），變成一長串如 %E8%98%8B%E6%9E%9C%E6%B4%BE.jpg 的亂碼。

這不僅讓檔名變得極長、難以閱讀，在進行網站搬家或更換伺服器環境時，也非常容易因為編碼解析錯誤而導致圖片破圖（404 Not Found）。統一使用小寫英文與數字是最安全的做法。

三、alt 文字的真實作用與自然寫法

alt 屬性（Alternative Text，替代文字）的設計初衷是為了無障礙網頁（Accessibility），讓使用螢幕閱讀器的視障人士能聽懂圖片內容，同時也是搜尋引擎理解圖片最重要的文字來源。

（一）資訊圖與文中插圖等不同情境的寫法

到底 alt 文字怎麼寫才自然？核心原則是「閉上眼睛，如果有人把這段字唸給你聽，你能否想像出圖片的畫面」。

• 資訊圖表（Infographic）：需要詳細說明圖表傳達的結論。例如：「2023 年台灣智慧型手機市佔率圓餅圖，蘋果以 45% 居冠，三星 30% 居次」。
• 文中插圖：描述具體動作或物件。例如：「一隻戴著紅色項圈的橘貓躺在沙發上睡覺」。
• 商品圖片：包含品牌、型號與特徵。例如：「Nike Air Force 1 白色運動鞋側面特寫」。

（二）拿捏 alt 長度與避免關鍵字填充

螢幕閱讀器通常會在讀取到 125 個字元時暫停，因此建議將 alt 文字控制在這個長度內。

許多新手會誤以為 alt 是塞關鍵字的好地方，寫出如 alt="蘋果派, 蘋果派食譜, 好吃蘋果派, 怎麼做蘋果派" 這樣的內容。這種關鍵字填充（Keyword Stuffing）不僅對使用者毫無幫助，還可能被 Google 視為垃圾內容而遭到演算法懲罰。

（三）裝飾性圖片留空 alt 屬性與使用 aria-hidden 的時機

並非所有圖片都需要寫 alt 文字。如果是用來分隔段落的線條、背景圖案或純粹為了美觀而存在的裝飾性圖片，應該直接使用 alt=""（保留屬性但內容留空）。

這樣做可以明確告訴螢幕閱讀器與爬蟲「請忽略這張圖片」。在更嚴謹的無障礙設計中，也可以加上 aria-hidden="true" 屬性，確保輔助技術完全跳過該元素。

四、JPEG、PNG、WebP 與 AVIF 檔案格式挑選指南

選擇正確的圖片格式，可以在不犧牲肉眼可見畫質的前提下，大幅縮減檔案大小。

（一）四大圖片格式的壓縮率與相容性對照

格式	特性與最佳用途	壓縮效率	瀏覽器支援度
JPEG	適合色彩豐富的照片、漸層複雜的圖片	普通	100%
PNG	適合需要透明背景、文字圖、簡單線條圖	較差（檔案較大）	100%
WebP	現代網頁標準，同時支援透明度與高壓縮率	優異（比 JPEG 小 25-30%）	> 99%
AVIF	次世代格式，壓縮率極致	極佳（比 WebP 更小 20-30%）	約 93%

（二）WebP 安全選擇與 AVIF 的發展進度

對於目前的網站環境，WebP 是兼顧效能與相容性的最安全選擇。它幾乎被所有主流瀏覽器支援，且能有效取代 JPEG 與 PNG。

AVIF 雖然能提供更驚人的壓縮率，特別是在低位元率下依然能保持清晰，但目前仍有少數舊版瀏覽器不支援。如果要使用 AVIF，建議透過 HTML 的 <picture> 標籤設定 fallback（備用方案），讓不支援的瀏覽器能自動降級讀取 WebP 或 JPEG。

（三）SVG 的適用範圍與 inline 寫法取捨

SVG（可縮放向量圖形）是透過數學公式繪製的圖片，無論放大多少倍都不會失真，非常適合用於 Logo、Icon 與簡單的 UI 元素。

使用 SVG 時有兩種載入方式：

1. Inline SVG（直接寫入 HTML）：省去了一次 HTTP 請求，適合檔案極小、首屏需要立刻顯示的 Icon。
2. File SVG（透過 <img> 載入）：可以被瀏覽器快取（Cache），適合在多個頁面重複出現的 Logo 或大型向量圖。

五、讓 LCP 與 CLS 指標都漂亮的圖片大小與壓縮技巧

圖片往往是網頁中最大的元素，直接決定了 LCP（最大內容繪製）的載入時間；而未標示尺寸的圖片則會導致 CLS（累計版面配置轉移），兩者都是影響 SEO 表現的關鍵指標。

（一）響應式圖片三件套 srcset、sizes 與 picture

讓手機用戶下載桌機版尺寸的大圖是極度浪費頻寬的行為。透過 HTML 的 srcset 與 sizes 屬性，我們可以提供多種尺寸的圖片讓瀏覽器自動挑選：

<img src="cat-800w.jpg" 
     srcset="cat-400w.jpg 400w, cat-800w.jpg 800w, cat-1200w.jpg 1200w" 
     sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px" 
     alt="橘貓睡覺">

這組程式碼會告訴瀏覽器每張圖片的真實寬度，並根據使用者當前的螢幕大小，下載最適合的尺寸。

（二）TinyPNG 與 Squoosh 等實用圖片壓縮工具

在上傳圖片前進行圖片壓縮是不可省略的步驟。

• TinyPNG：最經典的無損/微損壓縮工具，適合快速批次處理 PNG 與 JPEG。
• Squoosh.app：由 Google 開發的網頁版工具，提供極度細緻的壓縮參數調整，並能即時預覽 WebP 與 AVIF 的轉檔效果。
• CDN 自動轉檔：如 Cloudflare 或 ImageKit 等服務，能根據使用者的瀏覽器自動將圖片即時轉換為 WebP 或 AVIF 並壓縮，是大型網站的首選。

（三）封面圖尺寸與檔案大小上限建議

為了確保社群分享與 Google 探索（Google Discover）的抓取效果，文章封面圖（OG Image）建議採用 1200 x 630 像素的解析度。

在檔案大小方面，一般內文插圖應盡量控制在 100KB 以下；而需要高解析度的滿版封面圖，也應透過壓縮技術限制在 200KB 至 300KB 以內，避免拖慢首屏載入速度。

六、Lazy loading 與 Core Web Vitals 的互動關係

Lazy loading（延遲載入）能讓瀏覽器優先下載首屏畫面需要的資源，等到使用者往下捲動時，才載入螢幕外的圖片。這是提升網頁初始載入速度的強大武器，但用錯地方反而會傷害 SEO。

（一）正確撰寫 loading=“lazy” 屬性

現代瀏覽器已經原生支援延遲載入，不再需要依賴複雜的 JavaScript 套件。只要在 <img> 標籤中加入 loading="lazy" 即可實現 lazy loading SEO 的最佳化：

<img src="image.webp" alt="描述文字" loading="lazy" width="800" height="600">

（二）首屏圖片不應該使用 lazy load 的原因

絕對不要對首屏（Above the fold）的圖片使用延遲載入。

如果文章的封面圖或網站的 Hero Banner 被加上了 loading="lazy"，瀏覽器會刻意延後下載這張圖片，導致 LCP 指標大幅惡化。首屏圖片應該使用預設的 loading="eager"（或完全不寫 loading 屬性），甚至可以使用 <link rel="preload"> 來提示瀏覽器優先下載。

（三）寫死寬高或使用 aspect-ratio 預防 CLS

當圖片延遲載入時，如果瀏覽器不知道圖片的長寬比例，在圖片載入完成的瞬間會把下方的文字突然往下推，造成嚴重的 CLS（累計版面配置轉移）。

預防方法非常簡單：永遠在 <img> 標籤中寫死 width 與 height 屬性。現代瀏覽器會自動根據這兩個數值計算出圖片的長寬比（aspect-ratio），並在圖片下載前就先預留好正確的空白區塊，確保版面穩如泰山。

七、利用結構化資料與圖片 sitemap 攻佔 Google 圖片搜尋

除了網頁內容，主動向 Google 提交圖片資訊，能顯著提升在 Google 圖片搜尋中曝光的機率。

（一）ImageObject 結構化資料的常見欄位

透過 JSON-LD 格式加入 ImageObject 結構化資料，可以明確定義圖片的版權與作者資訊。根據 Schema.org 與 Google 規範，常見的實用欄位包含：

• contentUrl：圖片的實際網址。
• creator：圖片的創作者或攝影師。
• creditText：圖片的歸屬說明。
• license：授權條款的網址，這能讓你的圖片在 Google 圖片搜尋的「授權詳細資料」標籤中顯示出來。 設定細節可參考 schema-jsonld-templates。

（二）圖片 sitemap 的寫法與提交位置

對於高度依賴視覺內容的網站（如攝影圖庫、電商平台），建立專屬的圖片 sitemap 是加速收錄的關鍵。你可以在現有的 XML sitemap 中加入 <image:image> 與 <image:loc> 標籤，將圖片網址與所在網頁關聯起來。

完成後，直接在 Google Search Console 中提交該 sitemap 即可。詳細提交流程可參閱 sitemap-implementation-gsc。

（三）OG image 與內文圖片的抓取優先順序

Google 爬蟲在解析網頁時，會同時抓取 HTML 內的 <img> 標籤以及 <meta property="og:image"> 標籤。通常 OG image 會被優先視為該網頁最具代表性的縮圖，因此確保 OG image 的畫質、尺寸正確，且內容與文章主題高度相關，對於提升搜尋結果的點擊率（CTR）有直接幫助。

八、FAQ

（一）Q1: 改 alt 後多久會反映到 Google 圖片搜尋

根據 Google 爬蟲的運作機制，修改 alt 文字後，必須等待 Googlebot 重新爬取該網頁並更新索引。這個過程可能需要幾天到幾週不等，取決於網站整體的爬取預算（Crawl Budget）與網頁更新頻率。你可以透過 Google Search Console 主動要求重新建立索引來加速這個過程。

（二）Q2: Hotlink protection 跟圖片 SEO 有衝突嗎

Hotlink protection（防盜鏈）主要是防止其他網站直接使用你的圖片 URL，以節省伺服器頻寬。這項設定通常不會影響圖片 SEO，前提是你的防盜鏈規則必須將 Googlebot（包含 Googlebot-Image）加入白名單，否則 Google 將無法抓取並索引你的圖片。

（三）Q3: AI 生成圖片要在 alt 標註嗎

alt 文字的目的是描述圖片內容，無論圖片是手繪、攝影還是 AI 生成，都應該客觀描述畫面。不過，根據 Google 針對 AI 內容的指引，為了維持良好的使用者體驗與透明度，建議可以在圖片下方的圖說（Caption）或內文中，適度標示該圖片為 AI 生成。

（四）Q4: 圖片放 CDN 跟主網域哪個比較好

使用 CDN 絕對比較好，因為它能大幅提升圖片在全球各地的載入速度。但在 SEO 實務上，強烈建議將 CDN 綁定在主網域的子網域下（如 images.yourdomain.com），而不是使用 CDN 服務商提供的預設網址。這樣可以確保圖片累積的權重都歸屬於你的主網域。

（五）Q5: 封面圖跟內文圖的 SEO 待遇有差嗎

有差異。封面圖（通常也是 OG image 與結構化資料中標示的代表圖）會被搜尋引擎視為網頁的核心視覺摘要，更有機會出現在 Google 探索（Discover）或搜尋結果的縮圖預覽中。而內文圖則更多是作為輔助上下文理解、提升網頁豐富度的角色。兩者都需要做好最佳化，但封面圖的影響力通常更為顯著。