圖片搜尋是被低估的流量來源
Google 圖片搜尋每天處理數十億次查詢，但很多品牌在建設網站時完全忽略圖片 SEO。
圖片流量的特性：
- 競爭度通常比文字搜尋低
- 圖片結果常出現在一般搜尋結果的上方（Universal Search）
- 作品集、產品、教學內容都有很高的圖片搜尋需求
1. 圖片檔名最佳化
這是最容易做到、也常被忽略的。
不好的檔名： DSC_0892.jpg、image_01.png、screenshot.jpg
好的檔名： taipei-brand-website-design.jpg、ecommerce-checkout-ux.png
規則：
- 全部小寫
- 用連字符（-）而非底線（_）分隔字詞
- 包含主要關鍵字，但不要堆砌
- 描述圖片的實際內容
2. Alt 文字（替代文字）
Alt 文字有兩個目的：
- 告訴搜尋引擎圖片的內容
- 替代圖片給無法看圖的使用者（螢幕閱讀器、圖片載入失敗）
不好的 Alt 文字： alt=""（空的）、alt="圖片" 、alt="img1"
好的 Alt 文字： alt="台北品牌網頁設計案例 - SimpleCreative 作品"
過度優化（要避免）： alt="台北網頁設計 台北網站設計 品牌官網設計 台灣接案設計師"（關鍵字堆砌）
規則：
- 自然語言，真實描述圖片
- 如果圖片是裝飾性的（例如背景花紋），用空 alt=""
- 每張圖片的 Alt 文字應該不同
- 最大長度約 125 個字元
3. 圖片格式選擇
WebP： 首選格式。比 JPEG 小約 30%，比 PNG 小約 25%，支援透明度，且所有主流瀏覽器都支援。
AVIF： 比 WebP 更新更小，但瀏覽器兼容性稍差（2026 年約 90% 支援）。可以漸進式採用，配合 picture 元素的 fallback。
JPEG： 仍然適合不需要透明的照片。
PNG： 僅用於需要透明背景的圖形（Logo、圖示等）。
避免： BMP、TIFF（網頁完全不需要）。
在 Next.js 中，Image 組件會自動轉換格式為 WebP / AVIF，開發者只需要提供原始圖片。
4. 壓縮標準
檔案大小目標：
- 英雄圖片（全版）：200KB 以下
- 文章圖片：100KB 以下
- 縮圖 / 圖標：30KB 以下
壓縮工具：
- Squoosh（Google 出品，線上工具）
- ImageOptim（桌面 App，Mac）
- sharp（Node.js 套件，程式化壓縮）
5. 尺寸和響應式圖片
常見錯誤：放一張 3000×2000 的圖，只顯示在 400px 寬的位置上——瀏覽器仍然下載了完整的大圖，浪費頻寬。
正確做法：
- 為不同螢幕尺寸提供不同大小的圖片（srcset）
- Next.js Image 組件自動處理這件事
6. 懶加載（Lazy Loading）
讓頁面首屏以下的圖片，等到接近用戶視野時才載入：
HTML 原生：加上 loading="lazy" 屬性
Next.js：Image 組件預設開啟懶加載
首屏的重要圖片應設為 loading="eager" 或 priority，確保最快速度載入。
7. 結構化資料（Schema.org）
對某些圖片類型，加上結構化資料可以在搜尋結果中顯示豐富摘要：
- 食譜圖片：搭配 Recipe schema
- 產品圖片：搭配 Product schema
- 作品集圖片：搭配 CreativeWork schema
8. Open Graph 圖片
雖然不直接影響 Google 圖片搜尋，但 OG 圖片（分享到社群時顯示的圖片）影響點擊率。
標準：
- 尺寸：1200×630px
- 格式：JPEG（最廣泛兼容）
- 每個頁面客製化不同的 OG 圖片效果最好
快速稽核清單
- ✅ 所有圖片使用描述性檔名
- ✅ 所有有意義的圖片有適當的 Alt 文字
- ✅ 使用 WebP 格式
- ✅ 所有圖片已壓縮（用 PageSpeed Insights 確認）
- ✅ 首屏圖片有設定 priority
- ✅ 非首屏圖片有懶加載