跳至主要內容
    SEO Academyby 盧卡山人

    圖片 SEO 完整指南

    圖片不只是視覺素材，更是 SEO 流量的重要來源。優化得當，能從 Google 圖片搜尋帶來大量訪客。

    1. 什麼是圖片 SEO

    圖片 SEO（Image SEO）是指透過優化圖片檔案、標記與相關屬性，讓搜尋引擎能夠正確理解、索引並在搜尋結果中展示圖片。

    它包含技術層面（檔案格式、大小、載入速度）與語義層面（檔名、alt 文字、上下文）。做好圖片 SEO 能提升網頁整體排名，也能從 Google 圖片搜尋獲得獨立流量。

    2. 圖片 SEO 的重要性

    • 額外流量來源：Google 圖片搜尋是僅次於網頁搜尋的第二大搜尋入口
    • 提升網頁 SEO：優化圖片能改善 Core Web Vitals（LCP）與使用者體驗
    • 增強內容理解：alt 文字與上下文幫助 Google 更準確理解頁面主題
    • 無障礙體驗：alt 文字對視障使用者至關重要，也是 WCAG 規範要求

    3. 圖片優化要素

    3.1 檔案名稱

    使用描述性、有意義的檔名，而非預設的相機編號。

    # 好的檔名
    blue-running-shoes-nike-2024.jpg
    # 不好的檔名
    IMG_2847.jpg
    • 用連字號 - 分隔單字（不要用底線或空格）
    • 包含相關關鍵字，但不要堆砌
    • 保持簡潔、具描述性

    3.2 Alt 文字

    Alt 文字（替代文字）是圖片無法顯示時的文字描述，也是搜尋引擎理解圖片內容的主要依據。

    # 好的 alt 文字
    <img src="nike-shoes.jpg" alt="藍色 Nike 慢跑鞋側面視角" />
    # 不好的 alt 文字
    <img src="nike-shoes.jpg" alt="圖片" />
    <img src="nike-shoes.jpg" alt="慢跑鞋 運動鞋 Nike 鞋子 球鞋 跑步" />
    • 簡潔描述圖片內容（通常 10-15 字以內）
    • 避免「圖片」、「照片」等冗詞
    • 不要堆砌關鍵字
    • 裝飾性圖片使用空 alt=""

    3.3 圖片大小與格式

    選對格式與壓縮能大幅減少檔案大小，提升載入速度。

    格式選擇建議
    • • WebP：現代格式，壓縮率高、畫質好，支援度已很完整
    • • AVIF：壓縮率比 WebP 更高，但瀏覽器支援度較新
    • • JPEG：照片類適用，支援度最廣
    • • PNG：需要透明背景或無損壓縮時使用
    • • SVG：向量圖示、logo 適用

    3.4 響應式圖片

    使用 srcset 與 sizes 屬性，讓不同裝置載入適合尺寸的圖片。

    <img
    src="image-800w.jpg"
    srcset="image-400w.jpg 400w,
    image-800w.jpg 800w,
    image-1200w.jpg 1200w"
    sizes="(max-width: 600px) 400px,
    (max-width: 1200px) 800px,
    1200px"
    alt="響應式圖片範例"
    />

    也可使用 <picture> 標籤提供多種格式，讓瀏覽器自動選最佳版本。

    4. 圖片壓縮與效能

    圖片通常是網頁中最大的資源。壓縮得當能大幅提升 LCP 與整體載入速度。

    壓縮策略

    • 有損壓縮：適用照片，JPEG 品質 75-85、WebP 品質 80-85
    • 無損壓縮：PNG/WebP lossless，適用圖示、logo
    • 自動化工具：使用 Cloudflare Images、ImageOptim、Squoosh 等工具批次處理
    • CDN 處理：Cloudflare / CloudFront 可自動轉換格式、調整尺寸

    延遲載入

    首屏外的圖片使用原生 lazy loading，減少初始載入量。

    <img src="product.jpg" alt="產品圖" loading="lazy" />

    注意：首屏主要圖片（如 hero banner）不要使用 lazy loading，否則會拖慢 LCP。

    5. 圖片 Sitemap

    如果你的網站有大量圖片內容（電商、部落格、圖庫），建立圖片 Sitemap 能幫助 Google 更快發現並索引圖片。

    格式範例

    <url>
    <loc>https://example.com/product/shoes</loc>
    <image:image>
    <image:loc>https://example.com/images/shoes.jpg</image:loc>
    <image:caption>藍色 Nike 慢跑鞋</image:caption>
    <image:title>Nike Air Zoom Pegasus</image:title>
    </image:image>
    </url>

    將圖片 Sitemap 提交到 Google Search Console，能追蹤圖片索引狀態。

    6. 結構化資料與圖片

    在結構化資料（JSON-LD）中加入圖片欄位，能讓圖片在搜尋結果中以 rich snippet 呈現。

    常見類型

    • Product：產品圖片能顯示在購物搜尋結果
    • Article：文章縮圖用於 Google News 與 Discover
    • Recipe：食譜圖片能顯示在食譜輪播
    • Organization：品牌 logo 用於知識面板
    {
    "@context": "https://schema.org",
    "@type": "Product",
    "name": "Nike Air Zoom Pegasus",
    "image": [
    "https://example.com/images/shoes-1.jpg",
    "https://example.com/images/shoes-2.jpg"
    ]
    }

    7. Google 圖片搜尋優化

    針對 Google 圖片搜尋的特定建議。

    • 高品質圖片：解析度至少 1200x675px，適合預覽
    • 相關上下文：圖片附近的文字、標題與內容應該相關
    • 適當的位置：重要圖片放在頁面上方、主內容區
    • 避免 robots.txt 阻擋：確保圖片路徑沒被 Disallow
    • 使用 CDN：加速圖片載入，改善使用者體驗

    8. 圖片 SEO 檢查清單

    • ✓ 所有圖片都有描述性檔名
    • ✓ 所有有意義的圖片都有 alt 文字
    • ✓ 使用現代格式（WebP/AVIF）並提供 fallback
    • ✓ 圖片已壓縮至適當大小（通常 < 200KB）
    • ✓ 使用響應式圖片（srcset/sizes 或 picture）
    • ✓ 首屏外圖片使用 loading="lazy"
    • ✓ 圖片有明確尺寸（避免 CLS）
    • ✓ 建立圖片 Sitemap 並提交到 GSC
    • ✓ 在結構化資料中加入圖片欄位
    • ✓ 圖片路徑沒被 robots.txt 阻擋

    相關工具

    SEO 評分工具Web Vitals 檢查Squoosh（圖片壓縮）Google 圖片搜尋最佳做法

    常見問題

    圖片 SEO 相關問答。