圖片 SEO 怎麼做：抓取、alt 與圖片索引（2026）

圖片 SEO 最容易被誤解成兩件小事：改個檔名、補個 alt 文字。它們當然重要，但如果你的網站連圖片本身都沒被 Google 正常發現，或者圖片落地頁的資訊太弱、懶載入把圖片藏住了、頁面又限制了縮圖預覽，那前面這些細節再認真，也未必能拿到 Google Images 的流量。

Google 當前關於圖片搜尋的官方文件，其實講得很清楚：圖片最佳化分成兩條線。第一條是讓 Google 發現並索引你的圖片，第二條是最佳化圖片所在頁面的正文和結構訊號，讓 Google 知道這張圖到底是什麼、該在什麼查詢下展示。這比單純討論 “JPEG 還是 WebP” 更靠前。

所以，這篇文章不再沿用那種把所有格式、工具、外掛一股腦攤開的寫法，而是按 Google 官方的圖片 SEO 文件、圖片站點地圖、懶載入和 robots meta 規則，給你一套更適合實操的圖片最佳化順序。

第一步：先讓 Google 真正能發現你的圖片

Google 在圖片 SEO 最佳實踐文件裡明確寫過：使用標準 HTML 圖片元素，有助於爬蟲發現和處理圖片。最關鍵的一句是：Google 可以在 <img> 元素的 src 屬性裡找到圖片，但不會索引 CSS 圖片。

這意味著，下面這類情況要特別小心：

• 重要產品圖只是 CSS background-image。
• 圖片只有 JS 執行後才動態插入，而且渲染不穩定。
• 首屏圖、輪播圖、分類圖在 HTML 裡沒有可解析的 <img src="...">。

如果你的站點依賴前端元件、視覺化搭建器或複雜主題，先確認一點：最終渲染給 Googlebot 的 HTML 裡，重要圖片是不是標準的 <img src="..."> 或 <picture> 結構。如果不是，先修這個，再談 alt、檔名和結構化資料。

第二步：圖片站點地圖不是必須，但在 3 種情況下很有用

Google 的 image sitemap 文件和 sitemap 總覽文件都給了非常明確的邊界：如果網站圖片很多、圖片透過 JavaScript 才能被訪問，或者你希望 Google 更容易發現媒體資源，那麼 image sitemap 有幫助。

更值得做 image sitemap 的場景通常包括：

• 產品圖、案例圖很多，而且更新頻繁。
• 圖片存在相簿、輪播、標籤頁、變體切換等 JS 邏輯裡。
• 同一個頁面承載多張關鍵圖片，希望 Google 更完整地知道它們的位置。

但也別把 image sitemap 神化。它的作用更接近“補發現”，不是“直接加排名”。如果你的圖片已經能被清楚抓取、頁面結構也很好，image sitemap 是增強項，不是唯一前提。

第三步：落地頁比圖片本身更重要

Google 的圖片 SEO 文件裡有一句很關鍵的話：圖片所在頁面的內容和後設資料，會強烈影響這張圖會在什麼地方、以什麼查詢出現。這意味著，圖片最佳化從來不是孤立動作。

真正更該看的，是這張圖所在頁面有沒有回答清楚：

• 這張圖展示的到底是什麼。
• 它為什麼和這篇頁面的主題相關。
• 它是主圖、示意圖、步驟圖，還是裝飾圖。
• 頁面正文裡有沒有足夠的上下文支撐這張圖。

所以，圖片最容易拿到穩定可見度的地方，通常不是孤零零的圖片庫，而是這些頁面：

• 產品頁和分類頁。
• 案例頁和專案頁。
• 教學頁、步驟頁、排查頁。
• 文章主圖和關鍵說明圖所在的內容頁。

如果圖片頁面本身內容薄弱、標題空泛、正文沒有語境，只指望“圖很清晰”就拿圖片搜尋流量，通常不現實。

第四步：檔名、alt、標題和鄰近文字，要一起看

Google 的圖片 SEO 文件把這一點講得很明確：Google 會從頁面內容、caption、image title，以及檔名和 alt 文字中提取關於圖片主題的資訊。並且文件還特別提醒：儘量把圖片放在和它相關的文字附近、放在真正和它主題相關的頁面裡。

這意味著，圖片語義最好按 4 個層次一起配合：

• 檔名：描述圖片物件，不要是 IMG_0023.jpg 這種無意義名字。
• alt 文字：描述圖片內容，幫助 Google 和無障礙訪問理解圖片。
• 鄰近文字：圖片周圍的正文、標題、小標題和說明。
• 頁面主題：整個頁面本身就是關於這張圖對應主題的。

也就是說，單獨把 alt 寫得很完美，但頁面本身主題不相關，效果仍然有限。反過來，頁面很相關，但圖片檔名、alt 和附近文字都過於空泛，也會損失理解訊號。

alt 文字最常見的兩個錯誤

• 太空。例如 “product image”“banner”“圖片1”。
• 太硬。把關鍵詞反覆堆進去，讀起來不像自然描述。

更合理的思路是：把 alt 當作一段簡潔、自然、能描述圖片內容的說明。對於產品頁，可以寫產品名加關鍵特徵加場景或規格；對於教學圖，可以寫步驟物件或介面變化，而不是泛泛地寫“示意圖”。

Google 還特別指出，如果圖片本身被用作連結，那麼 alt 文字也會像錨文字一樣幫助理解目標頁。這一點在產品卡片和圖文列表頁尤其容易被忽略。

第五步：支援的格式只是前提，真正要最佳化的是“體積 + 清晰度 + 穩定 URL”

Google 的圖片文件列出了支援的圖片格式：BMP、GIF、JPEG、PNG、WebP、SVG 和 AVIF。對實操來說，重點不是爭論哪種格式“最先進”，而是做到三件事：

• 格式確實受支援。
• 檔案體積不過大，避免拖慢頁面。
• 圖片足夠清晰，能在縮圖和點選後都看得清。

Google 在圖片文件裡也明確建議儘量使用高解析度圖片。如果你的主圖太小、太糊、裁切奇怪，即使被抓到，也不一定能在展示裡佔優。

同時，文件裡還有一個很容易被忽略的點：如果同一張圖片會在站內很多頁面反覆引用，儘量始終使用同一個 URL。這樣 Google 更容易快取和複用它，而不用多次重新請求。對大型相簿、產品變體站點和案例庫尤其重要。

第六步：響應式圖片可以用，但一定要有 src 應急

Google 的圖片 SEO 文件明確支援 <picture> 和 srcset 這類響應式圖片寫法，但同時也給了一個非常具體的建議：始終提供一個 src 屬性作為 fallback URL。原因很簡單，不是所有瀏覽器和爬蟲都完全理解這些屬性。

所以，如果你在做響應式圖片：

• 可以用 <picture>。
• 可以用 srcset。
• 但不要省略最終的 img src。

這類實現既有利於不同裝置載入合適尺寸的圖，也更穩地保留了可抓取入口。

第七步：懶載入可以用，但不能靠滾動或點選才讓 Google 看見圖

很多站把圖片效能最佳化做成了索引問題。Google 在 lazy-loading 文件裡寫得非常清楚：只要圖片進入可視區域，就應該能被載入；載入方式不能依賴使用者滾動或點選，因為 Google Search 不會像真實使用者那樣去互動頁面。

這意味著更穩的懶載入方式通常是：

• 原生瀏覽器 lazy-loading。
• IntersectionObserver。
• 在內容進入 viewport 時自動載入的 JS 庫。

需要避免的是：

• 只有滾動後才觸發圖片真正寫入 src。
• 只有點選標籤或手風琴後才出現關鍵圖片。
• 把首屏最重要的主圖也延遲得過頭。

Google 文件還特別提醒：不要給使用者一開啟頁面就應該看到的內容做激進懶載入。這不僅影響抓取，也會直接損害首屏體驗。

第八步：如果你希望更大的搜尋預覽圖，不要忽略 max-image-preview

很多團隊會去最佳化圖片尺寸和畫質，卻忘了頁面本身可能限制了預覽展示。Google 的 robots meta 規則裡寫得很明確：max-image-preview 控制的是頁面在搜尋結果裡的圖片預覽尺寸。

規則的幾個值很直白：

• none：不顯示圖片預覽。
• standard：預設預覽。
• large：允許更大的圖片預覽。

如果頁面沒有特別的版權或展示限制，一般更應該確認自己沒有錯誤地把它限制成 standard 或 none。很多新聞站、部落格站和內容站之所以拿不到更醒目的圖片預覽，問題根本不在圖片，而在這個 meta 規則上。

第九步：結構化資料不是給圖片“加權”，而是幫 Google 選對圖

Google 的圖片 SEO 文件明確說：如果你提供結構化資料，Google 可以在某些富結果和 Google Images 裡展示更豐富的圖片資訊，甚至帶 badge。但這一步的核心價值，不是“給圖片額外加分”，而是幫助 Google 更明確地理解哪張圖是頁面的代表圖。

官方文件給了幾個直接可用的訊號來源：

• primaryImageOfPage
• 主實體上的 image 屬性
• og:image

Google 同時也給了選圖建議：

• 選擇和頁面真正相關、具有代表性的圖。
• 不要只用站點 logo 充當代表圖。
• 避免極端長寬比。
• 儘量使用高解析度圖。

所以，產品頁、文章頁、案例頁如果想讓 Google 更穩定地選中正確主圖，就不該只依賴模板碰運氣。

第十步：如果你自己拍圖或賣圖，圖片後設資料也可以利用起來

Google 還有一套單獨的圖片後設資料文件，專門講 licensing 資訊。如果你的站點做原創攝影、相簿、品牌物料或可授權素材，這一步值得做。它可以讓圖片在 Google Images 裡顯示更多版權和使用資訊，並有機會拿到 Licensable badge。

對大多數普通企業站來說，這不是優先順序最高的一步；但對依賴原創圖片資產的站點，它能增加圖片層面的信任和使用說明。

更適合外貿獨立站的圖片 SEO 順序

1. 先確認關鍵產品圖和案例圖是不是標準 <img src="...">，而不是 CSS 背景圖。
2. 檢查圖片頁面是否允許抓取，且沒有被錯誤的 robots 規則攔住。
3. 給圖片所在頁面補足正文語境，而不是隻改 alt。
4. 統一檔名、alt、頁面標題和圖旁文字，讓它們說的是同一件事。
5. 如果圖片多、JS 多、相簿多，補 image sitemap。
6. 檢查懶載入是否依賴滾動或點選，必要時改成更穩的實現。
7. 確認 max-image-preview 沒把預覽圖限制死。
8. 用結構化資料或 og:image 指出真正代表頁面的主圖。

這套順序的好處是：先解決“能不能被發現”，再解決“Google 理不理解”，最後才去解決“展示效果好不好”。比一上來批次重新命名圖片、批次補 alt 更穩，也更接近實際排名鏈路。

圖片 SEO 最常見的 7 個誤區

• 覺得圖片 SEO 只等於寫 alt 文字。
• 把重要圖片做成 CSS 背景圖。
• 圖片只在 JS 互動後才出現。
• 頁面正文幾乎沒講圖片內容，只放圖不解釋。
• 懶載入依賴滾動或點選，Google 看不到。
• 圖片很多卻沒有 image sitemap，也沒有清楚內鏈。
• 頁面無意中限制了 max-image-preview，自己把預覽圖縮小了。

如果你們站同時在做技術排查、內容更新和內鏈調整，圖片 SEO 不該被單獨切出去看。它和 技術 SEO 排查、SEO 資料分析、內鏈最佳化、內容更新、網站遷移 SEO 本來就是連著的。前面幾步打通了，圖片流量才更容易穩定起來。

常見問題 FAQ

圖片檔名真的有用嗎？

有用，但不是唯一因素。Google 官方明確說檔名可以提供關於圖片主題的線索。不過它必須和頁面語境、alt 文字、周邊文字一起工作，不能指望單靠檔名拿排名。

Google 會索引 CSS 背景圖嗎？

Google 的圖片 SEO 文件明確寫過：Google 能在 <img> 的 src 裡發現圖片，但不會索引 CSS 圖片。重要視覺內容不要只放在 background-image 裡。

所有圖片都要寫 alt 嗎？

關鍵圖片都應該認真寫，尤其是產品圖、案例圖、步驟圖和被用作連結的圖片。裝飾性圖片可以視情況處理，但不要把重要圖片也當成裝飾圖略過。

image sitemap 是不是每個網站都必須做？

不是。Google 沒說它是必須項。但如果你的站點圖片很多、圖片透過 JavaScript 才能暴露出來，或者你確實很依賴 Google Images 流量，image sitemap 會更有幫助。

懶載入會不會影響圖片索引？

會，前提是你實現錯了。Google 官方明確說，載入不能依賴使用者滾動或點選，因為 Google Search 不會這樣互動頁面。正確實現後，懶載入可以兼顧效能和抓取。

真正有效的圖片 SEO，不是把一張圖單獨最佳化得多漂亮，而是讓 Google 能看見它、看懂它、知道它屬於哪個頁面、該在什麼查詢下展示它。只要這四件事裡有一件沒打通，圖片流量通常就起不來。

延伸參考：Google — Image SEO best practices。