[SEO] 圖片的最佳做法

2022-01-04 10:50:04

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

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

建立結構化資料

如果替網站增加結構化資料，也有助於搜尋引擎優化，google 圖片支援的結構化資料包含：

加快顯示速度

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

在 Google 圖片中，AMP 標誌可協助使用者瞭解哪些網頁可快速流暢地載入。請考慮將圖片所在網頁改成 AMP 網頁，藉此縮短網頁載入時間；所謂的圖片所在網頁，就是指使用者點擊 Google 圖片搜尋結果後前往的網頁。

可以透過 PageSpeed Insights 分析網站速度，瞭解改善網站效能的最佳做法和技巧。

使用高畫質圖片

使用清晰的圖片一定比模糊不清的好，不過也要考慮上面一點，不要讓圖片檔案過大。

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

讓圖片的文字敘述盡量距離圖片近一點，google 比較有辦法分析圖片的意義。

此外圖片的檔名也可以取的跟意思比較接近，比如 my-new-black-kitten.jpg 就會比 IMG00023.JPG 好，google 也建議可以的話在不同語系使用不同檔名。

使用敘述性替代文字

替代文字是用來描述圖片的文字，即為圖片的 alt 屬性，可協助看不到網頁中圖片的使用者 (包括使用螢幕閱讀器或網路連線速度偏慢的使用者) 瞭解圖片內容。

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，進而為圖片建立索引，Google 不會替 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，並針對 Google 本來可能不會發現的圖片提供圖片網址。

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

支援的圖片格式

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

回應式圖片

網頁會使用 <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>