如何撰寫有助於 SEO 與無障礙的圖片檔名

圖片檔名很重要，但沒有許多人宣稱的那麼重要

圖片檔名是那些容易被過度篤定解讀的網頁小細節之一。有些團隊完全忽略它們，直接發布 IMG_7421.jpg。另一些團隊則把每張產品照片都變成一篇迷你關鍵字作文。

有用的中間路線很簡單：撰寫能清楚描述圖片、幫助人員管理素材，並給搜尋引擎一點額外脈絡的檔名。不要期待檔名能拯救薄弱內容、缺少 alt 文字、載入緩慢的圖片，或令人困惑的頁面。

Google 明確建議圖片使用簡短、具描述性的檔名。這是好的建議，但也是有限的建議。檔名只是眾多脈絡線索之一：周圍文字、頁面標題、結構化資料、圖片說明、alt 文字、連結、圖片品質，以及圖片是否真的對頁面有用。

無障礙也是類似情況。好的檔名不能取代 alt 文字。但它可以在出錯時降低傷害，也讓編輯、開發者，以及下載、儲存或分享檔案的使用者更輕鬆。

簡短規則

使用能回答這個問題的檔名：

如果某人只看到檔名，是否能大致知道圖片包含什麼？

良好：

• red-running-shoes-side-view.jpg
• checkout-error-message-mobile.png
• oak-dining-table-120cm-walnut.jpg
• team-planning-workshop-whiteboard.webp

不佳：

• IMG_7421.jpg
• final-final-v3-new.jpg
• best-cheap-running-shoes-buy-online-discount-sale.jpg
• screenshot.png

目標不是寫詩。目標是有用且具體。

好的圖片檔名對 SEO 有什麼幫助

好的檔名有助於搜尋引擎理解圖片，特別是在圖片搜尋的情境中。它可以強化頁面主題與視覺內容的主體。

但和基本要素相比，它是一個較弱的訊號：

• 圖片出現在相關頁面上。
• 周圍文案解釋或支援該圖片。
• 必要時，圖片有適當的 alt 文字。
• 圖片可被爬取並建立索引。
• 檔案沒有不必要地過大。
• 頁面能可靠載入。

如果你正在為自然搜尋修正圖片，請先從頁面相關性與實用性開始。接著整理檔名。然後再視情況檢查壓縮、格式、尺寸、延遲載入，以及結構化資料。如果你的命名整理逐漸擴展成更全面的圖片效能改善，我們的 2026 年圖片格式指南會是有用的參考。

好的圖片檔名對無障礙有什麼幫助

嚴格來說，檔名不是圖片無障礙的主要機制。alt 文字才是。

如果圖片傳達資訊，alt 屬性應提供文字替代內容。如果圖片只是裝飾，alt 屬性通常應為空：alt=""。如果圖片是連結或按鈕，替代文字應描述動作或目的地，而不只是描述像素。

我們已在2026 年圖片 alt 文字實務指南中詳細說明，並且值得把 alt 文字視為一項獨立的編輯任務。

那麼，為什麼還要在無障礙方面關心檔名？

因為檔名經常出現在體驗的邊緣：

• 某些輔助科技與瀏覽器組合可能會在缺少 alt 文字時揭露檔名。
• 下載後的圖片離開網頁後，也需要可理解的名稱。
• CMS 媒體庫若名稱具描述性，會更容易稽核。
• 檔案命名清楚時，編輯較不容易附加錯誤圖片。
• 圖片損壞與除錯檢視會更容易判讀。

檔名不會讓一張不無障礙的圖片變得無障礙。但糟糕的檔名會讓失敗情況更令人困惑。

實用命名慣例

使用這個預設模式：

subject-detail-context.ext

範例：

• espresso-machine-steam-wand-closeup.jpg
• pricing-table-enterprise-plan-desktop.png
• garden-chair-green-metal-front-view.webp
• password-reset-email-example.png

對產品而言，稍微更結構化的版本通常更好：

brand-product-model-color-view.ext

範例：

• acme-trail-jacket-blue-front.jpg
• northline-desk-lamp-brass-side.webp
• terra-ceramic-mug-white-top-view.jpg

對編輯圖片而言：

topic-specific-scene.ext

範例：

• remote-team-video-call-laptop.jpg
• city-bike-lane-rain-evening.jpg
• developer-debugging-http-headers-terminal.png

對 UI 截圖而言：

feature-state-device.ext

範例：

• checkout-validation-error-mobile.png
• account-settings-two-factor-enabled-desktop.png
• analytics-dashboard-empty-state-tablet.png

這不是要建立僵硬的分類法，而是要移除歧義。

使用連字號、小寫與普通詞彙

對公開網頁素材，建議使用：

• 小寫字母
• 單字之間使用連字號
• 不使用空格
• 不使用底線
• 除連字號外不使用標點符號
• 除非系統要求，否則不使用特殊字元

良好：

blue-cotton-shirt-front.jpg

避免：

Blue Cotton Shirt (Front).jpg

blue_cotton_shirt_front.jpg

bluecottonshirtfront.jpg

連字號更容易閱讀、更容易複製，也被廣泛理解為 URL 中的單字分隔符。小寫也能避免本機開發、Linux 伺服器、CDN 與物件儲存之間惱人的大小寫敏感問題。

檔名要短，但不要模糊

檔名應該長到足以描述圖片，也短到仍然易讀。

通常，副檔名前 3 到 8 個單字是有用的範圍。

太模糊：

shoes.jpg

較好：

red-running-shoes-side-view.jpg

太多：

best-lightweight-red-running-shoes-for-marathon-training-side-view-discount.jpg

較好：

red-marathon-running-shoes-side-view.jpg

如果這段詞聽起來像一位焦慮行銷人寫出的搜尋查詢，那大概就太長了。

不要在圖片檔名中堆砌關鍵字

在檔名中堆砌關鍵字，通常表示頁面本身沒有做好該做的事。

不佳：

best-seo-agency-seo-services-seo-consultant-seo-company.jpg

這對使用者沒有幫助。對編輯沒有幫助。也不是認真的無障礙實務。它還會讓你的網站看起來品質較低。

使用圖片中所顯示事物的自然名稱。如果某個關鍵字因為準確描述圖片而適合使用，就使用它。如果不適合，就不要放進去。

例如，如果圖片是一張黑色皮革沙發的照片，black-leather-sofa-three-seat.jpg 沒問題。best-modern-luxury-living-room-furniture-online.jpg 不是檔名；它是一聲求救。

讓檔名符合實際圖片

這聽起來很明顯，但圖片庫會漂移。一個名為 homepage-hero-new.jpg 的檔案，最後可能顯示不同產品、不同人物，或完全不同的活動。

這會造成兩個問題。

第一，搜尋引擎與使用者會收到不一致的訊號。第二，團隊會停止信任媒體庫。

如果圖片的意義改變，發布前請重新命名。如果你的 CMS 或 CDN 讓重新命名變得困難，可以考慮內部使用穩定的素材 ID，同時在可行情況下仍產生具描述性的公開檔名。

好的內部流程可能是：

1. 上傳原始素材。
2. 如果隱私很重要，移除不必要的中繼資料。
3. 重新命名網站上使用的衍生檔。
4. 以正確尺寸與格式匯出。
5. 在 CMS 中加入 alt 文字與圖片說明。

如果照片來自使用者、員工或現場團隊，請記得檔名只是隱私曝露面之一。EXIF 資料可能包含時間戳記、相機詳細資訊與位置資訊。發布敏感圖片前，請參考我們的如何在分享照片到網路前移除 EXIF 中繼資料指南。

將檔名與 alt 文字分開看待

常見錯誤是把同一段詞同時用於檔名與 alt 文字。

有時這可以接受。但通常只是偷懶。

檔名：

red-running-shoes-side-view.jpg

產品頁上的良好 alt 文字：

Red running shoe shown from the side, with a white foam sole and black laces.

顏色選擇縮圖上的良好 alt 文字：

Red

如果圖片是裝飾性的良好 alt 文字：

alt=""

檔名用來識別素材。alt 文字則在脈絡中服務使用者。這兩件工作相關，但不相同。

為不同網站類型命名圖片

電子商務

包含產品類型、重要變體與視角。

範例：

• linen-shirt-white-front.jpg
• linen-shirt-white-back.jpg
• linen-shirt-white-collar-detail.jpg

避免加入價格、促銷或暫時性活動用語。那些變動太頻繁。

部落格與編輯網站

描述場景或概念，而不是文章標題。

良好：

designer-reviewing-mobile-layout.jpg

較不有用：

ultimate-guide-to-mobile-ux.jpg

圖片可能會被重複使用、裁切或聯播。以場景為基礎的名稱更耐久。

SaaS 與文件

依功能、狀態與平台命名截圖。

範例：

• billing-settings-payment-method-empty-state.png
• project-dashboard-filter-menu-open.png
• api-token-created-confirmation-modal.png

這會讓文件更新少痛苦很多。

在地商家

當服務、物件或地點真的可見且相關時，才使用它們。

範例：

• bakery-window-display-sourdough-loaves.jpg
• dental-clinic-reception-area-berlin.jpg
• plumber-repairing-kitchen-sink.jpg

如果圖片本身不支持，就不要把城市名稱加到每個檔案。一張扳手照片並不會因為叫做 wrench-london.jpg 就有實質意義。

圖片尺寸與版本怎麼辦？

除非你的系統需要，否則避免把尺寸放進主要描述名稱中。

較好的素材家族：

• red-running-shoes-side-view.jpg
• red-running-shoes-side-view-800w.jpg
• red-running-shoes-side-view-1600w.jpg

如果你的建置系統會自動產生響應式變體，就讓它附加寬度或雜湊。除非你喜歡未來考古，否則不要手動維護數十個檔名。

內容雜湊很適合用於快取：

red-running-shoes-side-view.a8f31c.webp

描述性部分仍然存在。雜湊則服務機器。

快速發布前檢查清單

發布圖片前，請問：

• 檔名是否以普通語言描述圖片？
• 是否為小寫並以連字號分隔？
• 是否沒有關鍵字堆砌？
• 是否避免了 new、final 或 v2 這類暫時性文字？
• alt 文字在頁面脈絡中是否合理？
• 檔案格式與大小是否適當？
• 必要時是否已移除敏感中繼資料？

如果這些問題都能回答是，檔名大概就夠好了。不要花 20 分鐘為裝飾性分隔線命名。請花 20 秒避免 DSC0038.jpg 變成永久公開 URL。

<!-- tool-cta:start -->

💡 試試這個: 使用 Case Converter 批次將檔案名稱正規化為 lowercase-kebab-case，讓你的圖片名稱在整個專案中保持一致。

<!-- tool-cta:end -->

安靜的好處：更好的團隊

圖片檔名的 SEO 價值是有限的。營運價值更大。

好的檔名讓媒體庫可搜尋。它們減少重複上傳。它們幫助設計師、開發者、行銷人員與客服團隊在不開啟六個預覽的情況下討論同一個素材。它們讓稽核更快。

這才是標準化圖片命名的真正理由。搜尋引擎受益於清晰度，人也一樣。而人通常是工作最先出問題的地方。