Google 圖片 SEO 最佳做法

By

來源聲明：本文為〈Google image SEO best practices〉（Google Search Central，Google，2026-03-02）的繁體中文翻譯，已依中文閱讀習慣調整斷句，並在文末另加「編輯解讀」。原文以 Creative Commons 姓名標示 4.0 授權。原文連結：https://developers.google.com/search/docs/appearance/google-images。文中「編輯解讀」為本站觀點，不屬於原文。

Google 提供多種搜尋功能與產品，幫助使用者以視覺方式在網路上發現資訊，例如文字結果中的圖片、Google Discover，以及 Google 圖片。雖然各功能與產品外觀不同，但讓圖片出現其中的一般建議相同。

你可以依下列最佳做法，優化圖片以出現在 Google 的搜尋結果：

  • 幫助我們發現並為你的圖片建立索引
  • 優化圖片著陸頁

幫助我們發現並為你的圖片建立索引

讓內容進入 Google 搜尋結果的技術要求，同樣適用於圖片。圖片與 HTML 差異很大，因此還有額外要求；例如在站上找到圖片的方式不同，呈現方式也會影響圖片是否被建立索引、以及是否對上正確關鍵字。

用 HTML 圖片元素嵌入圖片

使用標準 HTML 圖片元素，有助爬蟲找到並處理圖片。Google 可以在 img 元素的 src 屬性找到圖片（即使它是其他元素的子元素，例如 picture）。Google 不會為 CSS 圖片建立索引。

好的做法：用 img（或 picture 內含帶 src 的 img）提供圖片網址。

不好的做法：只靠 CSS 背景顯示圖片。

使用圖片 sitemap

你可以提交圖片 sitemap，提供我們可能尚未發現的圖片網址1。

與一般 sitemap 不同，圖片 sitemap 的圖片網址元素可以包含其他網域的網址。這讓你能用 CDN 託管圖片。若使用 CDN，建議在 Search Console 驗證 CDN 網域名稱擁有權，以便收到可能發現的抓取錯誤通知。

響應式圖片

設計響應式網頁可以帶來更好的使用者體驗，因為人們能在多種裝置上存取。請參考響應式圖片指南，了解網站處理圖片的最佳做法。

網頁用 picture 元素，或 img 的 srcset 屬性指定響應式圖片。不過有些瀏覽器與爬蟲不理解這些屬性。建議一律用 src 提供後備網址。

srcset 可為同一張圖指定不同版本，特別是對應不同螢幕尺寸。例如：

<img
  srcset="maine-coon-nap-320w.jpg 320w, maine-coon-nap-480w.jpg 480w, maine-coon-nap-800w.jpg 800w"
  sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
  src="maine-coon-nap-800w.jpg"
  alt="A watercolor illustration of a maine coon napping leisurely in front of a fireplace">

picture 是容器，用來為同一張圖分組不同的 source 版本。它提供後備方式，讓瀏覽器依裝置能力（例如像素密度與螢幕尺寸）選圖。picture 也方便使用新圖片格式，並對尚未支援的客戶端優雅降級。

依 HTML 標準 4.8.1 節，使用 picture 時請提供帶 src 的 img 作為後備，格式如下：

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="An 1800s oil painting of The Great Pyramid">
</picture>

使用支援的圖片格式

Google 搜尋支援在 img 的 src 中參照下列格式：BMP、GIF、JPEG、PNG、WebP、SVG、AVIF。檔名副檔名最好與檔案類型一致。

你也可以把圖片內嵌成 Data URI：把 img 的 src 設成 Base64 編碼字串，格式如下：

<img src="data:image/svg+xml;base64,[data]">

內嵌可減少 HTTP 請求，但可能大幅增加頁面大小，請謹慎判斷何時使用。詳見 web.dev 關於內嵌圖片優缺點的說明2。

優化速度與品質

高品質照片比模糊不清的圖更能吸引使用者。清晰圖片在結果縮圖也更吸引人，可能提高獲得流量的機會。不過圖片常是整體頁面體積的最大來源，會讓頁面變慢、載入成本變高。請套用最新的圖片優化與響應式技巧，兼顧品質與速度。

可用 PageSpeed Insights 分析站速，並閱讀「為什麼速度重要」了解改善網站效能的最佳做法與技巧。

優化圖片著陸頁

雖不那麼直覺，嵌入圖片的頁面內容與中繼資料，會大幅影響圖片在 Google 搜尋結果裡如何、在何處出現。

用中繼資料指定偏好圖片

Google 選預覽圖完全自動化，並參考多種來源，決定某頁要在 Google 顯示哪張圖（例如文字結果圖或 Discover 預覽圖）。

你可透過下列中繼資料來源之一，影響選哪張圖：

  • 指定 schema.org 的 primaryImageOfPage 屬性，值為 URL 或 ImageObject。
<script type="application/ld+json">{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "url": "https://example.com/url",
  "primaryImageOfPage": "https://example.com/images/cat.png"
}</script>

或指定圖片 URL 或 ImageObject，並掛到主實體（用 schema.org 的 mainEntity 或 mainEntityOfPage）：

<script type="application/ld+json">{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "mainEntityOfPage": "https://example.com/url",
  "image": "https://example.com/images/cat.png"
}</script>
  • 指定 og:image meta 標籤。
<meta property="og:image" content="https://example.com/images/cat.png">

在 schema.org 標記或 og:image 選偏好圖時，請遵循：

  • 選與頁面相關、有代表性的圖。
  • 避免在 schema.org 或 og:image 只用通用圖（例如站徽）或帶大量文字的圖。
  • 避免極端長寬比（過窄或過寬）。
  • 盡可能用高解析度。

檢查頁面標題與說明

Google 搜尋會自動產生標題連結與摘要，盡量說明每則結果以及它與使用者查詢的關係，幫助使用者決定是否點擊。我們會參考多種來源，包括各頁的 title 與 meta 標籤。

你可以依 Google 的標題與摘要指南，幫助提升標題連結與摘要品質。

加入結構化資料

若加入結構化資料，Google 可能在某些複合式結果中顯示你的圖片，包括 Google 圖片中的顯著徽章，提供與頁面相關的資訊，並帶來更對準的流量。

請遵循一般結構化資料指南，以及該類型的專屬指南；否則可能沒有資格在 Google 圖片顯示複合式結果。在這些結構化資料類型中，image 屬性是取得徽章與複合式結果資格的必要欄位。

使用描述性檔名、標題與替代文字

Google 會從頁面內容（含圖說與圖片標題）擷取圖片主題資訊。盡可能把圖片放在相關文字附近，並放在與圖片主題相關的頁面上。

同樣，檔名也能給 Google 關於主題的輕微線索。盡可能用短但具描述性的檔名。例如 my-new-black-kitten.jpg 優於 IMG00023.JPG。盡量避免 image1.jpg、pic.gif、1.jpg 這類通用名。若站上有成千上萬張圖，可考慮自動化命名。若圖片有在地化，也請翻譯檔名，並注意非拉丁或特殊字元的網址編碼指南。

為圖片提供更多中繼資料時，最重要的是替代文字（alt，描述圖片的文字）；它也改善無法看到圖片的人的無障礙，包括使用螢幕閱讀器或頻寬很低的使用者。

Google 會結合替代文字、電腦視覺演算法與頁面內容來理解圖片主題。若把圖片當連結用，替代文字也可充當錨文字。

寫替代文字時，著重有用、資訊豐富、適切使用關鍵字，並符合頁面脈絡。避免在 alt 塞滿關鍵字（關鍵字堆砌），那會造成負面使用者體驗，也可能讓網站被視為垃圾內容。

不好（缺少替代文字）：只有空的或沒有描述的 img。

不好（關鍵字堆砌）：把一長串無關關鍵字塞進 alt。

較好：簡短描述圖片內容。

最好：具體、有脈絡的描述，與頁面內容一致。

也請依 W3 指南考慮替代文字的無障礙。對 img 可用 alt；對內嵌 svg 可用 title 元素。例如：

<svg aria-labelledby="svgtitle1">
  <title id="svgtitle1">Googlebot wearing an apron and chef hat, struggling to make pancakes on the stovetop</title>
</svg>

建議用無障礙稽核與慢速網路模擬來測試內容。

若同一張圖在大型網站的多個頁面被引用，請考慮整體抓取預算。尤其請用同一個網址一致地引用該圖，讓 Google 能快取並重用，而不必多次請求。

退出 Google 圖片的內嵌連結

若要阻止完整尺寸圖片出現在 Google 圖片搜尋結果頁，可以退出內嵌連結：

  • 當你的圖片被請求時，檢查請求的 HTTP referrer 標頭。
  • 若請求來自 Google 網域，回應 200 或 204 HTTP 狀態碼，且不帶內容。

Google 仍會抓取你的頁並看到圖片，但會在搜尋結果顯示抓取時產生的縮圖。此退出可隨時進行，不必重新處理全站圖片。此行為不算圖片偽裝，也不會導致人工處置。

你也可以選擇完全不讓圖片出現在搜尋結果。

針對 SafeSearch 優化

SafeSearch 是 Google 使用者帳戶中的設定，用來指定是否在 Google 搜尋結果顯示、模糊或封鎖露骨圖片、影片與網站。請確保 Google 理解你網站的性質，以便在適當時套用 SafeSearch 篩選。詳見如何為 SafeSearch 標記頁面。

常見問題

  • Google 會為 CSS 背景圖建立索引嗎？不會。Google 不會為 CSS 圖片建立索引；請用標準 HTML 圖片元素，並在 img 的 src 提供網址。
  • 響應式圖片一定要有 src 嗎？要。即使用 srcset 或 picture，仍建議用 src 提供後備網址，因為有些瀏覽器與爬蟲不理解那些屬性。
  • 哪些圖片格式受支援？在 img 的 src 中，Google 搜尋支援 BMP、GIF、JPEG、PNG、WebP、SVG、AVIF。檔名副檔名最好與類型一致。
  • 怎麼影響 Google 選哪張當預覽圖？可用 schema.org 的 primaryImageOfPage（或主實體上的 image），或 og:image meta。選與頁面相關、有代表性、非極端長寬比、盡量高解析度的圖，避免只用站徽或滿版文字圖。
  • 可以退出 Google 圖片的內嵌連結嗎？可以。若請求來自 Google 網域，回 200 或 204 且不帶內容；Google 仍會抓頁並看到圖，但結果裡顯示抓取時產生的縮圖。也可選擇完全不讓圖片出現在搜尋結果。

編輯解讀

一句話重點：圖片要進搜尋，先讓爬蟲在 HTML src 找得到穩定網址；著陸頁的標題、alt、結構化資料與偏好圖中繼資料，決定它「怎麼被理解與展示」。

這對你的網站意味著什麼：

  • 把重要圖從純 CSS 背景改成 img/picture，並保留 src 後備。
  • 大量圖或 CDN 圖補圖片 sitemap，並在 Search Console 驗證 CDN。
  • 每頁用 primaryImageOfPage 或 og:image 指定代表性圖，不要一律塞 logo。
  • alt 寫給人看，不要堆關鍵字；檔名用簡短描述性英文或已編碼的在地化名稱。
  • 同一資產全站用同一 URL，省抓取預算。

適用與不適用的情境：適合修「圖片搜尋沒流量／縮圖不對」的技術與內容清單。不適合當成保證進入 Discover 或一定拿到圖片徽章的承諾。

需要注意的限制：頁面 Last updated 為 2026-03-02 UTC。偏好圖一節與文件更新紀錄中「澄清 schema.org 與 og:image」的方向一致。這是 Google 官方做法說明，沒有給出流量提升百分比。

延伸閱讀：

名詞與資料來源

Similar Posts

2 Comments

  1. 自動引用通知: 影片 SEO 最佳做法 – SEOGEO HQ
  2. 自動引用通知: 圖片 Title 與 Alt：差異與寫法 – SEOGEO HQ

Comments are closed.