電商圖片SEO怎麼做？產品圖片優化、索引與頁速檢查流程

電商圖片 SEO 是什麼？為什麼會影響商品頁流量？

電商圖片 SEO 是讓商品圖片能被搜尋引擎讀懂、索引，並在 Google 圖片搜尋或商品相關結果中取得曝光的優化流程。它會影響商品頁自然流量，因為圖片常是使用者判斷款式、規格、材質與是否點進賣場的第一個線索。

對購物網站來說，產品圖片優化不只是在後台填一格 ALT。它包含檔名、圖片 URL、周邊商品文字、載入速度、結構化資料與圖片是否能被 Google 抓取。我的判斷是，圖片決策越強的品類，這件事越不該拖到網站長大後才補。

例如保養品的瓶身規格、服飾的版型顏色、3C 配件的接口位置、家具的尺寸比例，都會直接影響使用者點擊與轉換。搜尋引擎能理解圖片與商品頁關係時，商品頁更容易承接相關查詢字，圖片本身也更有機會帶來額外曝光。

圖片 SEO 對電商的 4 個影響：圖片搜尋曝光、商品頁排名輔助、點擊率、頁速體驗。

第一是 Google 圖片搜尋曝光，商品主圖與細節圖可能出現在圖片結果中。第二是商品頁排名輔助，清楚的圖片語意能補足頁面主題。第三是點擊率，清楚且貼近查詢意圖的縮圖更容易被點。第四是載入速度，圖片太大會拖慢商品頁，特別是手機流量占比高的電商。

Google 如何理解商品圖片：檔名、ALT、周邊文字、結構化資料、可爬取圖片 URL。

Google 官方圖片 SEO 文件提到，標準 HTML image element、可抓取的 src、ALT、周邊頁面內容、響應式圖片與圖片 sitemap 都會影響圖片被發現與理解的機會。實務上，商品圖要放在 Google 能讀到的位置，不能只靠 CSS 背景圖，也不能讓重要圖片 URL 被 robots.txt 擋住。參考來源：Google 圖片 SEO 最佳做法。

哪些商品最需要優先做圖片 SEO：高毛利、高搜尋量、款式差異明顯、圖片決策強的商品。

優先順序建議從高毛利、高搜尋量、款式差異明顯、使用者高度依賴圖片判斷的商品開始。像是洗面乳、機能外套、手機殼、蛋黃酥禮盒、收納櫃，都比規格差異小、圖片判斷弱的耗材更值得先做完整圖片 SEO。

電商圖片 SEO 的完整 SOP：上架前、上架時、上架後怎麼做

電商圖片 SEO 的執行順序應該分成上架前、上架時、上架後與每月追蹤。先處理圖片類型、檔名、尺寸與壓縮，再填 ALT、商品頁文字與結構化資料，最後用 GSC 與爬蟲工具檢查索引、曝光、點擊與技術錯誤。

上架前：整理圖片類型、檔名、尺寸、格式、壓縮。

上架前先決定每張圖的角色，主圖負責辨識商品，細節圖負責材質與功能，尺寸圖負責規格，情境圖負責使用場景。這樣命名與 ALT 才不會全部變成同一句商品名稱，也能讓搜尋引擎看到更完整的商品語意。

上架時：填寫 ALT、圖片標題、商品頁文字、主圖不要只靠圖片文字。

商品上架時要把 ALT 寫成可獨立理解的圖片描述，並在商品頁用 HTML 文字補上規格、材質、容量、適用型號、保存方式等資訊。主圖若只有圖片上的促銷字，搜尋引擎與輔助工具都難以判斷商品本身。

上架後：檢查圖片是否可索引、是否進 sitemap、是否影響 LCP。

上架後要檢查圖片 URL 是否可開啟、是否被 robots.txt 阻擋、是否出現在圖片 sitemap 或一般頁面中，也要確認首屏主圖沒有被不當延遲載入。LCP 常落在商品主圖，這張圖若太慢，使用者會先感受到頁面卡住。

每月追蹤：用 GSC 看圖片搜尋曝光、點擊、查詢字與頁面。

每月追蹤不只看自然搜尋總流量，也要切到圖片搜尋資料。曝光增加但點擊低，可能是縮圖不吸引人或商品頁標題不匹配；查詢字偏離商品，可能是 ALT 或周邊文字寫得太泛。

商品圖片 ALT 怎麼寫？電商範例與錯誤示範

商品圖片 ALT 要用自然、具體、可獨立理解的文字描述圖片內容，並依圖片角色補上品牌、品名、規格、顏色、材質或使用場景。好的 ALT 能幫助圖片無法載入時保留資訊，也能協助搜尋引擎判斷商品圖與商品頁主題。

ALT 的用途：圖片無法載入、輔助工具、搜尋引擎理解圖片。

ALT 的第一個用途是圖片無法載入時提供替代資訊，第二個用途是讓輔助工具讀出圖片內容，第三個用途才是搜尋理解。電商後台若把 ALT 當成關鍵字欄位使用，通常會寫出使用者看不懂、搜尋引擎也不需要的文字。

ALT 撰寫 5 原則：具體描述、自然放關鍵字、不堆疊、不過長、每張圖不同。

ALT 要具體描述畫面，不要只寫「商品圖」。可以自然放入商品關鍵字，但不要重複塞同義詞。長度以能說清楚圖片為準，不需要把完整商品標題、賣點與活動字都塞進去。每張圖要依主圖、細節圖、尺寸圖、情境圖改寫。

台灣電商 ALT 範例：主圖、細節圖、尺寸圖、情境圖。

Image Title 和 ALT 差在哪裡：title 可輔助管理，但 ALT 才是主要描述欄位。

Image Title 可以用來輔助後台管理，例如標記「主圖」、「尺寸表」、「新版瓶身」。但 ALT 才是圖片替代文字的主要欄位，會直接承擔圖片內容描述。若後台只能選一個欄位先補，應優先處理 ALT。

不同電商圖片類型，SEO 寫法不一樣

不同商品圖片類型要用不同 SEO 寫法。主圖要讓人一眼知道商品是什麼，細節圖要補材質與功能，情境圖要描述使用場景，尺寸表與規格圖則要同步用 HTML 文字補上重點，避免搜尋引擎只看到一張圖。

商品主圖：品牌、品名、型號、顏色、規格。

商品主圖的 ALT 可以寫「A 品牌黑色無線滑鼠 M2 主圖」或「兒童防水運動鞋藍色款側面主圖」。這會讓搜尋引擎理解圖片代表哪個商品，也讓使用者在圖片無法載入時仍知道商品內容。

細節圖：材質、接口、功能、局部特徵。

細節圖應該補足主圖看不到的資訊，例如「USB-C Hub HDMI 與 USB 3.0 接孔細節」、「保溫杯杯蓋矽膠防漏圈特寫」。這類 ALT 對搜尋引擎的幫助是擴充商品頁語意，對使用者的幫助是降低購買疑慮。

情境圖：使用場景與商品關係，不寫成廣告標語。

情境圖可以寫「米色雙人沙發放置於小坪數客廳情境」或「低糖燕麥棒作為辦公室下午茶點心」。我會避免把情境圖寫成品牌口號，因為口號對搜尋理解的幫助通常低於真實場景描述。

尺寸表／規格圖：重要文字要同時放在 HTML 文字中。

尺寸表圖片的 ALT 可以說明圖片角色，但尺寸、重量、材質、適用型號、保固條件仍要放在商品頁文字中。圖片內文字不等於頁面可讀文字，尤其手機使用者放大查看時也容易漏掉重點。

分類頁 Banner：避免只有活動字樣，需補分類語意。

分類頁 Banner 常見問題是只寫「新品上市」或「限時折扣」。較好的做法是把分類語意補上，例如「敏感肌保養品新品上市 Banner」或「人體工學椅夏季優惠 Banner」，讓分類頁主題更清楚。

圖片檔名、URL 路徑與圖片標題怎麼設定

圖片檔名與 URL 路徑應該提供商品主題線索，避免使用 IMG_001、DSC_8888 或無意義流水號。建議使用英文小寫、連字號、商品類型與圖片角色，例如 wireless-mouse-black-main.webp，讓檔案本身也能支援圖片理解。

檔名要描述商品，不要只用 IMG_001、DSC_8888。

檔名是低成本但常被忽略的產品圖片優化項目。IMG_001.webp 對搜尋引擎與後台管理都沒有幫助；face-serum-30ml-main.webp 至少能看出商品類型、容量與主圖角色，日後批次盤點也更容易。

建議使用英文小寫與連字號，例如 wireless-mouse-black-main.webp。

命名模板可以用「商品類型加規格加圖片角色」，例如 wireless-mouse-black-main.webp、iphone-16-clear-case-detail.webp、pineapple-cake-gift-box-scene.webp。英文小寫與連字號可降低系統相容性問題，也比空格與特殊符號穩定。

圖片 URL 路徑可保留分類線索，例如 /products/mouse/。

圖片 URL 若能保留分類線索，會讓資產管理更清楚，例如 /products/mouse/wireless-mouse-black-main.webp 或 /products/skincare/face-serum-30ml-main.webp。若既有網站圖片 URL 已大量被索引，不建議為了改名而直接搬移造成 404。

圖片標題欄位的使用方式：可輔助後台管理，不取代 ALT。

圖片標題欄位可以寫給內部人員看，例如「主圖新版」、「尺寸表 2026」、「包裝更新後照片」。它能降低後台維護成本，但不應取代 ALT。搜尋與無障礙描述仍應放在 ALT。

圖片格式、尺寸、壓縮與頁速：不要讓產品圖拖慢成交

產品圖片要在清晰與速度之間取得平衡。商品照片可優先使用 WebP 或 AVIF，透明素材才考慮 PNG；尺寸依實際顯示大小輸出，並用 srcset 提供不同裝置版本，避免手機載入桌機大圖而拖慢商品頁。

格式選擇：商品照片優先 WebP／AVIF，透明圖才考慮 PNG。

Google 文件列出 JPEG、PNG、WebP、SVG、AVIF 等可支援格式。電商商品照片通常可優先評估 WebP 或 AVIF，因為它們常能在維持視覺品質下減少檔案大小。PNG 適合透明圖或需要銳利邊緣的素材，不適合拿來放大量商品照片。

尺寸與壓縮：依實際顯示尺寸輸出，不上傳過大原圖。

圖片尺寸應依商品頁實際顯示需求輸出。若主圖在桌機最大只顯示到約 1200px 寬，就不應把相機原始大圖直接丟到前台。可執行門檻是：上架前確認最大顯示寬度、輸出 1x 與高解析螢幕版本、壓縮後檢查文字與商品邊緣是否仍清楚。

設定寬高或比例，避免圖片載入造成版面跳動。

商品圖片應設定寬高或固定比例，讓瀏覽器在圖片載入前就保留空間。這能降低版面跳動，使用者不會在要點規格、顏色或加入購物車時被突然位移干擾；對頁面體驗與 Core Web Vitals 也有幫助。延伸可參考 CLS 修正相關教學。

使用 srcset 與響應式圖片，行動版不要載入桌機大圖。

srcset 可以依螢幕寬度提供不同尺寸圖片。Google 圖片 SEO 文件也提醒，使用 picture 或 srcset 時仍應提供 img src 作為 fallback。這對電商很實際，因為手機使用者看商品頁時，不需要下載和桌機同尺寸的主圖。

Lazy Load、首屏主圖與圖片索引要怎麼處理

Lazy Load 可以改善非首屏圖片載入，但商品主圖、分類頁首屏圖與文章第一張關鍵圖不建議延遲載入。重要圖片應在 rendered HTML 中有可抓取的 img src，並用 URL 檢查工具確認 Google 看得到圖片。

商品主圖、分類頁首屏圖、文章第一張關鍵圖不建議延遲載入。

首屏商品主圖常是 LCP 元素，若被 lazy load 延後，頁面主要內容會更晚出現。web.dev 對瀏覽器層級 lazy loading 的說明也提醒，首屏可見圖片不適合延遲載入。參考來源：web.dev 圖片 lazy loading 與 web.dev LCP 優化。

非首屏圖片可 lazy load，但進入 viewport 時必須能載入。

細節圖、情境圖、更多商品推薦圖片通常可以 lazy load，但使用者滑到該區塊時必須正常載入。若 JavaScript 錯誤或第三方套件衝突導致圖片沒有 src，搜尋引擎與使用者都可能看不到圖片。

檢查 rendered HTML 是否有圖片 src。

技術檢查時要看 rendered HTML，而不只看原始碼。若圖片只存在 data-src，卻沒有在渲染後變成可抓取的 img src，就可能影響圖片被發現。對 JavaScript 載入較重的電商平台，這一步尤其重要。

用 URL 檢查工具確認 Google 是否看得到圖片。

在 Google Search Console 的 URL 檢查工具中測試商品頁，觀察已轉譯頁面是否能看到主圖與重要商品圖。若 Google 看不到圖片，先查 robots.txt、CDN 權限、圖片 URL 狀態碼、lazy load 觸發條件與是否使用 CSS 背景圖。

Product Schema、圖片 sitemap 與 CDN：讓 Google 找得到商品圖

Product schema、圖片 sitemap 與 CDN 設定會影響 Google 是否能把商品圖片與價格、庫存、評價、商品頁連在一起。Product schema 的 image 欄位應指向主要商品圖，CDN 圖片不能被封鎖，圖片量大的電商可加入 image sitemap。

Product schema 的 image 欄位要指向主要商品圖。

Product schema 的 image 欄位應放商品主要圖片，通常是清楚呈現商品本體的主圖，不是活動 Banner 或分類圖。Google 商品結構化資料文件說明，商品資料可支援商品結果與商家清單相關呈現。參考來源：Google Product structured data。

商品頁圖片可搭配價格、庫存、評價，提高商品理解度。

商品圖片若能和名稱、價格、庫存、評價、品牌、型號等資料一致，搜尋引擎比較容易把圖片判斷為該商品的主要視覺資產。對有變體的商品，例如手機殼顏色或服飾尺寸，圖片與變體資訊也要避免錯配。

圖片 sitemap 適合圖片量大、JavaScript 載入或 CDN 圖片多的電商。

圖片 sitemap 可以協助 Google 發現可能不容易在頁面中找到的圖片 URL。Google 圖片 sitemap 文件也提到，image:loc 可包含其他網域圖片 URL，這對 CDN 圖片很常見。參考來源：Google Image sitemaps。

CDN 圖片不能被 robots.txt 擋住，必要時驗證 CDN 網域。

若圖片放在 CDN，請確認 CDN 網域允許 Googlebot 抓取，圖片 URL 回傳正常狀態碼，且沒有防盜連規則誤擋搜尋引擎。必要時可在 Search Console 驗證 CDN 網域，方便接收圖片抓取錯誤資訊。

大量 SKU 的圖片 SEO 怎麼批次處理

大量 SKU 的圖片 SEO 要靠命名規則、ALT 模板、CSV 匯入與爬蟲盤點，不適合逐張憑感覺處理。模板要能帶入品牌、商品類型、關鍵規格與圖片角色，同時避免每張圖都變成同一句商品名稱。

建立 ALT 模板：品牌 + 商品類型 + 關鍵規格 + 圖片角色。

可用模板如「{品牌} {商品類型} {規格} {圖片角色}」，例如「A 品牌無糖堅果禮盒 12 入主圖」、「B 品牌 USB-C 快充線 1.5 公尺接頭細節」。模板的價值是降低漏填，但每個圖片角色仍要有差異。

用後台 CSV 或商品資料欄位批次匯入。

若電商平台支援 CSV，可把商品名稱、品牌、規格、顏色、圖片角色整理成欄位後批次匯入。匯入前要先抽樣檢查，避免全站出現錯誤 ALT，例如把白色款寫成黑色款，這會傷害使用者信任。

用 Screaming Frog 找 Missing Alt Text、過大圖片、404 圖片。

Screaming Frog 可用來盤點 Missing Alt Text、重複 ALT、過大圖片、圖片 404、圖片回應狀態與頁面關聯。我的實務判斷是，先抓出高流量或高營收商品頁的缺漏，比一次追求全站完美更有效。

避免每張圖都用同一句商品名稱。

同一商品的主圖、背面圖、材質圖、尺寸圖若都寫同一句商品名稱，搜尋引擎得不到更多資訊，使用者也無法靠替代文字理解圖片差異。批次處理時至少要把圖片角色欄位納入 ALT。

不要把重要文字只放在圖片裡

商品規格、尺寸、材質、保固、保存方式與活動條件，不應只放在圖片裡。圖片可以保留視覺呈現，但重要資訊要同步寫成 HTML 文字，讓搜尋引擎、輔助工具與手機使用者都能讀到。

尺寸表、材質、規格、保固條件要同步寫成頁面文字。

尺寸表圖片可讓版面好看，但尺寸數字、適用身高、材質、重量、保固條件應再用文字列在商品頁。這對搜尋引擎是可讀內容，對使用者是快速比對資訊，尤其服飾、家具、3C 配件都很需要。

活動 Banner 上的折扣資訊要在 HTML 區塊補文字。

若 Banner 寫著滿額折扣、組合優惠、配送門檻，頁面上也要有文字版說明。否則使用者用搜尋結果進入頁面時，搜尋引擎未必理解優惠內容，輔助工具也可能讀不到活動條件。

圖片可以保留視覺呈現，但不能是唯一資訊來源。

保留圖片設計沒有問題，問題在於把唯一資訊來源藏進圖片。較好的做法是圖片呈現視覺，HTML 補上規格與條件，商品頁就能同時兼顧美感、可讀性與搜尋理解。

如何用 Google Search Console 衡量圖片 SEO 成效

圖片 SEO 成效要用 Google Search Console 的圖片搜尋資料判斷，重點看曝光、點擊、CTR、查詢字與頁面。當圖片有曝光但低點擊，或查詢字與商品不匹配，就能回頭修正 ALT、檔名、商品頁文字與主圖選擇。

在成效報表切換搜尋類型為圖片。

進入 Search Console 成效報表後，將搜尋類型切換為圖片，即可查看來自 Google 圖片搜尋的曝光與點擊。這一步能把一般網頁搜尋與圖片搜尋分開，避免誤判圖片優化成效。

看查詢字：找出 Google 已經把圖片連到哪些詞。

查詢字能反映 Google 目前如何理解圖片。若手機殼圖片主要出現在「透明手機殼」、「iPhone 16 手機殼」相關查詢，代表方向大致正確；若出現太多無關詞，可能是 ALT、商品標題或周邊文字太模糊。

看頁面：找出哪些商品頁圖片有曝光但低點擊。

頁面資料能找出有曝光但低點擊的商品頁。這類頁面可能縮圖不夠清楚、商品主圖和查詢意圖不一致，或商品頁標題沒有回應使用者需求。對行銷主管來說，這是優先優化名單。

用資料回修 ALT、檔名、商品頁文字與主圖選擇。

回修時不要只改 ALT。若查詢字顯示使用者在找「寬版女鞋」，商品頁文字、規格區、主圖角度、檔名與 ALT 都應一致補強。資料回修的目標是讓圖片、文字與商品真實賣點對齊。

電商圖片 SEO 檢查清單

電商圖片 SEO 檢查清單應涵蓋新品上架、既有商品頁、技術 SEO 與成效追蹤。只檢查 ALT 不夠，還要確認檔名、尺寸、壓縮、格式、schema、sitemap、lazy load、CDN 與 GSC 資料。

新品上架前檢查。

既有商品頁檢查。

技術 SEO 檢查。

成效追蹤檢查。