Home
Growth
SEO
SEO – 文章中的圖片優化
SEO

SEO – 文章中的圖片優化

6 Comments
在前篇文章中提到
圖片在一篇文庫中是不可缺少的
針對圖片的 SEO 優化也非常重要!
畢竟圖片素材得來不易, 優化他，讓其圖片發揮100%的效果!
接下來說明如何透過圖片檔名, img alt 等tag 標籤 以及圖片 檔案大小 進行優化…

相關文章:
SEO與HTML標籤優化-文章篇 #圖片優化 Img alt
http://cola.workxplay.net/seo-and-html-tag-article/#seo-img

優化圖片的目的

gogole image search - 北極熊
如上圖, 透過 Google Image 尋找 北極熊 圖片
可以輕鬆找到所有和北極熊有關的圖片
只要網頁內的 圖片 做好優化動作
就能讓圖片和關鍵字有所關連
不會浪費掉, 每張重要的圖片素材
也可以大大增加所曝光管道

 

可能情境大概是…

情境1 – 使用者 -> 關鍵字 [北極熊] -> 你的網站
情境2 – 使用者 -> 找圖片關鍵字 [北極熊] ->找到你網站的圖片 -> 透過圖片回到你的網站

優化圖片檔案大小

雖然現在普遍網路速度很快, 4G 上網
有線網路更是快到不可思議…

不過別忘了, 目前手機、行動上網的使用者非常多(行動上網的使用者是目前 Google 的重點對象)
網路業者口中 4G 上網的”快速”只是一個假象…
人多時不穩定, 收訊不好時, 慢, 其實問題一堆, 業者並不會給你一個保證, 只是提供你上網的方便而已

但是和我們生計習習相關的 網站 並不能如此…

現實面上, 我們不能控制電信業者更好、更快
不過我們可以調整、優化圖片，讓圖片能早點被使用者下載並顯示
(早點上菜，總比痴痴等待來的好)

 

以上面用到的圖片做為例子, 使用 開發者模式得知

seo-image-file-size 圖片檔案大小
這張圖片約 33kb, 約需 138ms(約0.1秒) 下載，這是使用有線網站的情況下…

 

利用 開發者模式, 模擬以下兩個網路情況…
模擬4G網路

sim-4g
和最佳情況沒有太大差別

模擬3G網路

sim-3g
已經可以看出下載時間明顯變長了, 增加至 461 ms(約0.4秒)

圖片檔案大小優化方式

壓縮圖片永遠是個好方法!
繼續用上圖做範例

原始檔案大小為 855kb
seo-image-origin

經過壓縮後的圖片檔案大小為 247kb
seo-image-compressor

壓縮圖片最棒的地方是 檔案變小, 而且畫質不變
這個動作真是何樂而不為 XD

個人推薦 TinyPNG 這個服務

https://tinypng.com/

免費的圖片壓縮線上服務
使用他們的獨家演算法在不失真的情況下將 PNG, JPG 壓縮處理

 
 

你可以在線上使用, 簡單的把圖片上傳給他就行了
TinyPNG
TinyPNG壓縮圖片需要一點點時間, 完成之後, 會給你一個壓縮後圖片的下載連結, 並且告訴你, 幫你節省了多少檔案大小

他們也有提供每月 500 張額度的免費 API
使用上不難, 工程師們可以輕鬆把圖片透過 TinyPNG 做優化處理

HTML標籤 – img alt 的圖優化

之前的文章有提到 SEO與HTML標籤優化-文章篇 #圖片優化 Img alt
這裡再詳細說明一次…

這樣是一個完整的 圖片 HTML tag

<img src=”https://farm1.staticflickr.com/567/22896308609_74c49418f6_c.jpg” alt=”seo-image-compressor” />

alt 請務必要輸入, 不用太長(建議 100 字內)簡單說明圖片內容即可, 不要使用沒有意義的編號或符號

src 即為 圖片的網址, 22896308609_74c49418f6_c.jpg 為圖片的檔名, 建議也使用有意議的文字做為檔名, 理想情況：https://farm1.staticflickr.com/567/seo-image-compressor.jpg

ps: 以 alt 為主, 檔名為輔, 因為有很多情況下, 檔名沒辦法隨時所欲…

 

 

更完整的圖片優化 HTML

<figure>
<img src=”圖片網址” alt=”圖片說明alt”>
<figcaption>一段完整的圖片說明</figcaption>
</figure>

(有關 figure Tag 的範例如說明 : http://html5doctor.com/the-figure-figcaption-elements/)
 
範例:
seo-img-figure
利用 figure 與 img 可以做出如上圖的排版效果, 也可以充分顯示圖片說明(圖說)

 

但是這個 Tag 並沒有被廣泛使用!
使用上有點複雜, 而且大多的 HTML 編輯器(註1), 並沒有這個功能

結論 – 圖片優化的重點

一定要做的動作

  • alt 一定要加上, 並輸入適當的說明
  • 整個頁面裡的 圖片大小

註1 : Html Editor

HTML 即時編輯器
大部 Blog 或是後台系統都會使用類似下圖的介面, 讓編輯人員輸入、編輯文章上架
主要讓不懂 HTML 的編輯也可以使用 Html Tag 輯文章
html-editor
各種類形的 html editor 都有, 功能也各有不同
不過有提供 figure 功能的編輯器幾乎沒有….

Tags: , , , , , , , , ,

You may also like

About The Author

可樂

6 Comments

    1. 這個問題其實比較偏向 css 排版問題

      簡單說明一下
      新增一個 w30 的 class, 指定 寬度為 30%, 外框為 1px, 靠左浮動對齊
      然後套用到 figure 上

      例：

      <style>
.w30{
  width:30%;
  border:1px;
  float:left;
}
</style>

<figure class="w30">
  <img src="../Picture/2015JapanTravel/IMG_20151113_190040.jpg">
  <figcaption>選手留念和吉祥物</figcaption>
</figure>
<figure class="w30">
  <img src="../Picture/2015JapanTravel/IMG_20151113_190055.jpg">
  <figcaption>第二組圖說</figcaption>
</figure>
.
(插入其它更多 figure)
.
<div style="clear:both"></div>

      最後停止靠左浮動，避免影響到其它部份

      試試吧 😀

      Reply
  3. Pingback: 怎麼知道 SEO (關鍵字) 成效如何? - 工作玩樂實驗室
  4. Pingback: 做 SEO 需要多少錢? SEO 該花多少錢? 如何讓 SEO 效果延長 - 工作玩樂實驗室

Leave a Reply