人們的搜尋習慣是千變萬化的，而現代人喜歡看圖片的特性，讓圖片seo的重要性漸漸增加，讀完本篇文章，你將會知道：

1.為什麼圖片很重要？

2.圖片規劃的注意事項是什麼？

3.圖片seo優化的十個步驟

現在，就讓我們來看看圖片seo到底要怎麼做。

為什麼圖片很重要？

在文章中適時的放入圖片，能讓一篇字滿滿的文章更好閱讀，有時候想解釋一些事情，可能一張圖片就勝過千言萬語，圖片既好懂，又能讓讀者的閱讀體驗變得更好，好處多多！

有時，與其搜尋文字內容，人們甚至更傾向搜尋圖片，例如在Google上搜尋「髮型2020」這個關鍵字，會發現圖片的搜尋結果會擺在最前面的位置。

關鍵字「髮型2020」的搜尋結果有大量圖片，代表人們喜歡點擊圖片找尋答案。

在建立內容之前，不仿先調查一下人們的搜尋喜好，查查看目標關鍵字是否有大量圖片的搜尋結果，將這樣的搜尋結果作為內容規劃的考量點。

圖片規劃的注意事項

在規劃圖片時，建議也把圖片seo需注意的事情納入考量，以下提供三點注意事項：

1.重要文字不要用圖片呈現

Google曾表示：「尤其是網頁標題和選單項目等重要文字元素，因為並非所有使用者都可存取這類文字，且網頁翻譯工具並不支援圖片。」

但有時還是會加文字在圖片上以增加閱讀性，所以依筆者的理解，這裡指的是不要只用圖片呈現重要文字（例如目錄只用圖片呈現，沒有文字）。

2.請創造獨一無二的圖片

如果你的網頁上的圖片全部都來自網路上圖庫，你可能要考慮換張圖片了，Google的John Mueller曾表示：「有自己設計、拍出、獨特的圖片在你的網頁上，不僅是很好的品牌推廣方式，而且很有可能對SEO有幫助。」

但John Mueller也表示：「更換圖片不會對排名有非常直接的影響，但仍是可優化的一件事情。」

也就是說，不要期待更換圖片後，排名會馬上直線上升，但這仍是眾多SEO可做事項的其中一件，至少，這對你的品牌獨特性及推廣會有正面的影響。

3.圖片「需要」與主題相關

不要為了加圖片而加不適當的圖片，圖片必須與內容高度相關，或是具有讓內容更易懂的效果。

圖片seo優化步驟

第一步：知道圖片最大寬度

拿 Gogo Partners 的部落格來說，你會看到文章只有顯示在中間偏左的位置，而圖片也與文章一樣，完全貼齊紅線的寬度，這表示，你上傳再大的圖片，都不會超過這個寬度，這也表示，不論螢幕大小，圖片都不會超過這樣的寬度。

但是，如果你上傳超過這個寬度的圖片，瀏覽器還是會載入你的原始圖片大小（儘管最後還是會顯示固定的寬度），這樣會造成瀏覽器的負擔，有可能導致跑網頁的速度變慢。

於是，我們必須知道網頁所需要的最大寬度，來調整我們想上傳的圖片尺寸。

這邊提供一個簡單的方法供大家參考：

1.打開Chrome瀏覽器，在任意地方點選滑鼠右鍵，再點選「檢查」。

2.點選箭頭圖示，再把滑鼠移到圖片上，圖片就會顯示反藍的狀態，同時顯示寬度，這樣一來，就會知道網頁上圖片的最大寬度為多少了。

第二步：決定圖片類型

常見圖片格式：GIF/JPEG/PNG的選擇

Google支援的圖片格式有：BMP、GIF、JPEG、PNG、WebP 和 SVG，其中最常見的是GIF、JPEG 與 PNG。

• GIF，是一般看到只有幾秒的動圖，相較圖片是比較佔容量的。

一般來說，若是同樣的圖片，JPEG 會比 PNG 較不佔容量，但 PNG 可保留所有的顏色。

如果以容量來看，JPEG可能是比較好的選擇，但也不是所有的圖片都一定要是JPEG的格式，若只拿JPEG與PNG比較的話，可參考Google開發人員Amit Agarwal的整理：

JPEG與PNG適用圖片

• JPEG適用：照片、圖像
• PNG適用：大量文字的圖、藝術線條的圖、logo、圖表、顏色較少的圖片

另外，要特別介紹一下SVG，SVG的全名是「可縮放向量圖形」，是一種語言（XML），而它最大且廣為人知的好處，就是縮放無敵，不會有解析度差的問題，而且，由於SVG是一種語言而不是圖片檔，所以不會有瀏覽器跑速變慢的問題。

因此，如果想放向量圖形或是logo等不希望失真的虛擬圖片，又怕PNG檔案太大的話，SVG是個非常適合的選擇。

螢幕截圖應該用什麼格式？

一般來說，螢幕截圖通常為 PNG 檔，那是否有轉成 JPEG 的必要性呢？其實這主要取決於你截取的畫面，請再次參考Google開發人員Amit Agarwal的說明：

螢幕截圖適用格式

• 螢幕截圖檔如果是很多字的網頁（例如：一則臉書貼文、搜尋結果頁面、一段程式碼、Google 地圖）--> 請用 PNG 檔，以保持畫面的清晰度。

• 螢幕截圖檔如果是有許多顏色的網頁（例如：Youtube影片、電玩遊戲、電腦桌布）-->請用 JPEG 檔，以防止圖片檔案太大的情形。

第三步：調整圖片大小

圖片過大，也會造成網速較慢的情形，在上傳圖片之前，請記得先壓縮圖片。

Google 推薦的 JPEG 圖片壓縮網站：

• Mac請使用連結：https://imageoptim.com/mac

• 微軟及Linux請使用連結：https://imageoptim.com/versions.html

• 好用的PNG圖片壓縮網站：https://tinypng.com/

第四步：圖片檔名

與其保持原本的數字或字母檔名，建議把關鍵字放入檔名內：

（X）Img_202010.13

（O）2020年髮型

另外，不建議取太長的名字，大約五字左右即可。

第五步：圖片alt text （描述性替代文字）

alt text 是圖片的替代文字，也就是如果瀏覽器無法顯示圖片，就會顯示的文字。因此，你的圖片alt text，應該是能描述圖片的文字。

拿Google舉的例子來看：

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

檔名為：puppy（小狗），alt text為：Dalmatian puppy playing fetch（大麥町小狗在玩接球）

另外，Google 官方表示若要在 alt text 使用關鍵字，應與圖片相關，切勿濫填關鍵字：

“建立的替代文字內容要實用、資訊豐富、包含適當關鍵字，且與網頁內容相關。請避免在 alt 屬性中加入大量關鍵字 (濫填關鍵字)，否則會對使用者體驗造成負面影響，並可能導致系統將您的網站判定為垃圾內容。”

什麼是濫填關鍵字呢？請一樣參考Google 舉的例子：

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

可以明顯看出，雖然檔名還是：puppy（小狗），但alt text是一長串有關小狗的字詞（小狗、狗、小狗們...）

第六步：圖片位置

圖片位置的重要性，請參考以下 Google 說明：

“盡可能將圖片放置在相關文字附近，而且只要合理的話，請考慮將最重要的圖片放置在網頁頂端。”

因此，最重要的圖片，請盡量安排在網頁的最上方（如果合適的話），同時需再次檢查：圖片是否與鄰近的內文高度相關。

第七步：圖片 Sitemap

Sitemap 是什麼？它是一個檔案，我們要在這個檔案裡提供網頁裡的資訊、素材等等，Google 這樣的瀏覽器讀你的 Sitemap 檔案之後，就可以了解你的網站的架構。

更詳細的資訊及介紹請參考 Google 官方解釋：

• 什麼是Sitemap：點此閱讀Google官方說明。
• 圖片Sitemap注意事項：點此閱讀Google官方說明。

*詳細操作說明，請洽詢公司內部工程師同仁。

第八步：新增結構化資料

Google 圖片目前支持「產品、影片、食譜」的標記，當你將結構化資料添加到網頁的 HTML 時，Google 圖片就可以向使用者顯示更多有關你的圖片的訊息。

圖中的價錢及有無庫存等資訊就是結構化資料的成果

更詳細的做法請參考Google官方說明。

*詳細操作說明，請洽詢公司內部工程師同仁。

第九步：回應式（響應式）圖片

手機、平板、桌電、筆電有不同大小的版面，而讓每一個裝置都有良好的使用者體驗，就是回應式圖片的功用。

請務必了解Google針對回應式圖片的處理說明：

• 什麼是回應式圖片：點此閱讀Google官方說明。
• 回應式圖片的程式碼運用（請看「回應式圖片」標題段落）：點此閱讀Google官方說明。

*詳細操作說明，請洽詢公司內部工程師同仁。

第十步：測試網站速度

最後，請針對網站速度做最後的檢查，若測出的網站速度太慢，請回去檢視圖片是否檔案還是太大？或網頁上是否有其他影響速度的物件需要調整？

如何測試網路速度？請參考Google官方網速測試網站。