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

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

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

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

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

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

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

使用 HTML 圖片元素嵌入圖片

使用標準 HTML 圖片元素可協助檢索器找到及處理圖片。Google 會剖析網頁上的 HTML <img> 元素 (即使這些元素位在其他元素 (例如 <picture> 元素中) 中),進而為圖片建立索引,但不會為 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 圖片支援以下格式的圖片: BMP、GIF、JPEG、PNG、WebP 和 SVG 。最好能夠使檔案名稱的副檔名與檔案類型相符。

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

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

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

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

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

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

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

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

檢查網頁標題和說明

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

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

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

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

新增結構化資料

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

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

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

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

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

同樣地,檔案名稱可讓 Google 透過非常細微的線索,推斷圖片的主題。請盡可能使用簡短明瞭的檔案名稱。舉例來說,my-new-black-kitten.jpg 就優於 IMG00023.JPG。請盡可能避免使用籠統的檔案名稱,例如 image1.jpgpic.gif1.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 瞭解您網站的性質,以便視情況為網站套用安全搜尋篩選器。進一步瞭解如何標示安全搜尋網頁