Google 圖片搜尋引擎最佳化 (SEO) 的最佳做法
Google 提供多種搜尋功能和產品,協助使用者探索網路上的圖像資訊,例如文字搜尋結果圖片、Google 探索和 Google 圖片。雖然每個功能和產品看起來都不一樣,但要讓圖片顯示在其中的一般建議,則大致相同。
![這張插圖顯示 Google 搜尋結果、圖片分頁和「探索」中的圖片](https://developers.google.com/static/search/docs/images/images-on-google.png?hl=zh-tw)
如要讓圖片顯示在 Google 搜尋結果中,請按照下列最佳做法,對圖片進行最佳化調整:
協助我們找到您的圖片,並為其建立索引
如要在 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
。最好能夠使檔案名稱的副檔名與檔案類型相符。
您也可以將圖片內嵌為「資料 URI」。這是一種納入圖片等檔案的方法,只要按照下列格式將 img
元素的 src
屬性設為 Base64 編碼字串,即可內嵌圖片:
<img src="data:image/svg+xml;base64,[data]">
雖然內嵌圖片可減少 HTTP 要求,但因這類圖片會大幅增加網頁大小,所以請謹慎考慮使用時機。如需詳細資訊,請前往我們的 web.dev 頁面,參閱「內嵌圖片的優缺點」一節。
對顯示速度和品質進行最佳化
比起模糊不清的圖片,高畫質相片較能吸引使用者的目光。此外,清晰的圖片在結果縮圖中更為吸睛,可提高使用者造訪您網站的機率。也就是說,在網頁的整體大小中,圖片往往占有最大的比例,並可能會導致網頁載入速度緩慢及產生高昂數據連線費用。請務必採用最新的圖片最佳化和回應式圖片技術,為使用者提供優質又快速的體驗。
您可以透過 PageSpeed Insights 分析網站速度,並參閱「速度的重要性為何」一文,瞭解改善網站效能的最佳做法和技巧。
對圖片到達網頁進行最佳化
雖然無法立即得知當下情況,但圖片嵌入網頁的內容和中繼資料,也會大幅影響圖片在 Google 搜尋結果中顯示的方式和位置。
檢查網頁標題和說明
Google 搜尋會自動產生標題連結和摘要,藉此概要說明各項結果的內容,以及這些結果與使用者查詢有何關聯。這可協助使用者決定是否要點擊某項結果。 以下兩個例子是標題連結和摘要在 Google 搜尋結果網頁上可能呈現的外觀:
![這張插圖顯示圖片搜尋結果中的標題與說明](https://developers.google.com/static/search/docs/images/titles-descriptions-in-image-results.png?hl=zh-tw)
我們使用許多不同來源的內容以取得所需資訊,這當中也包括各個網頁的 title
和 meta
標記中的描述性資訊。
您可以根據 Google 的標題與摘要指南,協助改善 Google 圖片顯示的網頁標題連結和摘要。
新增結構化資料
只要加入結構化資料,Google 就能以複合式搜尋結果顯示您的圖片,包括在 Google 圖片中顯示醒目的標記。這種呈現方式除了能向使用者提供網頁相關資訊,還能為網站帶來更準確的目標流量。
請遵循結構化資料通用指南和各結構化資料類型的專屬規範,否則您的結構化資料可能會無法顯示在 Google 圖片的複合式搜尋結果中。無論是上述哪一種結構化資料類型,您都必須提供圖片屬性,才能在 Google 圖片中顯示標記和複合式搜尋結果。以下兩個例子是複合式搜尋結果在 Google 圖片中可能呈現的外觀:
![這張插圖顯示複合式搜尋結果在 Google 圖片搜尋中的顯示方式](https://developers.google.com/static/search/docs/images/structured-data-in-image-results.png?hl=zh-tw)
使用描述性的檔案名稱、標題和替代文字
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 圖片搜尋結果網頁中。 如何選擇不顯示內嵌連結:
- 在系統要求您的圖片時,檢查要求的 HTTP 參照網址標頭。
-
如果該要求是來自 Google 網域,傳回
200
HTTP 狀態碼或是表示沒有內容的204
HTTP 狀態碼。
Google 還是會檢索網頁並看到該圖片,但是會在搜尋結果中顯示檢索時所產生的縮圖圖片。您隨時都可以設定不讓內嵌連結出現,而且不需重新處理網站的圖片。系統不會將這種行為視為偽裝,也不會導致人工判決處罰。
或者,您也可以完全不讓圖片出現在搜尋結果中。
針對安全搜尋進行最佳化調整
安全搜尋是 Google 使用者帳戶中的一項設定,能夠指定是否要在 Google 搜尋結果中顯示、模糊處理,或封鎖煽情露骨的圖片、影片和網站。請確保 Google 瞭解您網站的性質,以便視情況為網站套用安全搜尋篩選器。進一步瞭解如何標示安全搜尋網頁。