天矽科技 line

天矽部落格最新的網路趨勢資訊

網站設計趨勢

SEO優化圖片好重要!容易被忘記的圖片最佳化技巧|天矽科技客製化網頁設計

部落格:SEO優化圖片好重要!容易被忘記的圖片最佳化技巧|天矽科技客製化網頁設計

 

於網路上增加圖片並將圖片最佳化,不僅能提高網站與文章的可讀性、使圖片成為關鍵字被檢索,優化後的圖片還能使眼部殘疾人士了解圖片表達的資訊,當圖片損壞時,也能以該替代文字了解原先的圖片表現。

圖片對SEO的影響

 

 SEO是搜尋引擎最佳化,也就是網站為了提高自然搜尋排名,必須不斷使網站優化,並讓爬蟲將該網站放到搜尋結果頁之中,藉此提升客量、點閱與曝光。

 網站需要優化的項目很多,如網站內容的豐富與原創性、關鍵字設定、內外連結設定、後台程式碼是否高度結構化、網站瀏覽速度、裝置的適應性…等,都是需要全方位的去照顧到。

 

 大家在寫文章充實網頁時,通常都會生產一篇圖文並茂的文章,增加使用者的易讀性與文章的豐富度,但卻忘了爬蟲看不懂圖片這件事。除此之外,圖片如果沒有優化就放上來,對網站的開啟速度也會造成影響,這對SEO來說是非常不好的事。

 

  • 爬蟲看不懂圖片:
    如果我們沒有在圖片上加入註解,爬蟲就沒有辦法理解圖片是在闡述什麼樣的關鍵字,如此自然不會將該圖片檢索到搜尋引擎上。

    ※可使用alt屬性,繼續閱讀,下方有介紹

  • 影響網站開啟速度:
    如果一個網站的圖片過多,或是根本沒有優化就放上去,當使用者在開啟網站時就會需要較長的時間來載入,使用者對一個陌生的網站可是沒有耐心等這麼久的!因此這樣的網站有可能不被搜尋引擎喜歡,更不用說推薦給使用者了。

    ※要提高網站開啟速度,除了圖片優化外,也能利用圖片緩載入、圖片webp格式或以圖片裁切的方式(不建議)放入網站。

 

延伸閱讀
為什麼SEO很重要?超過62%的使用者都相信自然搜尋排名

 

 

圖片優化的優勢

 

 於網路上增加圖片,不僅能提高網站與文章的可讀性,還能使圖片成為關鍵字被檢索,不過圖片的重要性似乎常常被大家所遺忘,這實在是非常可惜。
 

  • 縮短圖片載入時間、加快網頁速度
  • 圖片與關鍵字產生連結
  • 增加圖片搜尋結果的曝光
  • 降低使用者離開網站的機會
  • 增加使用者的良好體驗

 

進行圖片優化

 

 圖片優化對網站來說,除了無法以高清的方式檢視圖片以外,幾乎是沒有什麼特別的問題,進行優化對使用者與爬蟲來說,都是非常加分的。因此我們可以利用以下幾個項目來進行優化:

 

增加alt屬性

alt語法:
<img alt="圖片要表示的文字" src="圖片連結網址" />

舉例:

圖片語法

▲圖片語法

 

貓咪圖片前台顯示

▲前台顯示

 

增加alt屬性的好處:
 

➤被爬蟲檢索

能有效被搜尋引擎的爬蟲判斷該圖片的內容訊息,還能將此文字說明變成關鍵字,檢索到搜尋引擎中,並推薦給使用者瀏覽。

 

➤友善眼疾人士

當弱視或有眼疾的朋友在瀏覽網站時,若圖片有添加alt屬性,該使用者就能更快的理解你的圖片要表達什麼,提升了網站的友好程度。

 

➤圖片失效以文字替代

當圖片失效、連結錯誤、圖片壞掉…等狀況時,圖片就會變得無法顯示,這時,如果有加入alt屬性,使用者就能立即明白這張圖原本是要表示什麼畫面,對網站管理者來說,也能較快的去將圖片做更換

以上圖舉例,若該圖片失效就會變成下面這樣:

貓咪圖片失效

雖然圖片壞了,但我們還是知道這張圖片要給我們看的是「貓咪」,這就是alt屬性的重要性。

 

添加alt屬性示範

以上圖的貓咪圖片、網址為”cat.png” 繼續舉例:

 

<img alt=" " src="cat.png">

錯誤!
這裡的alt忘了添加,這是許多人經常忘記的一部份,希望大家要用力記住。

 

<img alt="貓咪 橘貓 胖貓 成貓 可愛貓咪 動物 四腳生物 寵物 白橘貓" src="cat.png">

錯誤!
裡面的關鍵字、替代文字過多,會混淆圖片的意義。

 

<img alt="貓咪圖片" src="cat.png">

良好!
這樣的替代文字能使爬蟲理解,也能讓使用者明白該圖片的表示意圖,但其實還能再更好一點。

 

<img alt="草地上的貓" src="cat.png">

良好!
更精確的表示圖片的意圖,不僅能縮短關鍵字搜尋範圍,對使用者來說,若圖片失效也能更加精確的想像該圖片原先的畫面。

 

增加圖片長寬

 當圖片放上網站時,若沒有特別設定長寬,圖片就會以它原本的樣子放在網站中。但我們可以思考,每個使用者的瀏覽介面與裝置都不同,圖片有沒有可能因此跑掉?

 因此,設定圖片的長寬以確保圖片不會因為瀏覽器、裝置與瀏覽介面的不同而變的怪怪的。

 

圖片設定長寬比例

▲設定長寬比例

 

 在style中設定width與height的比例,建議以 % 的方式去設定,如此一來無論裝置如何,該圖片都能以百分比的方式來縮放並顯示給使用者瀏覽。

 

圖片檔案

 我們在上傳圖片時,是否都是用該圖片的原檔名上傳?

 我們也能在上傳照片時,可以另外設定該圖片的檔案名稱,因為當搜尋引擎找不到替代文字的敘述時,會有機會用你的檔案名稱作為圖片的註解;而且檔案名稱也是有機會被爬蟲當作註解檢索到網站中,因此重新命名該圖片的檔案名稱也是頗為重要的。
 

 舉例來說好了...

  • 如果該圖片檔案是中文命名,那麼上傳檔案就會變成一串亂碼,像這樣:
    <img alt="貓咪圖片" src="%E9%BA%B…BD%E7%A7%.jpg" />

  • 如果該圖片檔案是以照片的原檔名命名,上傳檔案就會變成這樣:
    <img alt="貓咪圖片" src="IMG_1903.jpg " />

  • 如果我們都有重新命名檔案,上傳檔案就會變成這樣:
    <img alt="貓咪圖片" src="cute-cat.jpg " />

 

 由上述舉例,相信你也能看出哪個表現方法較具有優勢。

 

圖片中的文字

 建議不要把重要的文字只放在圖片裡面,因為爬蟲看不懂圖片,更不用說圖片裡面的文字了!什麼是重要的文字?像是頁面標題選單圖片說明產品內容…等。

 有很多商家在製作網頁時,喜歡將說明文字放在圖片中,這樣雖然美觀、好看,但網站畢竟不是社群網站,這樣容易造成閱讀、爬蟲檢索的問題,因此建議將說明文字寫進html語法中,才是正確的做法。

 

圖片品質

 網站中所呈現的圖片,該有的品質還是一定要有的。千萬不要將解析度過低模糊或是有其他公司浮水印的圖片放到網站中,這樣會讓使用者認為你的網站不夠安全、很像詐騙。

 

圖片檔案大小

 圖片品質要顧,但圖片的檔案大小當然還是愈小愈好!

 圖片檔案愈大,載入的時間愈久,使用者可能沒有那麼多耐心等網站的圖片顯示,尤其是陌生、不認識你的網站的客戶。等待時間愈久,使用者愈容易離開網站,這樣不僅損失一個潛在客戶,對SEO也是相對扣分。

 因此,網站中的圖片檔案不要太多,檔案也盡量以不超過5MB為原則上傳,若檔案還是太大,建議先壓縮再上傳!

圖片壓縮工具

圖片壓縮提醒

▲天矽科技會在網站後台圖片壓縮工具。

 

參考來源
Googl搜尋中心-圖片最佳做法

 

天矽科技的服務

 

 天矽科技在協助架設網站時,都以W3C所制定的規則來架設網站,在SEO對於網站結構要求的方面,是沒有必要去擔心的。

 若客戶有特殊的需求,像是在網站首頁嵌入大量圖片,或是嵌入過多需要時間顯示的動畫時,我們都會評估網站開啟的速度,並給予有效的建議,若這樣做會發生什麼事、後續可能造成的問題…等。

 我們重視SEO自然搜尋流量,因此會給予專業的SEO建議,不會客戶要什麼就給什麼,我們希望給予客戶的不僅是優質的網站介面與操作系統,更希望該企業能夠藉由網站,被更多使用者看見!

 

回上一頁
信箱
客服
Line@