---
title: 圖片seo怎麼做？不可不知的十大步驟
description: 現代人喜歡看圖片的特性，讓圖片seo的重要性漸漸增加，讀完本篇文章，你將會知道一些圖片seo的基本知識。
---
[Gogo Partners 夥伴行銷 ](https://blog.gogopartners.com)
# [圖片seo怎麼做？不可不知的十大步驟](https://blog.gogopartners.com/圖片seo)
Written by [Eden](https://blog.gogopartners.com/author/eden) | 21-1-20 上午3:43
人們的搜尋習慣是千變萬化的，而現代人喜歡看圖片的特性，讓圖片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](https://www.labnol.org/software/tutorials/jpeg-vs-png-image-quality-or-bandwidth/5385/)的整理：
*JPEG與PNG適用圖片*
- JPEG適用：照片、圖像
- PNG適用：大量文字的圖、藝術線條的圖、logo、圖表、顏色較少的圖片
另外，要特別介紹一下SVG，SVG的全名是「可縮放向量圖形」，是一種語言（XML），而它最大且廣為人知的好處，就是縮放無敵，不會有解析度差的問題，而且，由於SVG是一種語言而不是圖片檔，所以不會有瀏覽器跑速變慢的問題。
因此，如果想放向量圖形或是logo等不希望失真的虛擬圖片，又怕PNG檔案太大的話，SVG是個非常適合的選擇。
### **螢幕截圖應該用什麼格式？**
** **
一般來說，螢幕截圖通常為 PNG 檔，那是否有轉成 JPEG 的必要性呢？其實這主要取決於你截取的畫面，請再次參考Google開發人員[Amit Agarwal的說明](https://www.labnol.org/software/tutorials/best-file-format-for-screenshot-images/3917/)：
*螢幕截圖適用格式*
- 螢幕截圖檔如果是很多字的網頁（例如：一則臉書貼文、搜尋結果頁面、一段程式碼、Google 地圖）--> 請用 PNG 檔，以保持畫面的清晰度。
- 螢幕截圖檔如果是有許多顏色的網頁（例如：Youtube影片、電玩遊戲、電腦桌布）-->請用 JPEG 檔，以防止圖片檔案太大的情形。
### **第三步：調整圖片大小**
圖片過大，也會造成網速較慢的情形，在上傳圖片之前，請記得先壓縮圖片。
Google 推薦的 JPEG 圖片壓縮網站：
- Mac請使用連結：[https://imageoptim.com/mac](https://imageoptim.com/mac)
- 微軟及Linux請使用連結：[https://imageoptim.com/versions.html](https://imageoptim.com/versions.html)
- 好用的PNG圖片壓縮網站：[https://tinypng.com/](https://tinypng.com/)
** **
### **第四步：圖片檔名**
與其保持原本的數字或字母檔名，建議把關鍵字放入檔名內：
**（X）**Img_202010.13
**（O）**2020年髮型
另外，不建議取太長的名字，大約五字左右即可。
### **第五步：圖片alt text ****（描述性替代文字）**
alt text 是圖片的替代文字，也就是如果瀏覽器無法顯示圖片，就會顯示的文字。因此，你的圖片alt text，應該是能描述圖片的文字。
拿Google舉的例子來看：
檔名為：puppy（小狗），alt text為：Dalmatian puppy playing fetch（大麥町小狗在玩接球）
另外，Google 官方表示若要在 alt text 使用關鍵字，應與圖片相關，切勿濫填關鍵字：
“*建立的替代文字內容要實用、資訊豐富、包含適當關鍵字，且與網頁內容相關。請避免在 alt **屬性中加入大量關鍵字 (**濫填關鍵字)**，否則會對使用者體驗造成負面影響，並可能導致系統將您的網站判定為垃圾內容。*”
什麼是濫填關鍵字呢？請一樣參考Google 舉的例子：
可以明顯看出，雖然檔名還是：puppy（小狗），但alt text是一長串有關小狗的字詞（小狗、狗、小狗們...）
### **第六步：圖片位置**
** **
圖片位置的重要性，請參考以下 Google 說明：
*“**盡可能將圖片放置在相關文字附近，而且只要合理的話，請考慮將最重要的圖片放置在網頁頂端。”*
因此，最重要的圖片，請盡量安排在網頁的最上方（如果合適的話），同時需再次檢查：圖片是否與鄰近的內文高度相關。
### **第七步：圖片 Sitemap**
Sitemap 是什麼？它是一個檔案，我們要在這個檔案裡提供網頁裡的資訊、素材等等，Google 這樣的瀏覽器讀你的 Sitemap 檔案之後，就可以了解你的網站的架構。
更詳細的資訊及介紹請參考 Google 官方解釋：
- 什麼是Sitemap：[點此閱讀Google官方說明](https://developers.google.com/search/docs/advanced/sitemaps/overview?hl=zh-Hant&visit_id=637448160705079577-1394306076&rd=1)。
- 圖片Sitemap注意事項：[點此閱讀Google官方說明](https://support.google.com/webmasters/answer/178636?hl=zh-Hant)。
*詳細操作說明，請洽詢公司內部工程師同仁。
### **第八步：新增結構化資料**
Google 圖片目前支持「產品、影片、食譜」的標記，當你將結構化資料添加到網頁的 HTML 時，Google 圖片就可以向使用者顯示更多有關你的圖片的訊息。
*圖中的價錢及有無庫存等資訊就是結構化資料的成果*
更詳細的做法請參考[Google官方說明。](https://developers.google.com/search/docs/guides/intro-structured-data?hl=zh-tw)
*詳細操作說明，請洽詢公司內部工程師同仁。
### **第九步：回應式（響應式）圖片**
** **
手機、平板、桌電、筆電有不同大小的版面，而讓每一個裝置都有良好的使用者體驗，就是回應式圖片的功用。
請務必了解Google針對回應式圖片的處理說明：
- 什麼是回應式圖片：[點此閱讀Google官方說明。](https://developers.google.com/web/fundamentals/design-and-ux/responsive/images)
- 回應式圖片的程式碼運用（請看「回應式圖片」標題段落）：[點此閱讀Google官方說明](https://developers.google.com/search/docs/advanced/guidelines/google-images?hl=zh-Hant&visit_id=637448159639440575-2550984653&rd=1)。
*詳細操作說明，請洽詢公司內部工程師同仁。
** **
### **第十步：測試網站速度**
** **
最後，請針對網站速度做最後的檢查，若測出的網站速度太慢，請回去檢視圖片是否檔案還是太大？或網頁上是否有其他影響速度的物件需要調整？
如何測試網路速度？請參考[Google官方網速測試網站。](https://developers.google.com/speed/pagespeed/insights/)
[View full post](https://blog.gogopartners.com/圖片seo)
```json
{
"@context" : "http://schema.org",
"@type" : "BlogPosting",
"author" : {
"@type" : "Person",
"name" : "Eden"
},
"dateModified" : "2021-01-20T05:53:08.143Z",
"datePublished" : "2021-01-20T03:43:22Z",
"headline" : "圖片seo怎麼做？不可不知的十大步驟",
"image" : {
"@type" : "ImageObject",
"height" : 356,
"url" : "https://f.hubspotusercontent20.net/hubfs/2636521/%E5%9C%96%E7%89%87seo.jpg",
"width" : 682
},
"mainEntityOfPage" : "https://blog.gogopartners.com/圖片seo",
"publisher" : {
"@type" : "Organization",
"logo" : {
"@type" : "ImageObject",
"height" : 60,
"url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
"width" : 60
},
"name" : "歡迎來到 Gogo Partners 夥伴行銷設計的部落格"
}
}
```