人們的搜尋習慣是千變萬化的,而現代人喜歡看圖片的特性,讓圖片seo的重要性漸漸增加,讀完本篇文章,你將會知道:
1.為什麼圖片很重要?
2.圖片規劃的注意事項是什麼?
3.圖片seo優化的十個步驟
現在,就讓我們來看看圖片seo到底要怎麼做。
在文章中適時的放入圖片,能讓一篇字滿滿的文章更好閱讀,有時候想解釋一些事情,可能一張圖片就勝過千言萬語,圖片既好懂,又能讓讀者的閱讀體驗變得更好,好處多多!
有時,與其搜尋文字內容,人們甚至更傾向搜尋圖片,例如在Google上搜尋「髮型2020」這個關鍵字,會發現圖片的搜尋結果會擺在最前面的位置。
關鍵字「髮型2020」的搜尋結果有大量圖片,代表人們喜歡點擊圖片找尋答案。
在建立內容之前,不仿先調查一下人們的搜尋喜好,查查看目標關鍵字是否有大量圖片的搜尋結果,將這樣的搜尋結果作為內容規劃的考量點。
在規劃圖片時,建議也把圖片seo需注意的事情納入考量,以下提供三點注意事項:
Google曾表示:「尤其是網頁標題和選單項目等重要文字元素,因為並非所有使用者都可存取這類文字,且網頁翻譯工具並不支援圖片。」
但有時還是會加文字在圖片上以增加閱讀性,所以依筆者的理解,這裡指的是不要只用圖片呈現重要文字(例如目錄只用圖片呈現,沒有文字)。
如果你的網頁上的圖片全部都來自網路上圖庫,你可能要考慮換張圖片了,Google的John Mueller曾表示:「有自己設計、拍出、獨特的圖片在你的網頁上,不僅是很好的品牌推廣方式,而且很有可能對SEO有幫助。」
但John Mueller也表示:「更換圖片不會對排名有非常直接的影響,但仍是可優化的一件事情。」
也就是說,不要期待更換圖片後,排名會馬上直線上升,但這仍是眾多SEO可做事項的其中一件,至少,這對你的品牌獨特性及推廣會有正面的影響。
不要為了加圖片而加不適當的圖片,圖片必須與內容高度相關,或是具有讓內容更易懂的效果。
拿 Gogo Partners 的部落格來說,你會看到文章只有顯示在中間偏左的位置,而圖片也與文章一樣,完全貼齊紅線的寬度,這表示,你上傳再大的圖片,都不會超過這個寬度,這也表示,不論螢幕大小,圖片都不會超過這樣的寬度。
但是,如果你上傳超過這個寬度的圖片,瀏覽器還是會載入你的原始圖片大小(儘管最後還是會顯示固定的寬度),這樣會造成瀏覽器的負擔,有可能導致跑網頁的速度變慢。
於是,我們必須知道網頁所需要的最大寬度,來調整我們想上傳的圖片尺寸。
這邊提供一個簡單的方法供大家參考:
1.打開Chrome瀏覽器,在任意地方點選滑鼠右鍵,再點選「檢查」。
2.點選箭頭圖示,再把滑鼠移到圖片上,圖片就會顯示反藍的狀態,同時顯示寬度,這樣一來,就會知道網頁上圖片的最大寬度為多少了。
常見圖片格式:GIF/JPEG/PNG的選擇
Google支援的圖片格式有:BMP、GIF、JPEG、PNG、WebP 和 SVG,其中最常見的是GIF、JPEG 與 PNG。
一般來說,若是同樣的圖片,JPEG 會比 PNG 較不佔容量,但 PNG 可保留所有的顏色。
如果以容量來看,JPEG可能是比較好的選擇,但也不是所有的圖片都一定要是JPEG的格式,若只拿JPEG與PNG比較的話,可參考Google開發人員Amit Agarwal的整理:
JPEG與PNG適用圖片
另外,要特別介紹一下SVG,SVG的全名是「可縮放向量圖形」,是一種語言(XML),而它最大且廣為人知的好處,就是縮放無敵,不會有解析度差的問題,而且,由於SVG是一種語言而不是圖片檔,所以不會有瀏覽器跑速變慢的問題。
因此,如果想放向量圖形或是logo等不希望失真的虛擬圖片,又怕PNG檔案太大的話,SVG是個非常適合的選擇。
一般來說,螢幕截圖通常為 PNG 檔,那是否有轉成 JPEG 的必要性呢?其實這主要取決於你截取的畫面,請再次參考Google開發人員Amit Agarwal的說明:
螢幕截圖適用格式
圖片過大,也會造成網速較慢的情形,在上傳圖片之前,請記得先壓縮圖片。
Google 推薦的 JPEG 圖片壓縮網站:
與其保持原本的數字或字母檔名,建議把關鍵字放入檔名內:
(X)Img_202010.13
(O)2020年髮型
另外,不建議取太長的名字,大約五字左右即可。
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 是什麼?它是一個檔案,我們要在這個檔案裡提供網頁裡的資訊、素材等等,Google 這樣的瀏覽器讀你的 Sitemap 檔案之後,就可以了解你的網站的架構。
更詳細的資訊及介紹請參考 Google 官方解釋:
*詳細操作說明,請洽詢公司內部工程師同仁。
Google 圖片目前支持「產品、影片、食譜」的標記,當你將結構化資料添加到網頁的 HTML 時,Google 圖片就可以向使用者顯示更多有關你的圖片的訊息。
圖中的價錢及有無庫存等資訊就是結構化資料的成果
更詳細的做法請參考Google官方說明。
*詳細操作說明,請洽詢公司內部工程師同仁。
手機、平板、桌電、筆電有不同大小的版面,而讓每一個裝置都有良好的使用者體驗,就是回應式圖片的功用。
請務必了解Google針對回應式圖片的處理說明:
*詳細操作說明,請洽詢公司內部工程師同仁。
最後,請針對網站速度做最後的檢查,若測出的網站速度太慢,請回去檢視圖片是否檔案還是太大?或網頁上是否有其他影響速度的物件需要調整?
如何測試網路速度?請參考Google官方網速測試網站。