Google 圖片最佳做法

Google 圖片可用來探索網路上的圖像資訊。使用者可透過圖片說明文字、醒目的徽章和 AMP 結果等新功能,取得更多與圖片相關聯的內容,藉此快速探索網路上的資訊。

只要提供更多圖片關聯內容,就能讓搜尋結果更加實用,進而為您的網站帶來品質更高的流量。您可以將您的圖片和網站針對 Google 圖片進行調整,協助使用者探索網路上的資訊。如果您想讓自己的內容更有機會顯示在 Google 圖片搜尋結果中,只要按照本指南的指示操作即可。

選擇不讓圖片搜尋結果顯示內嵌連結

選擇不讓 Google 圖片搜尋結果顯示內嵌連結,就能避免讓原尺寸的圖片出現在 Google 圖片搜尋結果網頁中。

如何選擇不讓內嵌連結出現:

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

Google 還是會檢索您的網頁並看到該圖片,但是會在搜尋結果中顯示檢索時所產生的縮圖圖片。您隨時都可以設定不讓內嵌連結出現,而且不需重新處理網站的圖片。系統不會將這個行為視為圖片偽裝手法,也不會因此引發專人介入處理行動。

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

創造絕佳的使用者體驗

如要提高您的內容在 Google 圖片中的曝光率,請以使用者為重,提供絕佳的使用者體驗:網頁製作的重心是滿足使用者,而不是搜尋引擎。以下提供幾個訣竅:

  • 提供優質關聯內容:確保您的視覺內容與網頁主題相關。建議您只顯示能讓網頁具有原創性的圖片。我們尤其不鼓勵在網頁中使用非原創的圖片或文字。
  • 選擇最佳顯示位置:盡可能將圖片放置在相關文字附近,而且只要合理的話,請考慮將最重要的圖片放置在網頁頂端。
  • 不要在圖片中嵌入重要文字:避免在圖片中嵌入文字 (尤其是網頁標頭和選單項目等重要文字元素),原因是並非所有使用者都可存取這類文字,且網頁翻譯工具並不支援圖片。為了盡可能讓更多人存取您的內容,請透過 HTML 加入文字,並為圖片提供替代文字。
  • 建立包含豐富資訊的優質網站:網頁上的優質內容和 Google 圖片上的視覺內容同等重要;前者可提供關聯內容,讓結果更加實用。網頁內容可用來產生與圖片相關的文字摘要,且 Google 會根據網頁內容品質為圖片排名。
  • 建立適合透過裝置瀏覽的網站:相較於電腦,使用者較常在行動裝置上使用 Google 圖片進行搜尋。因此,請務必將網站設計成適合透過所有類型和大小的裝置瀏覽行動裝置相容性測試工具可讓您測試網頁在行動裝置上的運作效能,並提供修正建議。
  • 為圖片建立良好的網址結構:Google 會使用網址路徑和檔案名稱來瞭解您的圖片。請試著組織您的內容,以有邏輯的方式來架構網址。

檢查網頁標題和說明

Google 圖片會自動產生標題和摘要,藉此概要說明各項結果的內容,以及這些結果與使用者查詢有何關聯。這可協助使用者決定是否要點擊某項結果。

這些資訊來自不同的來源,其中一項是每個網頁中繼標記和標題中的描述性資訊。

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

新增結構化資料

只要加入結構化資料,Google 圖片就能以複合式搜尋結果 (包括醒目的徽章) 顯示您的圖片,為使用者提供與您的網頁相關的資訊,同時為您的網站帶來更高的目標流量。Google 圖片支援下列類型的結構化資料:

請遵循一般結構化資料指南和您結構化資料所屬類型的專屬規範,否則您的結構化資料可能會無法顯示在 Google 圖片的複合式搜尋結果中。無論是上述哪一種結構化資料類型,您都必須提供圖片屬性,才能在 Google 圖片中顯示徽章和複合式搜尋結果。

加快顯示速度

在網頁的整體大小中,圖片往往佔有最大的比例,並可能會導致網頁載入速度緩慢及產生高昂數據連線費用。請務必採用最新的圖片最佳化回應式圖片技術,為使用者提供優質又快速的體驗。

在 Google 圖片中,AMP 標誌 可協助使用者瞭解哪些網頁可快速流暢地載入。請考慮將圖片所在網頁改成 AMP 網頁,藉此縮短網頁載入時間 (在這種情況下,目標網頁是使用者點擊 Google 圖片中的結果後所連到的網頁)。

您可以透過 PageSpeed Insights 分析網站速度,並前往網站基礎知識網頁瞭解改善網站效能的最佳做法和技巧。

新增高畫質相片

比起模糊不清的圖片,高畫質相片較能吸引使用者的目光。此外,清晰的圖片在結果縮圖中更為吸睛,可提高使用者造訪您網站的機率。

為圖片加入描述性標題、說明文字、檔案名稱和文字

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

同樣地,檔案名稱有助於 Google 推斷圖片的主題。舉例來說,my-new-black-kitten.jpgIMG00023. 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="Dalmatian puppy playing fetch"/> 

建議您進行無障礙程度稽核作業,並使用模擬器來模擬網路連線速度緩慢的情形,藉此測試您的內容。

協助我們找出您的所有圖片

為圖片使用語意標記

Google 會剖析網頁的 HTML,進而為圖片建立索引,但請注意,我們不會替 CSS 圖片建立索引。

  • 較佳的做法: <img src="puppy.jpg" alt="A golden retriever puppy" />
  • 不佳的做法: <div style="background-image:url(puppy.jpg)">A golden retriever puppy</div>

使用圖片 Sitemap

圖片是系統判斷網站內容為何的重要資訊來源。您可以在圖片 Sitemap 中新增資訊,藉此將圖片的額外詳細資料提供給 Google,並針對我們本來可能不會發現的圖片提供圖片網址。

一般 Sitemap 會強制實行跨網域限制,但圖片 Sitemap 不同,由於可包含其他網域的網址,因此網站管理員可使用 CDN (內容傳遞聯播網) 來代管圖片。建議您透過 Search Console 驗證 CDN 的網域名稱,這樣我們就能在發現任何檢索錯誤時通知您。

支援的圖片格式

Google 圖片支援下列圖片格式:BMP、GIF、JPEG、PNG、WebP 和SVG。

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

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

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

回應式圖片

由於使用者可以透過各種不同裝置存取回應式圖片網頁,因此採用這類網頁設計能為使用者提供更優質的體驗。如要瞭解回應式網站上的圖片處理最佳做法,請參閱網站基礎知識網頁的「圖片」一文

網頁會透過 <img srcset> 屬性或 <picture> 元素來指定回應式圖片。不過,部分瀏覽器和檢索器並沒有辦法解讀這類屬性,因此建議您一律使用 img src 屬性來指定備用網址。

如要針對不同螢幕尺寸,為同一張圖片指定不同大小的圖片版本,則可使用 srcset 屬性。

範例:<img srcset>

<img srcset="example-320w.jpg 320w,
             example-480w.jpg 480w,
             example-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="example-800w.jpg" alt="responsive web!">

<picture> 元素是一種可用來為相同圖片歸類不同 <source> 版本的容器。這個標記提供了一種備用做法,讓瀏覽器能根據裝置功能 (例如像素密度和螢幕尺寸) 選擇適當的顯示圖片。如果用戶端尚未支援新圖片格式,picture 元素也能透過內建的優雅降級功能,適時提供其他可用的圖片格式以便顯示圖片。

我們建議您在使用 picture 標記時,一律按照以下格式提供帶有 src 屬性的 img元素做為備用做法:

範例:<picture>

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp"> 
  <img src="pyramid.png" alt="large PNG image...">
</picture>

針對安全搜尋進行調整

安全搜尋是您帳戶中的一項設定,可讓您指定是否要在 Google 搜尋結果中顯示或封鎖煽情露骨圖片、影片和網站。請協助 Google 瞭解您圖片的本質,以便在適當情況下將安全搜尋設定套用到您的圖片。

使用常見網址位置將成人限定圖片另外歸類

如果您的網站包含成人圖片,我們強烈建議您將這類圖片與網站上的其他圖片歸為不同類別,例如:http//www.example.com/adult/image.jpg。

在成人網頁中新增中繼資料

如果使用者已開啟安全搜尋篩選器,我們的演算法就會根據多種訊號,判定是否要將某張圖片或某個網頁從搜尋結果中濾除。就圖片而言,部分訊號是透過機器學習技術產生,但安全搜尋演算法也會考量較單純的因素,例如先前在哪些地方使用過圖片以及使用時的情境。

其中一種最強的訊號是自行標示的成人網頁。如要發布成人內容,建議您在網頁中新增下列其中一種中繼標記:

<meta name="rating" content="adult" />
<meta name="rating" content="RTA-5042-1996-1400-1577-RTA" />

許多使用者 (特別是與子女使用相同裝置的使用者) 不希望搜尋結果中出現成人內容。如果您提供上述其中一種中繼標記,使用者就不會看到不想看到或意料之外的結果,進而享有更優質的體驗。

最後…

請詳閱我們的搜尋引擎最佳化 (SEO) 入門指南,其中包括許多實用資訊,可協助您改善排名。如有其他問題,歡迎前往網站管理員說明論壇提出。

這對您有幫助嗎?
我們應如何改進呢?