為什麼要優化圖片
除了我們經常使用的網頁搜尋，Google的”圖片搜尋”功能也是各企業的兵家必爭之地。雖者使用者搜尋習慣變化及Google技術的進步，”以圖搜圖”、”相機拍攝搜尋”等功能都有可能成為未來使用者的主要工具之一。
而提早優化圖片可以有以下的優勢
- 對自然搜尋有更好的影響
- 圖片加載速度變快
- 有機會提高圖片搜尋的排名
因此我強烈推薦各位具有圖片優化的基礎觀念，未來在針對網頁修改或優化時，將會有更好的方向可以進行。
應該如何優化圖片排名
◆圖片置入方式及檔案類型
Google 圖片目前支援以下格式的圖片： BMP、GIF、JPEG、PNG、WebP 和 SVG 。
而將圖片放置於網頁的方式有很多種，一般來說會建議各位用最簡單遷入方式，對於Google來說是最好檢索的方法(如下表所示)。
⭕ <img src=”dogfeed.png”>
但有些網站會使用CSS方式將圖片放置在區塊的背景之中，這將是一個很不好的示範，Google無法正確讀取圖片檔案，進而無法顯示在搜尋結果中。
❌<div style=”background-image:XXX”>
◆增加alt
在<img>標籤中有一個名叫alt的屬性，最初是協助看不到網頁中圖片的使用者，顯示alt內的文字，或是藉由其他工具念出內容，讓使用者了解該區塊原本應該存在什麼圖片。而Google現在也會藉由alt屬性，協助判斷該圖片的主要含意是什麼，因此建議各位上架圖片時，可以順手增加該代碼。
假設該頁面中含有介紹了狗飼料的圖片，則會建議alt中適當增加關鍵字及其敘述如以下撰寫
⭕<img src=”dog_feed.png” alt=”好吃的狗飼料”>
⭕<img src=”dog_feed.png” alt=”滿足狗狗一天營養所需的狗飼料”>
但如果是項以下方式填寫過多關鍵字，則是一個不好的示範
❌<img src=”dog_feed.png” alt=”狗飼料、好吃的狗飼料、健康狗飼料、美味狗飼料、便宜狗飼料、狗飼料推薦”>
◆減少圖片大小
依照pagespeed使用經驗，建議單張圖片大小最多不可以超過400kb以上，否則將會對FCP、LCP等網頁載入指標有較大的影響。若是可以將圖片大小壓縮在100~200kb內，對於圖片畫質及SEO效果來說會是最好的平衡點。
◆在圖片周圍寫內容
除了上面的alt，Google也會藉由圖片周圍的文字來判斷該圖片的主要含意，因此建議各位若頁面上或是文章中有重要的圖片，可以在圖片下方撰寫註解，也是一個不錯的小方法。
◆圖片內不要放文字
在圖片內的文字對於Google來說，不像人眼一樣可以一看就懂，需要耗費更多的資源來判斷外，也有可能直接忽略該圖片。
像是電商網站中，經常會將商品文宣放置在圖片中，這對於SEO優化中是一個非常可惜的方式。因此建議各位盡量不用再圖片中放文字，或是仿照上個方式，在圖片周圍加上圖片文宣的補充說明，對於圖片SEO來說是一個很好的改進方法。
◆修改檔案名稱
檔案名稱也是判斷圖片內容的一個細節，如以下範例，若上架照片前可以些改好圖片名稱，對於圖片排名有好處外，未來尋找圖片時也將更方便。
⭕<img src=”dog_feed.png”>
❌<img src=”FDGHJKOIUYTTF.png”>
◆增加圖片載入速度
圖片的載入速度除了影響排名之外，也會影響使用者的體驗、圖片的檢索速度等等，因此各位可以參考以下方案，減少圖片的大小或載入時間，將有助於SEO的競爭力。
- 使用檔案容量較小的格式，如：webP、ipg
- 藉由網路上的工具，在圖片不失真的狀況下壓縮圖片
- 提供RWD響應式圖片，在不同的設備上載入不同大小的圖片，對於小螢幕的設備，可以有效減少需要載入的資料
◆圖片sitemap
圖片sitemap就跟普通的sitemap一樣，藉由收錄網站內所有圖片的網址，提供Google一個良好的清單來檢索圖片，同時讓Google發現一些難以被找到的圖片。
建議讀者可以參考Google圖片sitemap範例，或是利用網站內建的外掛程式，為網站新添加一個sitemap。
◆新增結構化資料
關於結構化資料，各位可以看看另一篇結構化資料(Schema)是什麼？利用複合式搜尋結果提高SEO效力！。
目前Google支援圖片的結構化資料有以下三種
遵照Google的步驟為各頁面添加結構化資料，並加上”image”的屬性，可以加深Google對於該圖片的理解及重要度的判斷喔！
看完了這麼多，我想你對圖片優化已經有了一定的了解，如果喜歡我的文章，或是未來想要了解更多關於SEO的消息，請關注我的網站，我會努力將各種知識分享給各位:)
Last Updated on 22 2 月, 2024 by 己見室
