Google 圖片搜尋引擎最佳化 (SEO) 的最佳做法

Google 提供多種搜尋功能和產品，協助使用者探索網路上的圖像資訊，例如文字搜尋結果圖片、Google 探索和 Google 圖片。雖然每個功能和產品看起來都不一樣，但要讓圖片顯示在其中的一般建議，則大致相同。

這張插圖顯示 Google 搜尋結果、圖片分頁和「探索」中的圖片

如要讓圖片顯示在 Google 搜尋結果中，請按照下列最佳做法，對圖片進行最佳化調整：

  1. 協助我們找到您的圖片，並為其建立索引
  2. 對圖片到達網頁進行最佳化

協助我們找到您的圖片，並為其建立索引

如要在 Google 搜尋結果中顯示內容，須遵守技術相關規定，而圖片也適用這項規定。相較於 HTML，圖片的格式截然不同，因此若想讓圖片編入索引，須遵守其他規定。舉例來說，在網站上尋找圖片的方法不同，而圖片的顯示方式也會對圖片是否編入索引、以及圖片的適合關鍵字造成影響。

使用 HTML 圖片元素嵌入圖片

使用標準 HTML 圖片元素可協助檢索器找到及處理圖片。Google 可以在 <img> 元素的 src 屬性中尋找圖片 (即使是其他元素的子項亦然，例如 <picture> 元素)。Google 不會為 CSS 圖片建立索引。

較佳的做法：

<img src="puppy.jpg" alt="黃金獵犬" />

不佳的做法：

<div style="background-image:url(puppy.jpg)">黃金獵犬</div>

使用圖片 Sitemap

您可以提交圖片 Sitemap，藉此提供我們找不到的圖片網址。

與一般 Sitemap 不同，您可以在圖片 Sitemap 的 <image:loc> 元素中加入其他網域的網址。因此網站管理員可使用 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 元素也能透過內建的優雅降級功能，適時提供其他可用的圖片格式。

當使用採用了以下格式的 picture 元素時，請務必根據 HTML 標準第 4.8.1 節的說明，提供具有 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 。最好能夠使檔案名稱的副檔名與檔案類型相符。

您也可以將圖片內嵌為「資料 URI」。這是一種納入圖片等檔案的方法，只要按照下列格式將 img 元素的 src 屬性設為 Base64 編碼字串，即可內嵌圖片：

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

雖然內嵌圖片可減少 HTTP 要求，但因這類圖片會大幅增加網頁大小，所以請謹慎考慮使用時機。如需詳細資訊，請前往我們的 web.dev 頁面，參閱「內嵌圖片的優缺點」一節。

對顯示速度和品質進行最佳化

比起模糊不清的圖片，高畫質相片較能吸引使用者的目光。此外，清晰的圖片在結果縮圖中更為吸睛，可提高使用者造訪您網站的機率。也就是說，在網頁的整體大小中，圖片往往占有最大的比例，並可能會導致網頁載入速度緩慢及產生高昂數據連線費用。請務必採用最新的圖片最佳化和回應式圖片技術，為使用者提供優質又快速的體驗。

您可以透過 PageSpeed Insights 分析網站速度，並參閱「速度的重要性為何」一文，瞭解改善網站效能的最佳做法和技巧。

對圖片到達網頁進行最佳化

雖然無法立即得知當下情況，但圖片嵌入網頁的內容和中繼資料，也會大幅影響圖片在 Google 搜尋結果中顯示的方式和位置。

檢查網頁標題和說明

Google 搜尋會自動產生標題連結和摘要，藉此概要說明各項結果的內容，以及這些結果與使用者查詢有何關聯。這可協助使用者決定是否要點擊某項結果。 以下兩個例子是標題連結和摘要在 Google 搜尋結果網頁上可能呈現的外觀：

這張插圖顯示圖片搜尋結果中的標題與說明

我們使用許多不同來源的內容以取得所需資訊，這當中也包括各個網頁的 title 和 meta 標記中的描述性資訊。

您可以根據 Google 的標題與摘要指南，協助改善 Google 圖片顯示的網頁標題連結和摘要。

新增結構化資料

只要加入結構化資料，Google 就能以複合式搜尋結果顯示您的圖片，包括在 Google 圖片中顯示醒目的標記。這種呈現方式除了能向使用者提供網頁相關資訊，還能為網站帶來更準確的目標流量。

請遵循結構化資料通用指南和各結構化資料類型的專屬規範，否則您的結構化資料可能會無法顯示在 Google 圖片的複合式搜尋結果中。無論是上述哪一種結構化資料類型，您都必須提供圖片屬性，才能在 Google 圖片中顯示標記和複合式搜尋結果。以下兩個例子是複合式搜尋結果在 Google 圖片中可能呈現的外觀：

這張插圖顯示複合式搜尋結果在 Google 圖片搜尋中的顯示方式

使用描述性的檔案名稱、標題和替代文字

Google 會從網頁內容擷取與圖片主題相關的資訊，包括說明文字和圖片標題。請盡可能將圖片放置在相關文字附近，並放在與圖片主題相關的網頁中。

同樣地，檔案名稱可讓 Google 透過非常細微的線索，推斷圖片的主題。請盡可能使用簡短明瞭的檔案名稱。舉例來說，my-new-black-kitten.jpg 就優於 IMG00023.JPG。請盡可能避免使用籠統的檔案名稱，例如 image1.jpg、pic.gif 和 1.jpg。如果您的網站中有數千張圖片，可以考慮為圖片採用自動命名機制。如要將圖片本地化，請記得翻譯檔案名稱。如果您使用非拉丁字元或特殊字元，也請務必遵循網址編碼規範。

為圖片提供較多中繼資料時，最重要的屬性為替代文字 (描述圖片的文字)，它也能協助看不到網頁中圖片的使用者 (包括使用螢幕閱讀器或網路連線速度偏慢的使用者) 瞭解圖片內容。

Google 會根據替代文字、電腦視覺演算法和網頁內容來瞭解圖片的主題。此外，如果您決定將圖片當做連結使用，就可以將圖片中的替代文字用做錨定文字。

撰寫的替代文字內容要實用、資訊豐富、包含適當關鍵字，且與網頁內容相關。請避免在 alt 屬性中加入大量關鍵字 (也稱為濫填關鍵字)，否則會對使用者體驗造成負面影響，並可能導致系統將您的網站判定為垃圾內容。

不佳的 alt 屬性 (缺少替代文字)：

<img src="puppy.jpg"/>

不佳的 alt 屬性 (濫填關鍵字)：

<img src="puppy.jpg" alt="puppy dog baby dog pup pups puppies doggies pups litter puppies dog retriever labrador wolfhound setter pointer puppy jack russell terrier puppies dog food cheap dogfood puppy food"/>

較佳的 alt 屬性：

<img src="puppy.jpg" alt="puppy"/>

最佳的 alt 屬性：

<img src="puppy.jpg" 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 圖片搜尋結果網頁中。 如何選擇不顯示內嵌連結：

  1. 在系統要求您的圖片時，檢查要求的 HTTP 參照網址標頭。
  2. 如果該要求是來自 Google 網域，傳回 200 HTTP 狀態碼或是表示沒有內容的 204 HTTP 狀態碼。

Google 還是會檢索網頁並看到該圖片，但是會在搜尋結果中顯示檢索時所產生的縮圖圖片。您隨時都可以設定不讓內嵌連結出現，而且不需重新處理網站的圖片。系統不會將這種行為視為偽裝，也不會導致人工判決處罰。

或者，您也可以完全不讓圖片出現在搜尋結果中。

安全搜尋是 Google 使用者帳戶中的一項設定，能夠指定是否要在 Google 搜尋結果中顯示、模糊處理，或封鎖煽情露骨的圖片、影片和網站。請確保 Google 瞭解您網站的性質，以便視情況為網站套用安全搜尋篩選器。進一步瞭解如何標示安全搜尋網頁。