Shopify 產品圖片優化以在Google Image中擁有“Product”標記並獲得更好的排名

上週 Google Image在PC端完成了一次更新 之後，我們如期在PC端的Google Image也可以看到圖片上添加的“產品標籤”了。這對我們Shopify網站來說，算是一個利好消息吧。爲什麼呢？看一個數據你就明白了 – 在Jumpshot 和 SparkToro 聯合發佈的2019年第二季度美國搜索引擎市場份額數據報告顯示，Google Image 僅次於Google Search 位居第二。

這裏需要注意的是，上面的報告只統計了通過瀏覽器訪問搜索服務的數據，而沒有統計APP內的數據。比方說，該數據統計沒有計算到Youtube手機客戶端的搜索次數，使用次數，因此，可能Youtube的佔比會更高。圖片左下角文字說明如下

“Data from 230 Billion browser-based searches on millions of mobile and desktop devices in the United States. Search star on Google Maps, Facebook, Amazon, Youtube, Twitter and Pinterest are likely underrepresented due to heavy mobile app use”。

不過就我們所理解的“純粹的搜索引擎”分析來說，Google Images 的實力還是碾壓 Yahoo，Bing，DuckDuckGo 等等其他搜索引擎的。

Google Image 在這次更新之後，用戶在使用谷歌圖片搜索的時候，就會出現如下圖所示的產品標籤。當點擊某個圖片之後，用戶可以直接在Google Image搜索結果中查看產品的品牌，價格，評價，庫存等結構化數據信息。點擊圖片，品牌名稱或者標題可以直接跳轉到產品頁面購買產品。

而在移動端，Google Image 顯示的內容則要更豐富，更有號召力一些。如下圖所示，在搜索結果頁面，Images 的篩選條件中有 Product 可以選擇，也就是客戶搜索某類關鍵詞之後，可以點擊“Product”標籤，只看可以購買的所有產品圖片。點擊某個圖片之後展示的信息和PC端一樣會展示富媒體內容，如標題，描述，價格，品牌，評價，庫存等等信息，而且，更重要的是有一個“Call to Action” 按鈕 “Visit” 引導客戶點擊到網站頁面進行購買。

那麼問題來了

1. 如何讓我們自己獨立站的產品圖片在Google Image中也擁有“Product”標籤？
2. 如何讓我們的產品圖片在Google Image搜索結果頁面中擁有更高的排名？

爲網頁添加結構化數據，讓Google Image爲圖片添加“產品”標記

首先要讓我們的獨立站產品在Google Image中擁有Product標籤，那麼你的產品頁面必須可以爲Google提供結構化數據。你只需要知道有“結構化數據” Rich Snippet 這個東西就行了，你要做的，可以先用Google提供的“富媒體搜索結果測試工具”測試下你的網頁目前是否能夠“顯示富媒體搜索結果”。

如果可以，那麼就要考慮第二個問題 – 如何讓你的產品圖片獲得更高的排名。如果不行的話，你可以爲你的Shopify店鋪換一個新的支持Rich Snippet的Shopify主題，或者安裝一個類似“Smart SEO”的應用實現這一功能。具體實現方法見 – 使用工具測試你的網站是否支持富媒體搜索結果

優化 Shopify 產品圖片讓它們在 Google 中獲取更好的排名

以下是來自Google官方對圖片優化，以獲得更好排名的若干建議 （節選了部分我個人覺得比較重要的建議）原文完整版鏈接地址 support.google.com/webmasters/answer/114016

要想提升您的內容在 Google 圖片中的曝光度，請以提供出色的用戶體驗爲原則：在設計網頁時主要考慮用戶，而非搜索引擎。以下是一些建議：

• 提供適當的相關信息：確保您的視覺內容與其所在網頁的主題相關。我們建議您僅在能爲網頁增添原創價值的情況下展示圖片。我們極不贊成在網頁中完全使用非原創的圖片和文字內容。
• 優化放置位置：儘可能將圖片放置在相關文字附近。必要時，也可考慮將最重要的圖片放置在網頁頂部附近。
• 勿將重要文字內嵌在圖片中：避免將文字（特別是網頁標題和菜單項等重要的文字元素）內嵌在圖片中，因爲並非所有用戶都能訪問這類文字（而且網頁翻譯工具不適用於圖片）。爲了儘可能讓更多的人能訪問您的內容，請使用 HTML 格式提供文本，併爲圖片提供替代文本。
• 創建信息豐富的優質網站：對 Google 圖片而言，優質的網頁內容與視覺內容同等重要 – 它可以提供背景信息並更能吸引用戶點擊搜索結果。網頁內容可用於爲圖片生成一段文本摘要，而且 Google 在進行圖片排名時會考慮對應的網頁內容質量。
• 創建適合在各種設備上訪問的網站：比起桌面設備，用戶更多地使用移動設備在 Google 圖片上進行搜索。因此，有必要設計一個適合所有設備類型和尺寸的網站。請使用移動設備適合性測試工具測試您的網頁在移動設備上的運行效果，並獲取反饋以瞭解哪些內容需要修正。
• 爲圖片創建良好的網址結構：Google 會藉助網址路徑以及文件名來理解您的圖片。我們建議您好好組織圖片內容，以使網址結構合乎邏輯。

檢查網頁標題和說明

Google 圖片會自動生成標題和摘要，以充分描述每條結果並表明相應結果與用戶查詢有何關係。這可幫助用戶決定是否要點擊某條搜索結果。我們會使用很多不同的來源生成此信息，例如標題中的描述性信息以及每個網頁的元標記。（在Shopify獨立站中，產品編輯頁面中的SEO Title，Meta Description是Google生成標題和摘要信息的重要來源，但不是唯一來源）

添加結構化數據

如果您添加了結構化數據，Google 圖片就能以富媒體搜索結果的形式（包括使用醒目標記）展示您的圖片，這種做法不僅爲用戶提供與您的網頁相關的信息，還能爲您的網站帶來更有針對性的流量。（對Shopify獨立站賣家來說，實現方法很簡單，要麼使用支持結構化數據的主題，要麼安裝相關的應用來實現）

優化網站速度

圖片通常是影響整體網頁大小的最大因素，可能會導致網頁在加載時既速度緩慢又開銷巨大。請務必採用最新的圖片優化技術和自適應圖片技術，以提供優質且高速的用戶體驗。您可以使用 PageSpeed Insights 分析網站的速度，並訪問我們的“網站開發基礎”頁面以瞭解與如何改善網站性能相關的最佳做法和技術。 （對Shopify賣家來講，要關注的，就是在圖片文件大小和圖片清晰度上找到一個平衡，既能夠保證網頁打開速度夠快，又要提供足夠清晰的圖片激起用戶的購買慾望。至於Google提到的最新的圖片優化技術和自適應圖片技術，這點Shopify以及主題的開發者已經幫我們搞定，例如，我們上傳到Shopify服務器的JPG圖片會根據客戶的瀏覽器自動切換成表現更優秀的WebP格式的圖片，以保證更快的網站打開速度）

添加高畫質圖片

與模糊不清的圖片相比，高畫質圖片對用戶更有吸引力。另外，搜索結果略縮圖中的清晰圖片也更能吸引用戶，因而可以提高獲取用戶流量的可能性。 （還是上面提到的，對Shopify獨立站賣家來說要考慮的，就是如何在圖片文件大小和圖片畫質上找到一個平衡點，既能保證網站的打開速度夠快，又能爲客戶提供高清圖片提高網站轉化率）

爲圖片添加描述性的標題、說明、文件名和文字

Google 會從圖片所在網頁的內容中提取與圖片主題有關的信息（包括圖片說明和圖片標題）。請儘可能確保將圖片放置在與其相關的文字附近以及與其主題相關的網頁上。同樣，Google 也可通過文件名推斷圖片的主題。例如，my-new-black-kitten.jpg 比 IMG00023.JPG 更適合作爲文件名。

使用描述性的替代文本 ALT標籤

替代文本是一段描述圖片的文本，可協助看不到網頁中圖片的用戶（包括使用屏幕閱讀器或網絡連接帶寬偏低的用戶）瞭解圖片內容Google 會結合使用替代文字與計算機視覺算法和頁面內容來理解圖片的主題。如果您決定將圖片用作鏈接，圖片的替代文本還可作爲定位文字。

在選擇替代文本時，請創建實用、信息豐富的內容，並且內容要恰當使用關鍵字且與網頁內容相符。請避免在 Alt 屬性中濫用關鍵字（關鍵字堆砌），因爲這會導致不良的用戶體驗，並且可能會導致您的網站被視爲垃圾網站。

效果欠佳（缺少替代文本）：

<img src="puppy.jpg"/>

效果欠佳（關鍵字堆砌）

<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"/>

效果較佳：

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

效果最佳

<img src="puppy.jpg" alt="Dalmatian puppy playing fetch"/>

支持的圖片格式

Google 圖片支持以下格式的圖片：BMP、GIF、JPEG、PNG、WebP 和 SVG。

另外在neilpatel.com，Moz.com，以及Ahrefs.com關於如何優化圖片在Google Image獲得更好排名的內容中，除了Google官方說到的幾點之外，還提到了以下圖片優化建議：（個人建議深度閱讀下MOZ和AHREFS關於圖片優化的內容）

• 儘可能使用原創圖片，而不是網上已有的圖片
• 爲圖片添加美觀的水印說明版權
• 爲圖片添加caption（Caption就是圖片圖片說明，如上圖下方文字說明“圖片來自於Ahrefs – Image SEO”就是該圖片的Caption，Shopfiy系統默認只有ALT標籤，是沒有直接添加圖片Caption的地方的，需要自己在HTML代碼中標註Caption內容。Wordpress/Woocommerce在上傳圖片的時候是可以直接添加圖片的ALT，Title，Caption，Description等等內容的）
• 圖片被點擊次數 (意思就是提供高清圖片增加被點擊的機率來獲取更高排名)
• 使用CDN爲圖片加速 （Shopify所有網站內容資源都是使用CDN服務的，不需要我們任何操作）
• 考慮使用 lazy loading的方式加載圖片以提高網站打開速度。（我見過大部分Shopify主題都是支持Lazy Loading的，如Themeforest上的Ella，在主題特色中就明確寫了主題支持Lazy Loading Image功能，如果你的主題不支持，那麼可以考慮相關的App）
• 向Google提交Image Sitemap （我查看了下自己的Shopify網站的Sitemap，如Image Sitemap這個APP所說，Shopify系統提供的Sitemap中只有產品第一張產品圖片的鏈接-如下圖所示，你可以通過安裝插件的方式爲你網站的所有圖片生成Image Sitemap然後提交給Google Webmaster加快所有產品圖片的收錄速度）