seo about image
相關文章:
SEO與HTML標籤優化-文章篇 #圖片優化 Img alt
http://cola.workxplay.net/seo-and-html-tag-article/#seo-img
如上圖, 透過 Google Image 尋找 北極熊 圖片
可以輕鬆找到所有和北極熊有關的圖片
只要網頁內的 圖片 做好優化動作
就能讓圖片和關鍵字有所關連
不會浪費掉, 每張重要的圖片素材
也可以大大增加所曝光管道
可能情境大概是…
雖然現在普遍網路速度很快, 4G 上網
有線網路更是快到不可思議…
不過別忘了, 目前手機、行動上網的使用者非常多(行動上網的使用者是目前 Google 的重點對象)
網路業者口中 4G 上網的”快速”只是一個假象…
人多時不穩定, 收訊不好時, 慢, 其實問題一堆, 業者並不會給你一個保證, 只是提供你上網的方便而已
但是和我們生計習習相關的 網站 並不能如此…
現實面上, 我們不能控制電信業者更好、更快
不過我們可以調整、優化圖片，讓圖片能早點被使用者下載並顯示
(早點上菜，總比痴痴等待來的好)
以上面用到的圖片做為例子, 使用 開發者模式得知
這張圖片約 33kb, 約需 138ms(約0.1秒) 下載，這是使用有線網站的情況下…
利用 開發者模式, 模擬以下兩個網路情況…
模擬4G網路
和最佳情況沒有太大差別
模擬3G網路
已經可以看出下載時間明顯變長了, 增加至 461 ms(約0.4秒)
壓縮圖片永遠是個好方法!
繼續用上圖做範例
原始檔案大小為 855kb
經過壓縮後的圖片檔案大小為 247kb
壓縮圖片最棒的地方是 檔案變小, 而且畫質不變
這個動作真是何樂而不為 XD
你可以在線上使用, 簡單的把圖片上傳給他就行了
TinyPNG壓縮圖片需要一點點時間, 完成之後, 會給你一個壓縮後圖片的下載連結, 並且告訴你, 幫你節省了多少檔案大小
他們也有提供每月 500 張額度的免費 API
使用上不難, 工程師們可以輕鬆把圖片透過 TinyPNG 做優化處理
之前的文章有提到 SEO與HTML標籤優化-文章篇 #圖片優化 Img alt
這裡再詳細說明一次…
這樣是一個完整的 圖片 HTML tag
alt 請務必要輸入, 不用太長(建議 100 字內)簡單說明圖片內容即可, 不要使用沒有意義的編號或符號
src 即為 圖片的網址, 22896308609_74c49418f6_c.jpg 為圖片的檔名, 建議也使用有意議的文字做為檔名, 理想情況：https://farm1.staticflickr.com/567/seo-image-compressor.jpg
ps: 以 alt 為主, 檔名為輔, 因為有很多情況下, 檔名沒辦法隨時所欲…
更完整的圖片優化 HTML
(有關 figure Tag 的範例如說明 : http://html5doctor.com/the-figure-figcaption-elements/)
範例:
利用 figure 與 img 可以做出如上圖的排版效果, 也可以充分顯示圖片說明(圖說)
但是這個 Tag 並沒有被廣泛使用!
使用上有點複雜, 而且大多的 HTML 編輯器(註1), 並沒有這個功能
一定要做的動作
HTML 即時編輯器
大部 Blog 或是後台系統都會使用類似下圖的介面, 讓編輯人員輸入、編輯文章上架
主要讓不懂 HTML 的編輯也可以使用 Html Tag 輯文章
各種類形的 html editor 都有, 功能也各有不同
不過有提供 figure 功能的編輯器幾乎沒有….
錯誤追蹤、回報非常重要，看到的錯誤才知道怎麼修。現今 PHP 流行的 Laravel 有很好的 Error Tracking, Error Handling。但 plain PHP 怎麼辦呢? 在 production 為了安全考量會設定…
jenkins、circleci、travis 或 Gitlab CI 皆為目前暫知名的 CI/CD 服務，各自缺點也不言而喻...過於肥大、收費略高(?)、速度不夠快執問題...此時使用 go language 開發的 Drone 就出現啦，完全 docker 容器化的運行方式讓整個 CI…
網頁壓縮技術中 gzip 很好用，deflate 己經過時，但你聽過 brotli 嗎? 有著比 gzip 更好、更快的壓縮效率。看起來利大於弊有什麼不用他的理由嗎?簡單從優、缺點來看 brotli!到底 brotli 布羅特利是什麼、如何設定呢。 目前大多的 web server…
為什麼要讓本機使用 Docker 內 PHP? 情境... docker 容器內用的是 PHP 7.4 但你的開發本機還在跑 PHP 5.6 或是更舊，因為 dockerize 的關係會將所有相關環境都轉移到…
為什麼你需要密碼管理工具現代人一天下來需要輸入多少組密碼，工作與生活己經和密碼密不可分! 除了足夠全安的密碼，密碼記錄、儲存的方式又足夠安全嗎?密碼管理工具可以帶來什麼幫助呢? 為什麼你需要密碼管理工具 資安問題!!大多人說著沒做壞事不怕被偷資料、監聽。嚴重曝露出現代人的基本科技素養的低落和無知 🤯 密碼的使用無所不在!! 行動裝置的普及，APP 、手機遊戲、銀行帳戶所有和生活相關的東西都需要密碼!!facebook, line 只要打開 APP 也會輸入密碼只是他是自動輸入、一般情況不可視 (auth token) 一般人最常發生的密碼資安問題…
mysql 資料表分區 mysql table partition 從架構上調整 mysql 的查詢效率。mysql DB 的優化可以簡單也能複雜，除了調整設定值。也可以透過水平分割(Horizontal Partitioning)、垂直分割(Vertical Partitioning) 分庫或分表將資料分散儲存減少資料搜尋、group by 時的效能消耗。拆開批次處理，理論上效率都會變好，本文就水平分割的…
View Comments
-->第一次聽到 figure，所以他是專門寫照片描述的語法？！已經有 alt 了，figure 也最好加註嗎？
TinyPNG也有出 WP Plugin 耶
https://wordpress.org/plugins/tiny-compress-images/
在有限的時間內使用 alt 就可以了
wow, 有 plugin 可用耶 :D
請問一下，用figure顯示的圖文說明，要怎麼並排呢？
我目前僅能把多張圖插在同一段裡，但是這樣就必須多張圖共用一個說明。
http://web.ntnu.edu.tw/~60132057A/SubPage/2015JapanTravel_OsakaPool.php
這個問題其實比較偏向 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>最後停止靠左浮動，避免影響到其它部份
試試吧 :D