秋季商品圖檔路徑殘留舊季目錄：破圖排查流程

作者：平白設計編輯部｜發布與最後查證：2026-10-04｜適用：台灣（中華民國）｜技術資訊，不保證搜尋排名

九月底中秋禮盒銷售期結束，十月初網站陸續換上秋季旅遊、乾燥花藝或新菜單素材。若圖片管理習慣按月份或檔期分資料夾，舊資料夾一經移除，仍在使用的共用素材如品牌 Logo 或通用背景就會變成 404 破圖。本文說明如何盤點資源路徑並統一存放規則，避免版面出現缺漏。此為技術檢查流程，不保證搜尋引擎收錄或排名表現。

文章重點

• 中秋禮盒下架後，舊季節資料夾常被整批刪除導致破圖。
• 跨檔期共用的靜態資源應移至不分季節的固定目錄。
• 使用 Chrome DevTools Network 面板過濾 Img 類型排查。
• 季節限定素材需在活動下架時同步清理頁面引用。

換季上架為何會出現破圖

每年九月底到十月初是網站內容替換的高峰期。中秋禮盒相關頁面下架後，緊接著要放上秋季旅遊行程、乾燥花藝作品或餐廳新菜單。這些變動通常伴隨著大量圖片更新，若檔案管理不夠嚴謹，很容易在切換過程中留下未處理的殘留路徑。

許多團隊習慣依照月份或行銷檔期建立專屬資料夾來存放圖片。當中秋活動結束，整個九月資料夾被直接刪除時，裡面可能還包含其他頁面仍在引用的通用素材。這類共用資源一旦失去來源路徑，瀏覽器就會回傳 404 狀態碼，造成版面破圖。

破圖不僅影響視覺呈現，也會讓使用者對網站的維護品質產生疑慮。尤其在剛換上新主題素材的階段，訪客若看到缺漏的圖片區塊，可能會直接離開頁面。因此，每次換季上架前都應該先確認舊有路徑是否仍被依賴，再決定能否安全移除。

用 DevTools 快速定位 404 圖片

排查破圖最直接的工具就是 Chrome 內建的開發者工具。打開 Chrome DevTools 後切換到 Network 面板，在過濾條件中選擇 Img 類型，這樣就能把請求清單縮小到只顯示圖片資源，排除樣式表或腳本的干擾，讓排查過程更聚焦且有效率。

設定好過濾條件後，重新整理當前頁面。觀察 Network 面板中每一筆圖片請求的狀態碼，特別留意標示為 404 的項目。這些就是瀏覽器找不到對應檔案的破圖來源。點擊該筆請求可以查看完整的 Request URL，確認它指向哪個已失效的目錄。

建議逐頁檢查主要版面，尤其是首頁、產品列表與文章內頁。如果網站規模較大，也可以搭配批次爬取工具產出全站圖片請求報告。不過手動透過 DevTools 抽樣仍是驗證特定頁面最可靠的方式，這跟 改版後 favicon 路徑怎麼抽樣 的檢查邏輯相通。

{
  "commonAssets": "/assets/common/",
  "seasonalBase": "/campaigns/",
  "currentSeason": "2026-fall",
  "checkTargets": ["logo", "bg", "og-image"],
  "cleanupOnEnd": true
}

區分共用資源與季節限定素材

要避免換季時反覆出現破圖，關鍵在於建立清晰的檔案分類規則。將圖片分為「跨檔期共用」與「季節限定」兩大類。共用資源包括品牌 Logo、通用背景圖、社群分享預設圖等；季節限定則是中秋禮盒照片、秋季特調飲品圖等只在特定檔期使用的素材。

共用資源必須存放在不分季節的固定目錄中，例如統一的 /assets/common/ 或 /images/shared/ 路徑。這樣無論哪一個活動資料夾被刪除，都不會影響到這些基礎素材的載入。這個原則同樣適用於其他靜態檔案，就像 改版後 web manifest 怎麼抽樣 時也需確認路徑穩定性。

季節限定素材則可以繼續放在帶有時間標記的資料夾內，但必須在活動下架時同步清理所有引用這些圖片的頁面。若只是刪除資料夾而沒有移除 HTML 中的 img 標籤或 CSS 裡的 background-image，瀏覽器仍會發出無效請求，徒增伺服器負擔與錯誤紀錄。

修正路徑後的驗證步驟

完成路徑調整後，需要再次透過 DevTools Network 面板確認所有圖片請求都回傳 200 或 304 狀態碼。清除瀏覽器快取後重新整理頁面，確保看到的不是本機暫存的舊結果。這一步驟能驗證新的存放規則是否正確生效，以及是否有遺漏的引用未被更新。

除了手動檢查，也可以利用網站健康度檢測工具掃描全站，找出隱藏在較深層頁面中的破圖連結。有些圖片可能只在特定條件下才會載入，例如輪播圖的第二張以後或手機版專屬的裁切版本。全面掃描能補足人工抽樣可能遺漏的死角。

驗證過程中若發現部分圖片雖然路徑正確但仍無法顯示，需進一步檢查檔案權限或副檔名大小寫是否一致。Linux 伺服器對大小寫敏感，IMG.JPG 與 img.jpg 會被視為不同檔案。這類細節往往是在本地端開發時正常，部署後才暴露出來的問題。

建立長期可維護的圖片管理流程

單次修復破圖只能解決眼前的問題，若要從根本降低換季時的維護成本，需要建立標準化的圖片管理流程。在新素材上傳前就明確指定存放位置，並在內部文件中記錄哪些屬於共用資源、哪些屬於限時素材，讓團隊成員都能遵循同一套規則操作。

定期排程檢視伺服器上的圖片目錄，清理已經超過使用期限且不再被任何頁面引用的孤立檔案。這不僅能釋放儲存空間，也能減少未來誤刪活躍資源的風險。清理前先透過日誌分析確認該路徑近期無任何請求紀錄，再執行刪除動作。

將圖片路徑檢查納入每次網站改版或大型更新的驗收清單中。如同檢查 改版後 og:locale 怎麼抽樣 一樣，圖片有效性也應成為標準化測試項目之一。制度化的流程比依賴個人記憶更能確保網站長期穩定運作。

常見問題

為什麼刪除舊資料夾後其他頁面也會破圖？

因為不同頁面可能共用同一個資料夾內的素材。若未事先將共用資源移出，刪除資料夾時會一併移除其他頁面仍在引用的圖片，導致 404 錯誤。

DevTools Network 面板看不到圖片請求是什麼原因？

可能是快取導致瀏覽器未重新發出請求。請勾選 Disable cache 選項或使用強制重新整理，確保能看到最新的網路請求狀態。

季節限定素材下架後可以直接刪除嗎？

可以刪除，但必須先確認所有引用該素材的頁面都已移除對應的 img 標籤或 CSS 背景設定，否則會留下無效請求紀錄。

共用資源應該放在哪裡比較安全？

建議放在不含日期或檔期名稱的固定目錄中，例如 /assets/common/，這樣無論哪個活動結束都不會影響到這些基礎檔案的路徑。

重點摘要

1. 換季時舊資料夾刪除易導致共用圖片變成 404 破圖。
2. 用 Chrome DevTools Network 面板過濾 Img 快速排查。
3. 共用資源應移至不分季節的固定目錄統一管理。
4. 季節限定素材下架時須同步清理所有頁面引用。

延伸閱讀

• 改版後 favicon 路徑怎麼抽樣
• 改版後 og:locale 怎麼抽樣
• 改版後 web manifest 怎麼抽樣