Gogo Partners 夥伴行銷

圖片seo怎麼做?不可不知的十大步驟

Written by Eden | 21-1-20 上午3:43

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

 

1.為什麼圖片很重要?

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

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

 

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

 

為什麼圖片很重要?

 

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

 

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

 

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

 

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

 

圖片規劃的注意事項

 

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

 

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

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

 

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

 

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

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

 

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

 

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

 

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

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

 

圖片seo優化步驟

 

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

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

 

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

 

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

 

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

 

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

 

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

 

第二步:決定圖片類型

 

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

 

Google支援的圖片格式有:BMPGIFJPEGPNGWebP SVG,其中最常見的是GIFJPEG PNG

 

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

 

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

 

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

 

JPEG與PNG適用圖片

 

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

 

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

 

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

 

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

 

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

螢幕截圖適用格式

 

  • 螢幕截圖檔如果是很多字的網頁(例如:一則臉書貼文、搜尋結果頁面、一段程式碼、Google 地圖)--> 請用 PNG 檔,以保持畫面的清晰度。
  • 螢幕截圖檔如果是有許多顏色的網頁(例如:Youtube影片、電玩遊戲、電腦桌布)-->請用 JPEG 檔,以防止圖片檔案太大的情形。

 

第三步:調整圖片大小

 

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

 

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

 

 

第四步:圖片檔名

 

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

 

(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 官方解釋:

 

 

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

 

第八步:新增結構化資料

 

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

 

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

 

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

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

 

第九步:回應式(響應式)圖片

 

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

 

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

 

 

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

 

第十步:測試網站速度

 

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

 

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