在建立網頁內容時，多數人習慣直接上傳相機或手機預設檔名的圖片，並在內容管理系統中略過替代文字欄位。事實上，做好圖片 SEO alt 文字與檔案命名，是讓圖片在 Google 圖片搜尋中取得良好排名、為網站帶來長尾自然流量的關鍵步驟。
搜尋引擎爬蟲雖然具備電腦視覺辨識能力，但仍主要仰賴 HTML 標籤中的文字線索來判斷圖片主題。妥善設定圖片資訊不僅能協助搜尋引擎理解內容脈絡，更是網頁無障礙體驗（Accessibility）的基本要求，確保視障使用者透過螢幕閱讀器也能獲取完整資訊。
優化圖片 SEO 的核心流程非常直截了當：在圖片上傳前給予具語意且使用連字號分隔的英文檔名，插入網頁時撰寫精準描述畫面、不堆疊關鍵字的 Alt 替代文字，並在適當情境下轉換為新一代圖檔格式以維持載入速度。
圖片檔名優化：上傳前必須落實的 3 個命名規範
檔案名稱是搜尋引擎爬蟲在抓取圖片時最先接觸到的線索之一。許多人將相機自動生成的 IMG_0024.jpg 或隨機字串 screenshot-2026.png 直接上傳，這等於放棄了向搜尋引擎宣告圖片內容的機會。建立乾淨、語意清晰的檔名，應遵循以下 3 個規範：
- 使用具體描述的英文字詞：檔名應精準反映圖片主體。Google 建議使用簡短且具描述性的檔名（例如以 my-new-black-kitten.jpg 取代隨機生成的 IMG00023.JPG），能為搜尋引擎提供明確的主題線索。
- 單詞間建議使用連字號分隔：Google 建議在 URL 中以連字號分隔單詞（hyphen -），有助於使用者與搜尋引擎識別概念；將這項命名習慣延伸至圖片檔案名稱，同樣能維持路徑的清晰與易讀。
- 避免使用中文字元與特殊符號：雖然現代瀏覽器支援中文檔名，但在伺服器傳輸與 URL 編碼時，中文字會被轉換為冗長的百分比編碼（例如 %E5%9C%96%E7%89%87）。這不僅讓網址變得冗長、難以閱讀與除錯，也降低了檔案路徑的可維護性，建議一律採用全小寫英數字與連字號。
此外，在確認檔案名稱與路徑設定妥當後，也需檢查網站的 robots.txt 設定，確保沒有意外封鎖 Googlebot-Image 抓取圖片目錄，以免爬蟲無法收錄精心命名的檔案。
圖片 SEO alt 文字怎麼寫？核心原則與範例解析
Alt 文字（Alternative Text，替代文字）是 <img> 標籤中的 alt 屬性。當圖片因網路問題無法載入時，瀏覽器會顯示該文字；當視障者使用螢幕閱讀器時，軟體會朗讀該文字；而在搜尋引擎抓取網頁時，Google 會結合 Alt 文字、電腦視覺演算法與網頁內容來理解圖片的主題。
撰寫優質的 Alt 文字需要掌握以下 3 大原則：
- 具體描述畫面事實：重點在於「這張圖呈現了什麼實質內容」，而非主觀美感。若圖片包含關鍵資訊（如流程圖中的步驟文字），應如實反映在替代文字中。
- 捨棄「這是一張圖片」等冗餘贅詞：螢幕閱讀器在遇到圖片標籤時，已會自動向使用者語音宣告「圖像」，若在 Alt 開頭加上「這是一張照片」或「圖片顯示」，只會造成資訊重複與聽讀困擾。
- 自然融入關鍵字，拒絕堆疊：可以在相關的圖片中置入目標關鍵字，但必須緊扣圖片本身。搜尋指南警告過度填塞關鍵字（Keyword Stuffing）會損害使用者體驗，甚至導致網頁被系統判定為垃圾內容。
為了具體展示不同寫法的差異，以下整理了常見的情境對照：
| 圖片情境 | 不良範例（不推薦） | 良好範例（符合標準） |
|---|---|---|
| 草地上奔跑的柴犬 | alt=”柴犬 寵物 狗 買狗 台北寵物店”（堆疊關鍵字） | alt=”赤柴犬在綠色草地上奔跑並接住飛盤”（具體描述動作與主體） |
| 咖啡沖煮步驟示意圖 | alt=”IMG_20260401.jpg”（直接複製檔名） | alt=”手沖咖啡注水示意圖，細口壺順時針繞圈注水”（傳達圖表步驟要點） |
| 電商產品照片（白底運動鞋） | alt=”鞋子”（描述過於模糊空泛） | alt=”男款白色透氣慢跑鞋，側面黑色反光條設計”（涵蓋款式、顏色與細節特徵） |
← 左右滑動看完整表格 →
在標準網頁架構中，圖片必須放置在正確的語意標籤內，相關的標籤層級可參考 HTML 語意標籤 的基本規範，讓搜尋引擎爬蟲更完整地解析整體內容結構。
什麼時候 Alt 必須留空？W3C 替代文字判斷法則
許多人誤以為網站上的每一張圖都必須塞滿描述文字，這種作法反而會破壞網頁的可用性。國際無障礙標準組織 W3C 提出的替代文字決策樹指出，圖片應依據其在頁面上的功能來決定 Alt 的填寫方式：
- 純裝飾性圖片（Decorative Images）：例如文章段落間的花紋分隔線、純背景漸層或美化排版的小裝飾圖。這類圖片對理解文章內容沒有任何實質幫助，應將屬性設定為空值 alt=””。空屬性能通知螢幕閱讀器直接忽略該圖，避免使用者被無意義的資訊打斷。
- 功能性圖片（Functional Images）：若圖片本身就是一個按鈕或超連結（例如放大鏡搜尋圖示、首頁 Logo），Alt 文字應該描述「這個連結會前往的目的地或觸發的動作」（例如 alt=”前往網站首頁”），而不是描述圖示的外觀長相。
- 圖文並茂的重複資訊：若圖片下方已有完整的圖說文字（Caption）詳細交代了內容，Alt 文字則應簡明扼要，避免讓螢幕閱讀器使用者重複聆聽一模一樣的長篇段落。
需要特別強調的是，「屬性留空（alt=””）」與「完全缺少 alt 屬性（<img src=”…”>）」是截然不同的兩件事。如果完全沒有撰寫 alt 屬性，不符合 W3C 規範，部分螢幕閱讀器可能改為朗讀圖檔檔名或路徑，對輔助瀏覽造成干擾；同時，缺少 alt 屬性也會被 HTML 驗證與各類 SEO 稽核工具標記為語法缺失。
圖片格式與載入效能：兼顧搜尋體驗與 Core Web Vitals
除了語意標籤與檔名，圖片的檔案體積也是影響 SEO 成效的核心指標。未經壓縮的高解析度圖檔會拖慢網頁載入速度，進而直接衝擊 Google Core Web Vitals 中的最大內容繪製（Largest Contentful Paint, LCP），因為網頁中面積最大的可視元素通常就是文章首圖或橫幅圖片。
現代網頁開發建議採用新一代圖片格式 WebP 或 AVIF 取代傳統的 JPEG 與 PNG。web.dev 指出，新一代格式 AVIF 相較於傳統 JPEG 可節省超過 50% 檔案大小（實際比例依圖片內容與編碼設定而異），能為網頁帶來顯著的壓縮優勢。
在技術實作上，可透過 HTML 的 <picture> 標籤搭配 <source> 進行漸進增強，優先提供 AVIF 或 WebP 格式給現代瀏覽器，同時保留傳統 JPEG 作為相容性備援。此外，針對大型網站或電商目錄，建議建立獨立的圖片 sitemap 或透過 提交 sitemap.xml 加入圖片標記，以協助搜尋引擎爬蟲更有效率地發現並索引站上的所有視覺資源。
圖片 SEO 常見問答（FAQ）
Q1：圖片的 alt 屬性和 title 屬性有什麼差別？需要兩者都填嗎？
兩者的用途與技術目的完全不同。alt 屬性是替代文字，提供給搜尋引擎理解圖片內容、螢幕閱讀器語音朗讀，以及破圖時呈現在網頁畫面上，是圖片 SEO 與無障礙體驗的核心屬性；title 屬性則是補充資訊，主要在滑鼠懸停於圖片上方時顯示提示浮動框（Tooltip）。在圖片優化實踐中，應優先確保每張具語意的圖片都具備精準的 alt 文字，title 則視桌面端的使用者互動需求選填即可。
Q2：圖片檔名可以用中文嗎？真的會對 SEO 造成負面影響嗎？
技術上搜尋引擎能解析中文 URL，但極不建議在圖片檔名中使用中文。中文檔名在伺服器處理與瀏覽器傳輸時會被轉碼為 UTF-8 百分比編碼（例如 %E7%AE%A1%E7%90%86.jpg），會導致網址變得冗長且難以手動排查與除錯。統一使用英文字詞與連字號命名，兼具通用性與易維護性。
Q3：CSS 中的背景圖片（background-image）會被 Google 圖片搜尋收錄嗎？
不會。Google 官方文件明確指出，Googlebot-Image 只會抓取與索引 HTML 中的 <img> 標籤（包含包在 <picture> 中的圖片）。凡是透過 CSS 樣式表設定的 background-image 都不會被 Google 圖片搜尋索引。如果該圖片屬於頁面內容的核心部分、希望爭取搜尋排名，務必使用標準 HTML <img> 標籤嵌入並設定 Alt 替代文字。