Introduction
Google Image Search 提供了另類的搜尋選擇，畢竟圖像式的呈現總是比較吸睛，更能快速的找到所需的搜尋結果，非常適合用來搜尋特定的人、事以及商品上。往往一張圖便能替代千言萬語的描述，讓使用者可以在最短的時間 catch 到所需的資訊。
不過它一直都是屬於輔助類型的功能，畢竟在 keyword 鍵入的預設搜尋結果並不是 image search，需要使用者切換相關的 tab 才會進行搜尋結果切換，多一個 click 的動作，便隱含著更多不安定的因素，畢竟使用者可能在第一屏搜尋結果中便跳離了該頁面。
不過隨著 2019–7–25 Google Webmaster Central Blog 的一篇 announce 後，這樣的情況可能就大大的不同了
不過隨著 2019–7–25 Google Webmaster Central Blog 的一篇 announce 後，這樣的情況可能就大大的不同了
Helping publishers and users get more out of visual searches on Google Images with AMP
如上述文章所述，Google 將近年來獲得大成功的 AMP 也往 image search 堆了，讓使用者在使用 image search 的時候，也可以立即瀏覽相關的 AMP。這不僅僅的是使用者經驗的傳承，更是一股強大的 image search 助力！照以往經驗，AMP 在哪？Google 的推力就在哪？也因此，筆者不負責任的大膽猜測 — Image Search 將會是 Google 2019 的重點發展項目之一！！
如果您的服務對 image search 還不是很友善的話，現在正式進場的最好時機！反之，這亦是讓自家服務搜尋體驗好上加好的最好時間點，所以筆者透過自身實戰經驗要跟大家分享— 如何做到 Google Image Search Friendly。
Google Image Search
Google Image Search Flow
上圖呈現了 Google Image Search 的相關 flow，我們可看到使用者完成關鍵字搜尋且切換 tab 至「圖片」後，便可以看到滿滿的與搜尋關鍵字有關聯的圖片，點擊圖片後，如果該搜尋結果有 AMP 的替身的話，便如最右邊的呈現，會在頁面下方帶出相關的 AMP，只要使用者往上拖曳，便可以立即看到頁面呈現。
以上便是 Google Image Search 帶入 AMP 的實際呈現流程與效果。不僅相當有趣且非常的便利。
不過它一開始就會帶一點 AMP 的呈現在頁面上，筆者強烈懷疑這會造成 AMP pageview count 的虛累計﹙露出一點在頁面上會 fire pageview beacon﹚，倘若屬實，則成效衡量可能需要用其他資料輔助評斷。
Attitude about Google Search
很多人對於 Google Search 總有些迷思︰
不是希望能夠立竿見影馬上看到成效，就是怨天尤人，怪 Google search result page 的呈現不如預期。
對這種有時間性、需要被養成的資料來說，這些都是錯誤的觀念！我們無從得知 Google Search 會在什麼樣的情況使用什麼樣的資料做 render，Developers 可以做的只有一件事，那就是儘可能地提供完善且齊全的資料給 parser，一旦人家今天動念改了呈現，便不愁沒資料可用。
How to make Google Image Search Friendly ？
再繼續之前，有個先決條件必須要遵守，即是﹕
所使用的圖片必須要可以被 search parser access
如果連這點都做不到的話，那可以直接離開不必要再往下看了！！接下來我們將分幾個面向來看。
Structured data
每個頁面均會有主要的屬性，可以透過 schema.org 來查詢該 Type 是否有支援 image 屬性，如果有支援的話，那麼便透過這個屬性填入不同解析度的圖片供 search parser 來爬資料。
比方說筆者負責的服務是 commerce site，便可以利用 Product 這個 Type 來喂入相對應的 image。
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Product",
...
...
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
...
...
}
</script>儘量使用不同解析度的圖片至 image 屬性中 ，這樣 Google 什麼時候需要用到什麼樣解析度的圖片時，便不愁沒有資料了。
此外，圖片的部分則須注意其呈現的比例，請使用 1:1、4:3 或是 16:9 的比例， format 的部分則限制為 jpg / png / gif。
如果想設置高解析度的圖片的話，那麼最小檔案大小亦需超過 50k。
完成 structured data 設置後，也可以透過 Google 提供的驗證工具來測試資料的正確性。
HTML Structure
如果你希望頁面的 image 可以有效的 index 的話，那麼就請老老實實地使用 <img /> tag。
有些時候 web developers 為了方便，總會透過 CSS 或者 style 來裝飾頁面元素，也因此造成了 image 無法被 indexing。
<div
style="background:url(https://example.com/photo.jpg);"
>
this is a product's image.
</div>基本被封裝到 CSS 或是 style 中的圖片均會被 Google 認為是裝飾用元件，不具備 indexing 的價值，所以千萬不要為了切版便利就隨意地將圖片塞入 CSS 或者 style 中，想要 image 被 index 就乖乖地使用 <img /> tag。
除此之外，img[alt] 更是絕對不可或缺的元素之一，儘可能地用簡單的句子來介紹這張圖片，不僅可以讓 search parser 暸解圖片的主要意涵，更能有效地增進 accessability。
<img src="puppy.jpg" alt="Dalmatian puppy playing fetch"/>如上例，便是很好的範例，它藉由 alt 清楚地揭露的這張圖片的意涵，圖片檔案名稱亦是加分的因素之一。
千萬不要濫用 alt，如果胡亂塞入一些亂七八糟關鍵字 (keyword stuffing) 企圖混淆視聽時，可是有機會造成反效果喔！
<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"/>Sitemap
相信大家對於 sitemap 基本上都不陌生，它是 enhance SEO 的要素之一，屬於細水長流類型。清楚且明確的告知 search parser 哪些頁面是該服務的重點頁面。
對 sitemap 的組成還不是很清楚的朋友，亦可點擊下方連結進行一覽
使用 sitemap 有兩點需要特別注意﹕
- sitemap 所提交的 url 不可以超過 50,000 筆
- 解壓縮後的 sitemap 總檔案大小不可以超過 10M
Google 對於 Image Sitemaps 有明確定義，Developers 可以在 <url> 資訊中加入 <image> 做繫節，讓 search parser 可以明確知道該網址與 image 間的關係。
另外，要導入 Image Sitemap 前，XML 記得要先加入相對應的 Namespace
xmlns="http://www.google.com/schemas/sitemap-image/1.1"接下來我們來看看相關的 model﹕
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
<url>
<loc>http://example.com/sample.html</loc>
<image:image>
<image:loc>http://example.com/image.jpg</image:loc>
<image:caption>your image caption</image:caption>
<image:title>your image title</image:title>
</image:image>
<image:image>
<image:loc>http://example.com/photo.jpg</image:loc>
<image:caption>your image caption</image:caption>
<image:title>your image title</image:title>
</image:image>
</url>
</urlset>如上所示，image 亦可以做複數呈現，<image:loc /> 為必填欄位，揭露了圖片的路徑，<image:caption />、<image:title />、<image:geo_location /> 以及 <image:license />則是選配，如同 structured data，訊息揭露得愈加完整，便不愁 Google 拿不到資料來 render。
完成 sitemap 的提交後，亦可以透過 Google Search Console 來驗證 sitemap 的正確性。
以上便是 Make Google Image Search Friendly 的三部曲，優先級別如本文的鋪陳由上而下決定，不管如何？Endpoint Page 的 structured data 絕對需要設置，HTML Structure 則可由平日的訓練與經驗養成。
完成上述三部曲後，Web developers 便可輕輕鬆鬆因應 Google Search 所帶來的任何衝擊與改變，是的！我們已經準備好了！！
