在 Google自訂搜尋引擎中顯示 WordPress的精選圖片

有些時候為了節省伺服器的資源、讓 Google自訂搜尋引擎顯示廣告帶來收入或提供更多元的搜尋方式與結果，你可能會將 WordPress網站的內建搜尋改為使用 Google自訂搜尋（Google Custom Search Engine，Google CSE，現稱 Google Programmable Search Engine，但為了方便下面還是稱 CSE）並提供給訪客。Google CSE偶爾會在搜尋結果中帶出搜尋結果頁面的精選圖片，但有些文章明明設定了但又不出現，這個時候你可以參考以下的做法，就能讓 Google在檢索你的網站和使用 Google CSE的時候帶出精選圖片囉！

Google CSE實際上有針對顯示圖片的方法做了說明，不過沒有中文版的，如果你要參考原始的說明以及更加詳盡的參數，可以前往這裡

要在 Google CSE中顯示 WordPress精選圖片，會需要在你的網站原始碼中加入一些代碼，開始實做之前建議你可以先做一個網站或主題的備份，也建議你要使用子佈景主題！使用子佈景主題可以讓你安心地修改，不必擔心改壞或主題更新時原本的修改被移除。關於子佈景主題，你可以參考這裡

要在 Google CSE中加入精選圖片有兩個方法，一個是 PageMaps，一個是 Meta Tag；Meta Tag對於網站管理員應該算是熟悉，PageMaps則比較少見，兩項各有其優點，我們可以從 PageMaps開始認識：

PageMaps is a structured data format that Google created to enable website creators to embed data and notes in their webpages. Although the structured data isn’t visible to your users, and doesn’t impact your site’s listing in Google Web Search results, Custom Search recognizes it and can use it to add elements such as actions or custom attributes to search results pages.
《Google – PageMaps – Programmable Search Engine Help》

簡單來說，PageMaps也是一種結構化資料，是 Google讓網站管理員（你）可以將一些資料嵌入在網頁中；雖然這些資料使用者看不到且不影響網頁排名，但是自訂搜尋卻可以辨認這些元素，並提供特定的動作。

一、加入顯示精選圖片的代碼

開啟你的 WordPress網站並登入控制台
點選左邊「外觀」>「佈景主題編輯器」
從右側的選單選取正在使用的子佈景主題，然後按下「選取」
這時候列出來的檔案中，請找到「header.php」或標示為「佈景主題頁首」的檔案點一下
在左邊的原始碼中按下「Ctrl + F」開啟搜尋，搜尋 </head> ，我們要將下個步驟的代碼放在網頁原始碼的頭部中
複製下面這串代碼並貼在 </head> 之前。width 的地方表示圖片的寬度，height則為高度；如果你的圖片沒有固定的比例，你可以試著設定正方形或是多數圖片的比例尺寸。特別注意的是，不要把註解的符號<!–和–>刪除！接著按下左下角的更新檔案。

<!--
<PageMap>
<DataObject type="thumbnail">
<Attribute name="src" value="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>"/>
<Attribute name="width" value="100"/>
<Attribute name="height" value="100"/>
</DataObject>
</PageMap>
-->
<meta name="thumbnail" content="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>" />

二、清理 WordPress 快取

當你完成以上步驟後，要記得清理網站的 Cache 快取暫存檔，這樣 Google重新來檢索網頁的時候才會找到新的代碼；如果你有使用 CDN，例如 Cloudflare，也記得要清理 CDN的快取。

三、測試效果

方法 A
你可以前往 Google CSE的控制台或是在你的 WordPress網站前台測試 Google CSE搜尋時是否有帶出精選圖片。
方法B
點開任一篇文章後，滑鼠「右鍵」>「檢視網頁原始碼」，按下 Ctrl + F 搜尋 <PageMap>
如果在你的網頁原始碼中找到了這段，並且在 <Attribute name=”src” value=”圖片網址” /> 看到正確的圖片網址以及 <meta name=”thumbnail” content=”圖片網址 /> ，那麼表示你的設定正確。

設定正確但還看不到精選圖片的原因可能為，

Google還沒有將帶有 PageMap代碼的新版網頁收錄解析，通常你可以等候幾天或是透過 Google Search Console提交網頁變更後，再試試
前往 Google CSE控制台，「外觀和風格」> 「縮圖」，確認已經將「搜尋結果中的自動縮圖」功能開啟。
確認該篇文章已經設定了精選圖片

四、意外的情況，找不到 PageMap的代碼，但是 Meta Tag代碼還在

在 WordPress快取外掛中使用了移除註解或是壓縮HTML的功能。如果你在 WordPress快取外掛中啟用了類似的功能，那麼 PageMap這段程式碼可能被移除。這樣 Google就不會找到這段程式碼和應該要帶入的圖片了。
解決方法：關閉 WordPress快取外掛的移除註解功能
如果有使用 Cloudflare CDN的情況，那麼在 Speed 的 Optimization 中有一個 Auto Minify，這裡的 HTML也會把註解刪除。
解決方法：關閉 Auto Minify 的 HTML

理論上，雖然 PageMap代碼被移除，但我們還是有新增 Meta Tag的版本，所以應該還是可以正常顯示。顯示的方式就會像下面這樣，這是我以我的另一個網站作為示範；如果文章有設定精選圖片就會像第一個搜尋結果，沒有設定就會像第二個結果。

五、題外話

既然 PageMap可能被移除，又有 Meta Tag版本可以使用，為什麼要用 PageMap呢？如同 Google的說明，這個結構化資料是給 Google CSE看的，所以它有開發一些特定的參數與功能可以使用，例如可以在搜尋結果中下載檔案…等，這個部分你可以前往 Google的說明來參考。

以上就是在 Google 自訂搜尋中顯示 WordPress網站搜尋結果頁精選圖片的方法！