圖片SEO完整指南2026：Alt Text、檔名、格式與速度優化

圖片可以令內容更容易理解，也可以帶來 Google Images、一般搜尋結果及 Discover 等額外曝光。不過，圖片 SEO 並不只是把關鍵詞填入 Alt Text。搜尋引擎能否找到圖片、頁面語境是否清楚、檔案是否過大，以及首屏圖片何時開始載入，都會影響最終效果。

我在審核網站時，常見兩個極端：一種是圖片名稱全部保留為 IMG_4829.jpg，Alt Text 完全空白；另一種則把十多個關鍵詞塞進每一張圖片。前者欠缺基本資訊，後者則犧牲可讀性和無障礙體驗。真正有效的圖片 SEO，應該同時處理搜尋理解、無障礙、圖片品質及載入效能。

圖片 SEO 是甚麼？

圖片 SEO（Image SEO）是針對網站圖片進行的搜尋及效能優化。目的包括協助搜尋引擎發現圖片、理解圖片內容、判斷圖片與頁面的關係，以及向用戶提供快速而清晰的視覺體驗。

根據 Google Images SEO 官方指南，Google 會綜合 Alt Text、電腦視覺技術、圖片附近的文字、Caption、頁面標題及其他頁面內容理解圖片。因此，沒有任何單一欄位可以獨立完成圖片 SEO。

圖片檔名怎樣寫才有利 SEO？

Google 建議圖片檔名保持簡短而具有描述性。檔名只能提供圖片主題的輕微信號，但清楚的命名仍有助內容管理、圖片搜尋及日後審核。

圖片命名的實用原則

• 用幾個具體詞語描述圖片真正展示的內容。
• 英文檔名可使用小寫字母及連字號分隔詞語。
• 避免使用 image1.jpg、pic.png 或相機自動名稱。
• 避免在檔名重複同一關鍵詞或加入無關地區名稱。
• 確保副檔名與實際檔案格式一致，例如 WebP 使用 .webp。
• 多語言網站可以按實際管理需要本地化圖片名稱。

Alt Text 是甚麼？應該怎樣寫？

Alt Text 是 HTML 圖片元素內的替代文字，主要用途是當圖片無法顯示，或用戶使用 Screen Reader 時，提供圖片的文字替代內容。它同時可以協助搜尋引擎理解圖片。

Google 建議 Alt Text 應提供實用而具資訊性的描述，並配合頁面語境自然使用關鍵詞。把大量關鍵詞塞入 Alt Text 會損害用戶體驗，也可能被視為 Keyword Stuffing。

不同圖片應採用不同 Alt Text 寫法

根據 W3C 無障礙指引，純裝飾或已被附近文字完整描述的圖片，可以使用空白的 alt=""，讓輔助技術略過圖片。直接刪除 alt 屬性並不等於空白 Alt，部分 Screen Reader 可能會讀出檔名。

Alt Text 的正確 HTML 例子

<img
  src="image-seo-alt-text-example.webp"
  width="1200"
  height="800"
  alt="WordPress 圖片 Alt Text 設定範例"
>

Alt Text 常見錯誤

• 關鍵詞堆砌：反覆加入「圖片 SEO、Image SEO、Alt Text SEO」等相近字詞。
• 每張圖片使用同一描述：沒有反映不同圖片的內容。
• 描述過於空泛：只寫「圖片」、「產品」或「SEO 圖」。
• 把 Caption 複製到 Alt Text：兩者用途不同，不需要逐字重複。
• 所有裝飾圖都填寫關鍵詞：這會增加 Screen Reader 使用者的閱讀負擔。

圖片附近的文字及 Caption 同樣重要

圖片 SEO 不是獨立於頁面內容的工作。Google 會從圖片附近的正文、Caption、頁面標題及內容主題取得資訊。即使 Alt Text 寫得完整，把一張技術 SEO 截圖放在與圖片優化無關的頁面，也不會自然獲得高度相關性。

圖片與內容應建立清楚關係

• 把圖片放在最相關的段落附近。
• 在正文解釋圖片帶出的重點，不要只放圖而沒有說明。
• 需要補充背景、數據或來源時使用 <figcaption>。
• 圖表的重要數據應同時以文字或 HTML 表格呈現。
• 避免把重要標題、價錢或操作步驟只放在圖片內。

<figure>
  <img
    src="pagespeed-image-opportunities.webp"
    width="1200"
    height="750"
    alt="PageSpeed Insights 圖片優化建議"
    loading="lazy"
  >
  <figcaption>
    PageSpeed Insights 可協助找出尺寸過大及載入時間較長的圖片。
  </figcaption>
</figure>

JPEG、PNG、WebP、AVIF、SVG 怎樣選？

圖片格式沒有一個適用於所有情況的答案。選擇時應考慮圖片類型、透明背景、動畫、瀏覽器支援及實際壓縮結果，而不是看到新格式便把所有圖片一次轉換。

在合適情況下使用 WebP 或 AVIF，並按需要提供 JPEG 或 PNG Fallback。對動畫而言，使用影片通常比大型 GIF 更有效率。

實際選擇建議

• 一般相片：先測試 AVIF 或 WebP，再以 JPEG 作相容方案。
• 介面截圖：測試 lossless WebP、PNG 或 AVIF，並檢查細字是否清晰。
• 透明產品圖：使用 WebP、AVIF 或 PNG。
• Logo 及圖示：優先考慮安全而簡潔的 SVG。
• 動畫：優先比較 MP4／WebM 影片與 Animated WebP，不要直接使用大型 GIF。

圖片尺寸與壓縮：沒有通用的 KB 答案

「網站圖片一定要低於 100KB」是一個方便記憶，但不夠準確的規則。一張全闊 Hero Image、一個細小圖示和一張產品放大圖，需要的解像度及品質完全不同。真正需要控制的是圖片是否超出實際展示需求，以及下載成本是否合理。

圖片上載前的四個步驟

1. 先裁剪：刪除不需要的畫面範圍。
2. 調整尺寸：按最大顯示寬度及高像素密度裝置準備圖片。
3. 選擇格式：比較 JPEG、WebP 或 AVIF 的品質與大小。
4. 壓縮輸出：降低肉眼難以察覺的多餘資料，再檢查文字和細節。

使用 Responsive Images 避免手機下載大圖

Responsive Images 讓瀏覽器按螢幕尺寸、圖片顯示寬度及像素密度選擇適合的圖片檔案。常用屬性包括 srcset 和 sizes。

<img
  src="image-seo-guide-1200.webp"
  srcset="
    image-seo-guide-480.webp 480w,
    image-seo-guide-800.webp 800w,
    image-seo-guide-1200.webp 1200w
  "
  sizes="(max-width: 700px) 100vw, 900px"
  width="1200"
  height="800"
  alt="圖片 SEO 優化流程"
  loading="lazy"
>

Google 可以從標準 <img> 元素的 src 找到圖片。即使使用 srcset 或 <picture>，仍應保留具有實際圖片 URL 的 src 作為 Fallback。

使用 picture 提供不同格式

<picture>
  <source
    type="image/avif"
    srcset="image-seo-guide.avif"
  >
  <source
    type="image/webp"
    srcset="image-seo-guide.webp"
  >
  <img
    src="image-seo-guide.jpg"
    width="1200"
    height="800"
    alt="圖片 SEO 優化流程"
    loading="lazy"
  >
</picture>

為圖片設定 width 及 height

圖片應盡量提供實際的 width 和 height 屬性。瀏覽器可根據兩者計算圖片比例，在圖片下載前預留空間，減少 Cumulative Layout Shift。

即使網站使用響應式設計，仍可配合以下 CSS：

img {
  max-width: 100%;
  height: auto;
}

根據 web.dev 的 CLS 優化指南，圖片及影片應提供 width 和 height，或使用 CSS aspect-ratio 預留空間，避免內容在圖片載入後突然移位。

Lazy Loading 不是所有圖片都要開啟

Lazy Loading 會延遲載入畫面以外的圖片，直至圖片接近 Viewport。它可以減少初始頁面的圖片請求，但不應套用到首屏重要圖片。

內文下方圖片

<img
  src="image-seo-checklist.webp"
  width="1200"
  height="800"
  alt="圖片 SEO 檢查表"
  loading="lazy"
  decoding="async"
>

首屏 Hero／LCP 圖片

<img
  src="image-seo-hero.webp"
  width="1200"
  height="630"
  alt="圖片 SEO 完整指南"
  fetchpriority="high"
>

首屏最大圖片經常是 Largest Contentful Paint（LCP）元素。如果把它設定為 loading="lazy"，瀏覽器可能延遲發出圖片請求，反而令 LCP 變差。對確定是主要首屏圖片的元素，可考慮使用 fetchpriority="high"，但不要同時把大量圖片設為高優先。

web.dev 建議網站在至少 75% 的頁面瀏覽中，將 LCP 維持在 2.5 秒或以下。詳情可參考 Optimize Largest Contentful Paint。

確保 Google 可以發現及抓取圖片

即使圖片品質很好，如果 Google 無法找到或存取圖片 URL，也難以出現在 Google Images。圖片抓取應先從標準 HTML、robots.txt、HTTP 狀態及圖片網址穩定性開始檢查。

使用標準 HTML 圖片元素

Google 表示可以從 <img src="..."> 找到圖片，但不會把 CSS Background Image 當作可索引圖片處理。因此，重要內容圖片不應只放在 CSS background-image。

<img
  src="/images/local-seo-map.webp"
  alt="香港 Local SEO 地圖搜尋結果"
>

<div
  style="background-image: url('/images/local-seo-map.webp');"
></div>

檢查圖片存取條件

• 圖片 URL 應回傳正常的 HTTP 200 狀態。
• 不要意外透過 robots.txt 阻擋 Googlebot-Image。
• 圖片不應要求登入、Cookie 驗證或短期 Token 才能存取。
• CDN 防盜鏈設定不應阻擋正常搜尋引擎抓取。
• 同一圖片盡量使用穩定而一致的 URL。
• 刪除或更換圖片時，檢查舊 URL 是否需要重新導向。

如果網站不希望個別圖片出現在 Google，可以使用圖片主機上的 robots.txt 規則，或為圖片回應設定 X-Robots-Tag: noindex。相關設定可參考 Google 移除圖片指南。

甚麼時候需要圖片 Sitemap？

一般能透過標準 HTML 找到的圖片，不一定需要另建 Image Sitemap。不過，如果網站有大量圖片、使用 JavaScript 載入、圖片由 CDN 提供，或部分圖片難以透過一般內部連結發現，圖片 Sitemap 可以提供額外的發現路徑。

根據 Google Image Sitemap 文件，圖片資料可以加入現有 XML Sitemap，也可以建立獨立 Sitemap。目前核心標籤為 <image:image> 及 <image:loc>。

<?xml version="1.0" encoding="UTF-8"?>
<urlset
  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
>
  <url>
    <loc>https://example.com/image-seo/</loc>
    <image:image>
      <image:loc>https://example.com/images/image-seo-guide.webp</image:loc>
    </image:image>
  </url>
</urlset>

結構化資料與代表圖片

Article、Product、Recipe 等結構化資料可以透過 image 屬性提供代表圖片。Google 對最終展示圖片的選擇是自動化的，但網站可以使用 Schema、主要實體圖片及 og:image 提供偏好訊號。

代表圖片應與頁面主題直接相關，具有足夠解像度，並避免極端長闊比例。只使用網站 Logo，或使用主要內容都是細小文字的圖片，通常不是理想選擇。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "圖片 SEO 完整指南 2026",
  "image": [
    "https://example.com/images/image-seo-guide-2026.jpg"
  ]
}
</script>

攝影及圖片授權網站可考慮 License Metadata

原創攝影、新聞圖片及素材網站，可以加入 ImageObject 結構化資料或 IPTC Metadata，向 Google 提供創作者、版權、授權頁面及取得授權的方法。這可以令圖片符合 Licensable Badge 的展示資格，但不代表一定會獲得排名或標章。

Google 建議至少保留 Creator、Credit Line 及 Copyright Notice 等重要權利資訊。詳情可參考 Google Image License Metadata 文件。

WordPress 圖片 SEO 應如何設定？

WordPress 已具備基本的圖片媒體管理及 Responsive Images 功能。自 WordPress 4.4 起，系統可在產生的圖片 HTML 加入 srcset 和 sizes，讓瀏覽器按裝置選擇圖片。詳情可參考 WordPress Responsive Images 官方文件。

WordPress 上載圖片前

• 先裁剪及調整圖片像素尺寸。
• 把檔名改成簡短而具描述性的名稱。
• 選擇合適格式並壓縮圖片。
• 保留一份高品質原檔作日後使用。

WordPress 媒體庫內

• 替代文字：填寫圖片功能或內容，不要堆砌關鍵詞。
• 標題：主要用於媒體管理，不應假設它可取代 Alt Text。
• 說明文字：只在頁面需要顯示 Caption 時使用。
• 描述：是否顯示取決於 Theme 和 Attachment Page 設定。

插入文章時

• 不要在所有位置都選擇 Full Size。
• 檢查 WordPress 是否正常輸出 srcset、sizes、width 和 height。
• 首屏主要圖片不要被效能 Plugin 錯誤設定成 Lazy Load。
• 壓縮 Plugin 與 CDN 不應產生多次重複壓縮。
• 轉換 WebP／AVIF 後，檢查圖片 URL、Cache 及 Fallback 是否正常。

圖片 SEO 12 項檢查表

圖片 SEO 成效應如何量度？

圖片 SEO 不應只以「有沒有填 Alt Text」作為完成標準。優化前後可以從搜尋曝光、頁面速度、圖片請求及用戶行為幾方面比較。

• Google Search Console：把 Search Type 設為 Image，觀察圖片搜尋的 Clicks、Impressions、CTR 及主要 Landing Pages。
• PageSpeed Insights：檢查 LCP、CLS、圖片尺寸、格式及載入機會。
• Chrome DevTools：查看圖片實際下載大小、優先級、Cache 及載入時間。
• 網站 Crawl：找出缺少 Alt Text、失效圖片、過大檔案及被阻擋的 URL。
• 伺服器或 CDN Log：檢查 Googlebot-Image 是否正常存取重要圖片。

圖片 SEO 常見問題

總結：圖片 SEO 是內容、技術與速度的交叉點

圖片 SEO 並沒有一個單獨設定可以保證排名。檔名和 Alt Text 協助描述圖片，正文和 Caption 提供語境，標準 HTML 和 Sitemap 協助搜尋引擎發現圖片，而格式、Responsive Images、壓縮及載入次序則決定用戶需要等多久。

對大部分 WordPress 網站而言，最值得優先處理的並不是安裝更多 Plugin，而是建立穩定的圖片工作流程：上載前改名、裁剪和壓縮；發布時填寫正確 Alt Text；前端輸出適合裝置的尺寸；首屏圖片優先載入；最後再以 Search Console 和 PageSpeed Insights驗證結果。

如果你正在整理網站的整體設定，也可以延伸閱讀 RankByLeo 的 WordPress SEO 新手教學，把圖片優化與索引、網站架構及技術設定一併處理。

參考資料

• Google Search Central：Google Images SEO 最佳做法
• Google Search Central：Image Sitemaps
• Google Search Central：Image License Metadata
• Google Search Central：移除網站圖片
• web.dev：Choose the Right Image Format
• web.dev：Browser-level Image Lazy Loading
• web.dev：Optimize Largest Contentful Paint
• web.dev：Optimize Cumulative Layout Shift
• WordPress Developer Resources：Responsive Images
• W3C Web Accessibility Initiative：Decorative Images