網頁設計冷知識(二)-RWD和AWD的差別在哪?誰比較好用?

網頁設計冷知識(二)-RWD和AWD的差別在哪?誰比較好用?
網頁設計冷知識(二)-RWD和AWD的差別在哪?誰比較好用?

今天想跟大家分享的網頁設計冷知識就是-RWD跟AWD啦!

AWD 跟 RWD 的目的一致,都是希望能針對桌機、平板、手機等不同尺寸的裝置,而顯示出易於瀏覽的網站畫面。

其實在規劃網站時,相信有不少的 PM 在與前端工程師或是網頁前端設計師在溝通上遇到瓶頸,像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過網頁設計、或是無任何技術背景的網頁規劃者為角度,講解 RWD 與 AWD 網站的差異,以及如何規劃與選擇。

讀完本系列文章後,你將會了解:
(目錄)

  1. RWD 和 AWD 的差異與優缺點
  2. 我該選擇 RWD 還是 AWD ?
  3. AWD 要怎麼做才能對 SEO 無痛?
  4. 了解整體網站的規劃流程-PM與前端溝通更順利

RWD 和 AWD 的差異與優缺點

網頁設計應用上,RWD 是「Responsive Web Design (響應式網頁設計)」的縮寫;而 AWD 則是 「Adaptive Web Design (自適應式網頁設計)」的縮寫。RWD 與 AWD 是為現今大多數人們習慣使用手機、平板等行動裝置上網而生的 CSS 寫法,讓網頁設計無論在桌機螢幕上、或是尺寸較小的行動裝置上,都能清楚的呈現,讓使用者能更舒服的瀏覽網頁。

RWD 與 AWD 的差異,簡單的來說,前者是無論行動裝置或是桌機,都使用同一套 CSS;而後者是針對各種裝置撰寫對應的 CSS,可以有多套 CSS,例如桌機有桌機的一套 CSS,手機有自己的一套 CSS。

RWD 與 AWD 的差異,簡單的來說,就是前者只有一套 CSS 檔案、後者卻有多套 CSS 檔案。詳述如下:

RWD 會把所有裝置的樣式都寫在同一套 CSS 中,因此無論行動裝置或是桌機,都是使用同一套 CSS 。當使用者打開了網頁,就能即時透過網頁的寬度,來決定要套用到 CSS 中的哪一個樣式,同時也可以根據自己需求,進而對不同的瀏覽介面而做出對應的 UI/UX。

AWD 是針對各種裝置撰寫對應的 CSS,因此就會針對不同的裝置,而有多套的 CSS 樣式碼:例如桌機有桌機的一套 CSS,手機有自己的一套 CSS。AWD 的方式必須仰賴前端工程師撰寫的程式,來判斷使用者是使用哪種裝置開啟網頁,再自動匯入相應的 CSS 檔案:如程式判斷出某使用者是使用桌機瀏覽網頁的話,就會自動匯入桌機的 CSS 樣式檔案;若是使用手機開網頁,就匯入手機的 CSS 樣式檔。

RWD、AWD 的優缺點比較

RWD 與 AWD 只是表現的方式不同而已,並沒有所謂的哪個比較好,優缺點比較如下表:

RWD vs AWD 優缺點比較
RWD AWD
相同之處 兩種都會判斷裝置而顯示出對應的樣式。
不同之處 無論行動裝置或是桌機,都使用同一套 CSS。
當使用者打開了網頁,就能偵測網頁的寬度而決定要套用哪些 CSS 樣式碼。
針對各種裝置撰寫對應的 CSS,因此會有多套 CSS,一般來說會有兩套 CSS:桌機專屬的一套 CSS,手機專屬的一套 CSS。
當使用者打開了網頁,程式就能自動偵測網頁的寬度而決定要套用哪個 CSS 檔案。
優點 節省網站製作成本
因為無論是桌機、手機的樣式,全都只塞在同一套 CSS 檔案,所以開發成本較低,適合內容較單純的網站、新創公司或是個人工作室使用。

SEO更方便
因為同一個網頁、URL 也只有一個,所以更方便 SEO
網頁維護更分明,不怕樣式被吃到
雖然成本較 RWD 高,但是由於桌機與手機的 CSS 分別在不同的檔案,因此在維護上會比 RWD 更分明、更能清楚地找到對應的樣式碼,不需要大海撈針。更沒有更改一個 CSS 而影響到不該改變的區塊 style 也改變的後顧之憂。

有利於 UI/UX
若對畫面顯示的要求較高,希望能在各種裝置上畫面都能完美呈現的場合、或是網站內容較多、圖文排版較複雜時,就適用 AWD,可針對不同的瀏覽介面而做出對應的 UI/UX,讓介面更美觀好用、給使用者更佳的網頁瀏覽體驗。

行動裝置網頁載入更快
可針對行動裝置而做優化,將原本的大圖縮減成最合適的尺寸,減少不必要的大圖,就能加快行動裝置的網頁 loading。
缺點 開發容易、維護耗時:
全部的樣式碼都一窩蜂塞在同一套 CSS 裡面,所以在網頁維護上較不容易,常常需要大海撈針般找到對應的程式碼。若遇到需要修改的狀況,很可能修改某個樣式碼,卻也影響到了其他不需修改的樣式碼,而導致網站 「跑山」 的窘境。 
行動裝置網頁載入恐會更慢
因為所有的裝置都使用同一個 CSS 碼,所以較無法針對行動裝置做圖片顯示的最佳化,加上 RWD 網頁的機制是將資訊先下載後,再根據裝置大小重新排列,所以會較慢。
維護較容易,但開發成本高:
一開始需要針對不同的裝置而寫出好幾套 CSS,耗時耗力,且還需工程師撰寫讓網頁自動感應載具而套用對應 CSS 的程式。若有 SEO 的需求,還需另請工程師將同一網頁的多套 CSS 串在同一個網址內,否則流量會自動被手機與桌機瓜分。

 

繼續看本系列文章下篇:
2.我該選擇 RWD 還是 AWD ?
3.AWD 要怎麼做才能對 SEO 無痛?
4.了解整體網站的規劃流程-PM與前端溝通更順利

 

 

 

推薦文章:
今日網頁設計課程,就是要讓你弄懂HTML與CSS的愛恨糾葛!


還在尋尋覓覓好的UI課程嗎?先來達內看看吧!!


那些前端工程師沒教你的CSS,今天一一告訴你!


程式課程選達內,美上市IT課程教育集團


達內教育也提供太多程式語言課程了吧!還不快決定你要帶哪個回家!


HTML5教學三個基礎懶人包一:初學者開從何開始?


什麼?沒上Python課程也可以跨足IT產業?

 

 

辦到無痛SEO優化一點也不難,前提是要用對方法!

辦到無痛SEO優化一點也不難,前提是要用對方法!
辦到無痛SEO優化一點也不難,前提是要用對方法!

要辦到無痛SEO優化真的方法要用對,自從認識AWD一切都變的超輕鬆!


AWD 跟 RWD 的目的一致,都是希望能針對桌機、平板、手機等不同尺寸的裝置,而顯示出易於瀏覽的網站畫面。

一般而言,像是UI設計師在規劃網站時,相信有不少的 PM 在與前端工程師或是網頁前端設計師在溝通上遇到瓶頸,像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過網頁設計、或是無任何技術背景的網頁規劃者為角度,來講解 RWD 與 AWD 網站的差異,以及如何規劃與選擇。

讀完本系列文章後,你將會了解:
(目錄)

  1. RWD 和 AWD 的差異與優缺點
  2. 我該選擇 RWD 還是 AWD ?
  3. AWD 要怎麼做才能對 SEO 無痛?
  4. 了解整體網站的規劃流程-PM與前端溝通更順利

AWD 要怎麼做才能對 SEO 無痛?

很多人都在說 AWD 對 SEO 不利。其實是因為大多數的人會省去將 「行動版」 與 「桌機板」 串在同一個網址的流程,索性就把把網站做成兩個獨立的桌機版跟行動版兩個網站,再進行轉址,所以流量自然會分流,對 SEO 當然有負面影響!

其實最近觀察很多分成桌機版跟行動版的網站 (如 Momo 購物、Facebook 等等) 的 URL ,會發現行動版的網址前面多會有個 「m.」 的開頭,就是這樣的情形。

但我們先回到原點,弄懂 AWD 的基本原理,其實 AWD 只是分成桌機版與行動板等兩套 CSS (有時可能會多出其他的而有兩套以上的 CSS)。但是一個網站擁有多套 CSS 並不等於要分成兩個網站。工程師常見的做法是撰寫程式讓同一個 URL 之下,判斷裝置而吐出相對應的網站架構與 CSS 樣式。多了這個步驟,才可以集中流量在同一個網址中,對 SEO 或品牌辨識度都比較好,就不會有前面提到 「分流」 的問題,進而就不會影響到 SEO。

所以請不要再說 AWD 對SEO優化不利了!不利 SEO 的是把 「網站做成兩個獨立的桌機版跟行動版兩個網站,再進行轉址」 的作法。你所需要的,是要把行動版與桌機板使用同一個 URL。

繼續看本系列文章下篇:
4.了解整體網站的規劃流程-PM與前端溝通更順利

本系列文章前二篇:
1.RWD 和 AWD 的差異與優缺點
2.我該選擇 RWD 還是 AWD ?

 

 

 

 

推薦閱讀:
URL做好這五招,網頁達到SEO優化沒煩惱!


兩種Robots到底怎麼分?想要做好SEO優化就看這!


連SEO優化師都大讚好用的Schema,你還不趕快來學?


程式課程選達內,美上市IT課程教育集團


透過對的Java課程,讓你從茫然的畢業生中脫穎而出!


Python課程讓廣達員工贏在起跑點,全員發展AI事業


AI人工智慧無所不在,一不小心你我都是…

 

網頁設計冷知識(一)-網站規劃到好只要四步驟?

網頁設計冷知識(一)-網站規劃到好只要四步驟?
網頁設計冷知識(一)-網站規劃到好只要四步驟?

現今最夯的網頁設計,你知道只要四步驟就可以把網站規劃到好嗎?

AWD 跟 RWD 的目的一致,都是希望能針對桌機、平板、手機等不同尺寸的裝置,而顯示出易於瀏覽的網站畫面。

在規劃網站時,相信有不少的 PM 在與前端工程師或是網頁設計師在溝通上遇到瓶頸,像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過網頁設計、或是無任何技術背景的網頁規劃者為角度,講解 RWD 與 AWD 網站的差異,以及如何規劃與選擇。

讀完本系列文章後,你將會了解:
(目錄)

  1. RWD 和 AWD 的差異與優缺點
  2. 我該選擇 RWD 還是 AWD ?
  3. AWD 要怎麼做才能對 SEO 無痛?
  4. 了解整體網站的規劃流程-PM與前端溝通更順利

與前端溝通更順利!從了解整體網站的規劃流程開始

不管是網站設計或是 APP 開發,合理的設計四流程為:Sketch、 Wireframe、 Mockup、 Prototype。

#1 Sketch (草圖)

這個是大家一起腦力激盪的階段,只需用筆和紙將腦中的想法粗略的勾勒出來,這也是最快得到靈感的方法。就算是粗糙不堪的草圖,也比文字更能夠表達、整合、具象化大家的想法,是在進入到 Wireframe (線框稿)之前的必備步驟。

需要工具:筆與紙

擬真度:最低

階段目標:溝通、整合大家的想法與創意

#2 Wireframe (線框稿)

Wireframe (線框稿)階段的重點在於釐清需求確認網頁上一定會出現的功能。所以必須先排除視覺元素的討論,單單專注在功能的規劃,以免失焦。

線框稿會以簡單的草稿圖,以低擬真度的方式呈現網頁上的主要資訊、排版與架構,以及如何與使用者互動等。通常設計師會使用 Balsamiq 提供的 Wireframe 工具、或是 powerpoint 、手繪等方式,以黑白的方格、線和圖來呈現不同的層級,其元素必須要非常精簡,是為了避免討論時失焦,加速效率和速度。某些還未確定的內容,就先利用方框或假文字來表示,例如圖片、影片與文字等等。

因此,在 Wireframe 階段不能出現過度的細節,比如說網頁的字型選用、 Button 的陰影、首頁輪播圖的大小等等。

需要工具:可以用 Balsamiq、Powerpoint、Photoshop、Illustrator…可依照個人習慣而定

擬真度:低

階段目標:功能導向設計,整合產品團隊中的成員意見達到共識

#3 Mockup (視覺稿)

一般來說,UI設計師會根據 PM 確定好的 Wireframe 介面,使用 Axure 等網站視覺模擬軟體進行網站視覺設計上的配色、排版、配色等,以增強使用者體驗網站的效果。在製作 Mockup 的途中,UI 設計師必須數度與 PM 討論網站的功能、呈現的效果,還有與前端工程師溝通特效製作和開發成本與可行度以進行取捨。此時設計出來的 Mockup 圖經過客戶確認後,下一步就是直接交由前端工程師根據 Mockup 稿進行開發,所以在 Mockup 階段和最終網頁的外觀會完全一致,但是尚未無真正能操作的功能-不能操作、不會動、靜態。(如同手機無功能的模型機的概念)。

推薦工具Axure

擬真度:中

階段目標:確認網頁的視覺呈現,而這個視覺是以達成網頁的各項功能為前提而制定。

#4 Prototype (原形)

Prototype (原形) 可將網站以高擬真的方式呈現,是幾乎將真正要上線的網頁的各項功能模擬出來。上一階段的 Mockup (視覺稿) 是無功能的靜態樣板,那在這一個階段則是加入各項互動的功能:如下拉選單、動態內容、狀況邏輯設定、計算、動態 Hide/Show Layer 效果等許多互動的物件與功能,並允許使用者可以設定點擊、Mouse over 或手指滑動觸發互動,可任意加入註解與超連結,幾乎是完全模擬真實網站的意像。

推薦工具Axure

擬真度:高

階段目標:Debug 問題、確保網站的所有功能達都能到業主的設定目標。

本系列文章前三篇:
1.RWD 和 AWD 的差異與優缺點
2.我該選擇 RWD 還是 AWD ?
3.AWD 要怎麼做才能對 SEO 無痛?

 

 

推薦文章:
成為前端工程師必會技能之一-CSS背景顏色設定


成為專業前端工程師前,先搞定CSS背景位置設定!


今日網頁設計課程,就是要讓你弄懂HTML與CSS的愛恨糾葛!


達內課程先就業再付款- 中時電子報


厭世代正風行?來上Java課程可以幫你扭轉困境!


台灣本土人工智慧APP雅婷逐字稿幫你解決所有語音辨識的煩惱!!


想要搶攻今年熱門職缺-AI人工智慧.物聯網.大數據.VR/AR,現在正是好時機!

 

 

網頁設計初學者必學SEO技巧(五)-圖片格式及sitemap設定

網頁設計初學者必學SEO技巧(五)-圖片格式及sitemap設定
網頁設計初學者必學SEO技巧(五)-圖片格式及sitemap設定

圖片的大小確實影響到SEO的成效,所以說用對方法,成效就越好!!

目錄
1. 圖片SEO的重要性
2. 8大圖片SEO心法
2-1. 使用合適的圖片檔名
2-2. 優化 alt 文字
2-3. 能不用圖片就不要用圖片
2-4. 別只靠 HTML5 的 width 與 height 來設定圖片尺寸
2-5. 圖片寬度別超過網頁的內容
2-6. 圖片 Exif 資訊 – 視狀況而刪除
2-7. 選擇適當格式的圖片檔
2-8. 創建圖片的 sitemap (進階)

7.選擇適當格式的圖片檔

一般前端工程師常用的網頁上呈現的圖檔,不外乎這三種:jpeg、png、gif。

這三種圖檔都有不同的壓縮方式,一般用HTML5調整,無法確實調整到圖片的大小,且誠如前篇所提到:越小的尺寸,對網頁載入的速度就越快。而網頁載入的速度對 SEO 品質具有關鍵性的影響。

就好比說同一張圖片,到底該以何種形式做為檔案,才是最小的呢? 我們拿一張圖片分別存成 GIF、JPEG (JPG) 與 PNG 檔來試試:

 

同一張圖片,以何種形式為檔案,才是最小的呢? 我們拿一張圖片分別存成 GIF、JPEG (JPG) 與 PNG 檔來試試:

由以上結果可知,jpg 檔的尺寸是相對較小的。那網頁圖片選擇 jpg 檔是最好的囉?有時並非如此!

一般而言,若圖片的類型是照片的話,通常存成 jpeg(jpg) 檔是最合適的、線條圖畫與文字則是 PNG 檔、動畫則是 GIF 檔。

GIF、JPEG (JPG) 與 PNG…我該存成哪種檔案?

GIF 格式雖然算是一種無失真的圖像壓縮標準 (無失真不等於高清解析度),但是顯示的顏色被限制成只有 256 種,因此適用於不需太高解析度的動態圖。

JPEG (JPG) 格式是具有破壞性的圖片壓縮格式,所以可壓縮的尺寸相對也較小。適用於照片。

PNG 格式也是一種無失真的圖像壓縮標準 (無失真不等於高清解析度),且顯示的顏色也不像 GIF 般被限制,因此 PNG 檔案尺寸比前兩者大。PNG 格式適用於圖片中的線條與文字必須要很清楚地顯現的場合、或是小尺寸的 LOGO、ICON 等。去過背的 PNG 圖可在網頁上以去背的方式呈現,不會遮住後面。因此常被用於 LOGO 圖、ICON 等。

若你想轉換圖片的格式,但是電腦沒有安裝 Photoshop 等影像處理軟體,真心建議可以試試線上的免費圖檔轉換工具

8.創建圖片的 sitemap (進階)

相信許多創建網站 sitemap 對許多 SEO 優化師來說是非常基本的,而且現在已經有許多線上工具可以自動幫你生成網站的 sitemap,但是至於圖片的 sitemap 來說,這些工具多只有生成最基本的 <image:image> 與 <image:loc> 標籤。 而根據 Google 官方對於圖片 sitemap 的說明如下:

圖片 Sitemap 資訊有助於 Google 發掘原本可能找不到的圖片 (例如您的網站使用 JavaScript 程式碼連結圖片),並可讓您為 Google 指出要對網站上的哪些圖片進行檢索及建立索引。您可以使用另一個 Sitemap 來列舉圖片,也可以將圖片資訊加入現有的 Sitemap。以下範例說明的是 「http://example.com/sample.html」這個網頁的 Sitemap 項目,該網頁包含兩張圖片。

      <?xml version="1.0" encoding="UTF-8"?>
      <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
                 xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
        <url>
          <loc>http://example.com/sample.html</loc>
          <image:image>
            <image:loc>http://example.com/image.jpg</image:loc>
          </image:image>
          <image:image>
            <image:loc>http://example.com/photo.jpg</image:loc>
          </image:image>
        </url> 
      </urlset>

使用上述範例中的語法架構時,每個網頁最多可以列出 1,000 張圖片!

此外,根據 Google 官方說法,適用於圖片的標記如下所示:

標記 是否必要 說明
<image:image> 包含單一圖片的所有資訊。每個 <url> 標記最多可包含 1,000 個 <image:image> 標記。
<image:loc> 圖片的網址。

在某些情況下,圖片網址和您的主網站可能不會位於相同的網域中。
Search Console 會同時驗證圖片和網站所在的網域,所以您無需擔心。
舉例來說,如果您使用內容傳遞網路 (例如 Google 協作平台) 代管圖片,請確認代管網站已經過 Search Console 驗證。
此外,請確認 robots.txt 檔案允許 Google 檢索您要建立索引的任何內容。

<image:caption> 選用 圖片的說明文字。
<image:geo_location> 選用 圖片所顯示的地理位置。例如:<image:geo_location>Limerick, Ireland</image:geo_location>
<image:title> 選用 圖片的標題。
<image:license> 選用 圖片授權的網址。

 

 

 

 

 

推薦文章:
兩種Robots到底怎麼分?想要做好SEO優化就看這!


連SEO優化師都大讚好用的Schema,你還不趕快來學?


為什麼SEO優化師都在用微數據?原因是…


Java課程、UI課程、程式課程、網路行銷課程推薦


單一技能已被淘汰 讓Java課程使你充實自我 還能媒合高薪職缺


台灣人工智慧實驗室研發偵測敗血症系統,準確率高達百分之八十!!


終於可直接從Windows下載安裝版來複習Python課程了!

網頁設計初學者必學SEO技巧(四)-圖片寬度最佳化及Exif

網頁設計初學者必學SEO技巧(四)-圖片寬度最佳化及Exif
網頁設計初學者必學SEO技巧(四)-圖片寬度最佳化及Exif

現在利用圖片辦到SEO又有新技巧了!可以從調整圖片寬度做跟Exif設定哦~

目錄
1. 圖片SEO的重要性
2. 8大圖片SEO心法
2-1. 使用合適的圖片檔名
2-2. 優化 alt 文字
2-3. 能不用圖片就不要用圖片
2-4. 別只靠 HTML5 的 width 與 height 來設定圖片尺寸
2-5. 圖片寬度別超過網頁的內容
2-6. 圖片 Exif 資訊 – 視狀況而刪除
2-7. 選擇適當格式的圖片檔
2-8. 創建圖片的 sitemap (進階)

5.圖片寬度別超過網頁的內容

圖片的寬度應該要和網頁內容的寬度一致。如以下的部落格在 27 吋螢幕上的顯現,看看左右兩邊是否有許多留白?

Ahrefs的部落格在 27 吋螢幕上的顯現

紅色框起來的部分是可以為左右來留白。那是因為這個部落格為了要與行動裝置相容,他們 RWD 的做法限制內容的寬度最大為 720px。其實現在很多 RWD 網站也是使用類似的法 – 限制內容的寬度。 因此你上傳的圖片,寬度就不要大過 720px。雖然你可以透過 CSS跟HTML5來設定,將寬度過大的圖片自動縮小來顯示,但是這樣做的話,網頁圖片的尺寸還是沒有變,而且過大的圖片會拖累網頁載入的速度。對 SEO 來說,網頁載入的時間是分秒必爭的。所以還是不要偷懶,花個一分鐘,將圖片拉到 Smart Resize 工具將圖片的寬度縮小吧!(高度也要同步以等比例的方式來縮小)

6.圖片 Exif 資訊 – 視狀況而刪除

圖片檔案內除了有與圖片相關的資訊外,還可能有許多對 SEO 沒有用處的資訊 (如 Exif、Exchangeable image file format) 等。這些資訊不但對搜尋引擎判斷圖片資訊沒有幫助,還會增加圖片檔案的大小,因此要適度地來去除這些額外資料。Google 官方推薦的圖片尺寸最佳化工具Imageoptim 的預設為:壓縮你圖片的同時,也刪減了 Exif 資訊。

但假設你的圖片用途是作為 Local SEO 的話,也許就要保留 Exif 的資訊了。雖然 Google 官方到目前為止並未表明他們的搜尋引擎會抓取 Exif 中的 GPS 經緯度座標,來影響地區性的 Google 搜尋引擎排名,但是大多數的 SEO 專家都認為 Exif 中的地點資訊對於該地區的搜尋引擎排名有一定的影響。

 

 

推薦文章:
網頁設計初學者必學SEO技巧(三)-選擇最佳化的圖片尺寸


連SEO優化師都大讚好用的Schema,你還不趕快來學?


不藏私SEO優化之HTML5語意標記教學,網友大讚超佛心!


達內教育開幕 培養台灣IT人才進入全球企業


厭世代正風行?來上Java課程可以幫你扭轉困境!


基礎HTML5教學小訣竅一-初學者可用的免費好上手編輯器!!


這AI人工智慧的貓窩真的有夠讚!給浪浪貓一個完美的棲身之所!

 

 

 

網頁設計初學者必學SEO技巧(三)-選擇最佳化的圖片尺寸

網頁設計初學者必學SEO技巧(三)-選擇最佳化的圖片尺寸
網頁設計初學者必學SEO技巧(三)-選擇最佳化的圖片尺寸

在SEO中,可別以為圖片大就好!反而有時候因為載入太慢會讓讀者失去耐心呢!

目錄
1. 圖片SEO的重要性
2. 8大圖片SEO心法
2-1. 使用合適的圖片檔名
2-2. 優化 alt 文字
2-3. 能不用圖片就不要用圖片
2-4. 別只靠 HTML5 的 width 與 height 來設定圖片尺寸
2-5. 圖片寬度別超過網頁的內容
2-6. 圖片 Exif 資訊 – 視狀況而刪除
2-7. 選擇適當格式的圖片檔
2-8. 創建圖片的 sitemap (進階)

4.請確實壓縮圖檔的大小 – 別只靠 HTML5 的 width 與 height 來設定尺寸

在許多網頁中,常常會把同一圖檔用在多個大小不一的網頁上,再利用 HTML5 的 width 與 height 來調整它們在網頁上出現的樣子。但是原圖若尺寸過大的話,傳輸會變得很慢,因為 width 與 height 只能改變使用者 「看到」 的圖片大小,但真正傳輸的圖片尺寸還是沒變。

圖片尺寸越大,網路載入速度就越慢。HTML5 的 width 與 height 指令只是讓它在網頁上 「偽裝成」 其尺寸所設定的樣式。

所以圖片的尺寸需要 「最佳化」 – 這裡的 「最佳化」 意思不是指圖檔調整至最大,而是指在不降低圖片解析度的狀況下,給予圖片最合適的大小。

看看下面兩張圖的解析度,是否都差不多清晰? 但是左圖的尺寸竟是右圖的 3.78 倍!

original tiny png converted
Original PNG: 75,628 bytes pngquant: 19,996 bytes (73% smaller)

至於要選哪一個工具最好呢? SEO 工具 Ahrefs 的部落格針對上述所提的大圖片最佳化的工具之外,也測試了其他的工具。Google 也提供了三個能將圖檔尺寸最佳化的開放工具:GuetzliMozJPEG以及pngquant。Google 提供的使用說明在這裡。若你這些工具都用不習慣的話,那就用 ImageOptim 吧!Windows 及 Linux 使用者請到這裡下載。使用方法很簡單,只要丟入你的圖片即可最佳化尺寸,進而達到SEO優化的效果!針對圖片尺寸的最佳化,以及網頁的關係,GOOGLE 也曾經寫了這份官方說明。其中一句話是:「為了最佳的效果,請把圖片調成各樣的品質來測試。別害怕調低圖片的品質 – 通常這樣,圖片在視覺上效果仍然很好,但是卻大大節省了檔案的儲存空間。」

他們將 15 張圖片丟入 7 個不同的工具做測試,全部都選擇預設的模式。

結果如下(百分比的指數,為 15 張圖片壓縮百分比的平均值):

Imageoptim: 69% (JPEG). 40% (PNG)
Shortpixel: 42% (JPEG). 59% (PNG)
Kraken.io: 13% (JPEG). 63% (PNG).
TinyPNG: 27% (JPEG). 65% (PNG).
Optimizilla: 27% (JPEG). 60% (PNG)
Imagify.io: 6% (JPEG). 1% (PNG)
Compressor.io: 42% (JPEG). 58% (PNG)

參考以上的結果,Google 官方推薦的圖片尺寸最佳化工具Imageoptim:在 .jpg 檔上表現得較佳;而在 .jpg 與 .png 檔上表現得較平均的為 Shortpixel

網頁設計初學者必學SEO技巧(二)-文字比圖片更有用

網頁設計初學者必學SEO技巧(二)-文字比圖片更有用
網頁設計初學者必學SEO技巧(二)-文字比圖片更有用

原本以為圖片在SEO中可以加分,但萬萬沒想到文字更有效果呢!

目錄
1. 圖片SEO的重要性
2. 8大圖片SEO心法
2-1. 使用合適的圖片檔名
2-2. 優化 alt 文字
2-3. 能不用圖片就不要用圖片
2-4. 別只靠 HTML5 的 width 與 height 來設定圖片尺寸
2-5. 圖片寬度別超過網頁的內容
2-6. 圖片 Exif 資訊 – 視狀況而刪除
2-7. 選擇適當格式的圖片檔
2-8. 創建圖片的 sitemap (進階)

3.能不用圖片就不要用圖片

台灣電商網站最常犯的錯誤之一,就是將所有的文字訊息通通都丟到圖片內,直接以一張大圖的方式呈現。也許店商主還會自滿的認為這樣很漂亮,但事實上這樣的做法對於訪客的體驗恐怕不但沒有加分,還會不利於 SEO

在消費者逛你的電商網站,不外乎就是要快速看到產品照片、規格、價格等資訊。但一張大圖的呈現方式只會讓使用者一直滑手機、拼命滑到底還找不到相關資訊時,就會加速他們不消費就離開你的網站的機率。

因為對搜尋引擎的 「爬蟲」 來說,圖片是完全沒有內容的:無論你那張圖裡有多少文字、圖多漂亮,在原始碼中永遠都是 HTML 的一小行程式碼罷了!所以盡可能的將圖片 「文字化」…說得明白一些,對搜尋引擎來說,「文字」 才是內容、才是對 SEO 有利的關鍵所在!因為搜尋引擎是讀取原始碼的!

而圖片要如何 「文字化」 呢? 例如圖表的部分,就使用HTML+CSS來畫 、陰影可使用 CSS3 的效果達成等,就不要使用圖片檔案。

就以下例的表格來說,若一張表格以表格的方式呈現,搜尋引擎讀到的資訊如左側原始碼:

See the Pen table by Tedutw (@Tedutw) on CodePen.

但是若同一張表格以圖片的方式呈現,搜尋引擎讀到的資訊如同左側原始碼,只有一行字:

 

See the Pen table by Tedutw (@Tedutw) on CodePen.

根據以上範例可知,表格使用 HTML 製成的方式正好可以把相關訊息都寫在原始碼內,也是有機會被搜尋引擎抓取到關鍵字。若使用圖片檔表示,相關訊息就無法呈現在原始碼內。就算是優化圖片的名稱與 alt 文字,被搜尋引擎抓取的關鍵字仍很有限的。

 

 

 

 

推薦閱讀:
兩種Robots到底怎麼分?想要做好SEO優化就看這!


URL做好這五招,網頁達到SEO優化沒煩惱!


為什麼SEO優化師都在用微數據?原因是…


達內時代科技教育集團簡介


Python課程延伸發展—-AI門診你聽過嗎? 透過新科技確診只需2秒!!


全球逾四成企業將導入AI 人工智慧


今天上的網路設計課程讓我大開眼界!快來看今天我學到什麼新技術!

 

 

網頁設計初學者必學SEO技巧(一)-圖檔命名及alt文字

網頁設計初學者必學SEO技巧(一)-圖檔命名及alt文字
網頁設計初學者必學SEO技巧(一)-圖檔命名及alt文字

網頁設計也要會SEO技巧哦!不瞞你說~其實從圖片就可以辦到呢!

目錄
1. 圖片SEO的重要性
2. 8大圖片SEO心法
2-1. 使用合適的圖片檔名
2-2. 優化 alt 文字
2-3. 能不用圖片就不要用圖片
2-4. 別只靠 HTML5 的 width 與 height 來設定圖片尺寸
2-5. 圖片寬度別超過網頁的內容
2-6. 圖片 Exif 資訊 – 視狀況而刪除
2-7. 選擇適當格式的圖片檔
2-8. 創建圖片的 sitemap (進階)

 

圖片SEO的重要性

現在我們看到的 Google 商標只有 305 Bytes,經過壓縮後可以縮小為 195 Bytes。不過在 2015 年之前,舊的 Google 的 Logo 卻有 6KB (6,380 bytes)、經過壓縮後大小仍為 2 KB (2,145 bytes)。

曾經,Google 針對我們看到的新 Logo 發表了以下談話:「舊的標誌由於檔案太大,讓我們必須在頻寬較低的網路上 (就是網路連線速度會比較慢),變成文字模式的標誌。而新的標誌檔案大小降低,讓我們可以不再作任何的修正,而使用一致的標誌,讓全世界可以更容易地存取我們的資源」。

這就是我們 「Google 大神」 給大家的圖片 SEO 課程。反觀國內部分網頁設計者,希望網頁看起來更漂亮,而使用高解析度的圖片大檔。但是大部分使用者因礙於網路連線速度慢等因素,而無法看這樣高解析度的圖片。然而近年來行動設備的使用者已成主流用戶,有些用戶使用有限的資費方案,若圖片檔案過大也會吃掉過多頻寬。因此要好好優化圖片檔案,可減少連線較慢的使用者的時間、也減少有限資費方案的使用者的頻寬、但又不失圖片的顯示尺寸。

 

8 大圖片 SEO 心法

以下列舉八項基本的圖片 SEO 方法,包含圖片大小的優化。

 

1.使用合適的圖片檔名

圖片檔案不是文字 (搜尋引擎是認字的),因此能被搜尋引擎拿來當成線索的資訊很有限。而圖片的檔名是文字,對搜尋引擎來說可以給予搜尋引擎關於圖片內容的資訊。

而當你需要上傳許多圖片時,直接用相機預設的檔名 (如 IMG00050.jpg、IMG00051.jpg 等等) 對 SEO 是沒有幫助的。 你可以將圖片的檔名改成與圖片內容符合的簡短敘述。如一件印著 「Stratovarius」 樂團的 T 恤圖片,你就可以命名為:a-Stratovaiurs-shirt.jpg 就比 IMG00050.jpg 更利於 SEO。

或許你會反駁說:「Google 的人工智慧技術一直都在進步。現在 Google 藉由機器學習所便是的圖片已經多到能主動讀取圖片的訊息…你隨便輸入一張圖片給 Google Cloud Vision API(雲視覺API),裡面的 AI 就能讀取分析圖片的資料了。 如下圖所示,我給 Google 一張圖片,它就馬上讀出圖片裡面有 「貓」 的資訊。【參見:動手玩玩 GOOGLE 人工智慧影像辨識雲平台:Google Cloud Vision API

是的,但是對於部分難以辨識的圖片,Google 的 AI 還是會誤判,如下圖 Google 解讀成圖片中的物體是 「cheese (乳酪)」 ,但事實上,這是一塊奶油…因為它長得跟乳酪實在是太像了

所以要讓搜尋引擎正確的解讀你網頁上的圖片的方式,還是給它一個正確而精準的名字吧!但是千萬不要使用 「關鍵字堆砌」 的方式來命名,因為這樣會被 Google 判定為黑帽作弊網站,並被打入冷宮。【參見:SEO-white-n-black-hat-difference.html” target=”_blank”>白帽SEO、黑帽SEO,到底差在哪?】」

針對上述貓的貓咪圖片,好的與錯誤的命名範例如下:
好的命名範例: cat.jpg
錯誤的命名範例 (使用關鍵字堆砌的方式): cat-mammal-kitten-pussy-kitty

當然,單單靠圖片檔名取的好,不一定等於能排在 Google 搜尋結果前三名。但是,可以藉著圖片檔名增加與該網頁相關的線索。更何況,幫圖片重新命名並不會花你太多時間 – 所以這樣做是值得的。

 

2.優化 alt 文字

比圖片檔名更可以給予搜尋引擎關於圖片內容的線索的,就是圖片的 alt 文字。

在當網頁無法載入圖片時,使用者就會無法在網頁上看到圖片,但是會看到 alt 文字。因此對於無法看到圖片的使用者,也能透過 alt 文字理解圖片的資訊。

alt 文字在撰寫上,應以簡短的文字寫出圖片的重要特徵,再加入關鍵字。 當然,也不能以胡亂填充關鍵字的方式來撰寫之,以免被 Google 判定為 SEO 作弊而被打入冷宮。

alt 的命名相較於圖片檔名,可以用更精確、更長的文字來敘述。如上例的貓咪圖片,圖片名稱命名為 「cat(貓)」、而 alt 命名為 「calico cat with heart-shaped fur pattern (一隻毛色有愛心圖樣的三花貓)」 ,HTML5原始碼則如下例所示:

<img src="cat.jpg" alt="calico cat with heart-shaped fur pattern">

如果你的圖片是關於你賣的產品,就可在 alt 文字中放入品名、型號等重要資訊。這樣的話,若有使用者以品名或型號來搜尋,你的圖片就比較有機會在圖片搜尋的結果中出現,而提高曝光率。如果照片是關於產品的細節、不同角度等,也都可以補充在 alt 文字中作補充說明。

假如今天你經營車用電池的專賣網站。 這時你正要上架一顆充電器,品牌為 「Battery Tender」 、型號為 「022-0186G-DL-WH」。 這時你的圖片名稱可命名為 「Battery-tender.jpg」、而 alt 命名就可以加入型號等資訊,為 「Battery Tender (022-0186G-DL-WH)」。因為有時 Google 可以憑藉著型號等資訊而判定圖片為何物。另外,你還可以加入其他更精確的訊息:如產品用途、伏特數等敘述,像是 「Battery Tender (022-0186G-DL-WH) 12V 5 Amp Battery Charger」 。HTML 原始碼如下例所示:

<img src="Battery Tender.jpg" alt="Battery Tender (022-0186G-DL-WH) 12V 5 Amp Battery Charger">

 

從達內教育評價事件來看Geego(奇科?)IT培訓評論的謬誤

華人最大電腦補習機構達內教育在美國NASDAQ上市
華人最大電腦補習機構達內教育在美國那斯達克 Nasdaq 上市
圖說:華人最大電腦補習機構達內教育在美國那斯達克 Nasdaq 上市

小弟我最近陪著剛從同名補習班上完 Java 課的朋友喝咖啡,非本科系的朋友跟我炫耀說:他現在也會寫程式。目前還有兩間科技公司「聖X」跟「德X」要應徵他為工程師,目前還在等朋友的回應……真是跩啊~小弟不禁好奇問問朋友達內教育評價如何?為何還可以讓一個門外漢也來跟我們一樣都成為「科技碗糕」了?

小弟為了查詢達內教育評價,也成為達內「IT沃客」FB 的粉絲了。每天看著他們在我的 FB 投遞廣告,似乎也在暗示著我需要進修電腦課程,單單靠著「就醬」速成班短期訓練出來的成果,還是無法跟企業需求接軌……光靠證照考試通過不代表你可以出頭天。不過在搜尋「達內教育評價」的過程中,也觀察到補教業者攻擊同業的招數…

已改名成富捷IT培訓的Geego奇科IT培訓還要靠在部落格上抹黑同行來苦撐業績
已改名成「富捷IT培訓」的「Geego奇科IT培訓」在自家的部落格上惡意抹黑同行,圖片左上方為Geego 富捷IT 培訓 (原:奇科培訓) 的標誌。
圖片來源 / 翻攝自Geego 富捷IT 培訓 (原:奇科培訓) 部落格

過程是這樣,我有一個外文系出身的姪子,他想要跟我朋友一樣,轉跑道學習JAVA。我就幫他使用 Google 搜尋「達內教育評價」,結果第一個就是「美好的外表,隱藏的秘密 – 剖析達內的秘辛」,從網址看到 geego.com 等字眼,等等!那不就是 Geego (奇科培訓) 的部落格嗎?這誰啊,不就是日前改名為「富捷IT」的電腦補習班嗎?看來寫這篇文章的人很有事,達內教育評價被陰了,還能被操作到 Google 第一頁!等等我也用局外人的身分,撰寫「剖析富捷的秘辛」,看看是否也能到第一頁(誤),哈哈!

就在這個時候,我看到「奇科Geego」的編輯(自稱是月薪 5W 的小小系統工程師)寫道:「我找不到『達內』這間補習班在台灣有任何立案的資料……原來當時風光登台的『達內教育』只是一間名為『上台科技股份有限公司』代理的…(原來是加盟店呀)」

於是,我問了在上台工作的朋友,發現真相如下: 「上台科技電腦技藝短期補習班」為美國那斯達克上市的「達內時代科技集團有限公司 (美股交易代碼:TEDU),簡稱達內集團」的總代理商,所有的服務、管理與課程皆受到達內集團總公司監督,並針對台灣的產業作調整。絕非「富捷IT培訓」部落格文章中所說的「加盟店」

已改名成富捷IT培訓的Geego奇科IT培訓惡意攻擊同業的撰文者,自稱為「月薪 5W 的小小系統工程師」
已改名成「富捷IT培訓」的「Geego奇科IT培訓」在自家的部落格上惡意抹黑同行,

自稱為「月薪 5W 的小小系統工程師」
圖片來源 / 翻攝自Geego 富捷IT 培訓 (原:奇科培訓) 部落格
後來,小弟也對達內教育評價中,所謂的「視訊教學」效果感到好奇。

原來他們有資深的老師們在現場學員們服務,Java 和 Python 等程式語言都可以問他們!若學員聽課聽累了,還可以找他們聊聊呢!可見這位「月薪 5W 的小小系統工程師」需要多多了解了。

 

老牌「奇科 Geego IT 培訓」教育機構改名「富捷IT培訓」出奇招,攻擊同業以增名氣

小弟在查詢達內評價的資訊之餘,基於好奇心,也想認識這位「月薪 5W 的小小系統工程師」所效力的 Geego 是何方神聖,手刀查詢了關鍵字「Geego」,看到以下訊息: 富捷IT培訓 (原:奇科培訓) 成立於民國92年(西元2003年)……

改過名的富捷IT培訓 (原:奇科培訓) 都經營那麼久了,還需要靠抹黑同業來證明自己的價值,讓人嘆息!

針對這位「5W工程師」的惡意攻擊行為,小弟想送他一句話: 江湖在走,本錢要有。若沒本錢,就別來亂! 慎選進修管道,因為這都將成你人生的一部份。 OS:奇科、富捷IT、月薪5W的小小系統工程師 傻傻分不清楚~

 

 

推薦文章:
保險業務主管不被惡評達內PTT誤導開啟自身Java工程師職涯!!

最真實的達內教育評價告訴你如何從非本科生蛻變成Java工程師!!

2018百度品牌數字資產榜揭曉,達內教育上榜!

達內時代科技教育集團簡介

電腦不只會選花生,還會養蝦!!!! 人工智慧養出來的蝦還比較大隻呢!!

靠著Python課程的大力推廣,這些AI電影離我好近!

想當斜槓青年就一定不能錯過AI人工智慧,物聯網,大數據,VR/AR!!

 

程式語言大不同!軟體工程師淺談Python跟Java區別~

程式語言大不同!軟體工程師淺談Python跟Java區別~
程式語言大不同!軟體工程師淺談Python跟Java區別~

聽軟體工程師分析Python跟Java的不同後,會更清楚哪個才是你的首選!

你知道現今最熱門又最不同的程式語言是什麼嗎?就是Python 和 Java 啦!其實對現在的科技業來說,兩者都是十分有用工具,且瀏覽各大求職網站,Java 工程師近十年來一直是科技業赤手可熱的職缺。而新興的 Python 語言,職場上對於會 Python 語言的工程師的需求也越來越高。假設現在你想轉職工程師,卻又不知學哪種程式語言的話,可以參考本篇文章。

1、動態類型 vs. 靜態類型

Java 和 Python 最大的區別之一,就是兩種語言處理變數的方式。Java 強迫你在第一次聲明變數時,就必須要定義它的類型,且不可再修改,這就是「靜態類型」。而 Python 不需要在一開始就聲明變數的類型,且後續可以改變一個變數的類型,例如可以把整數變數替換為字符串(string)。

2、Python 中一切皆為物件

在 Python中,無論是數值(整數、浮點型)、字符串、字典、元組對象、還是他們所對應的類型,以及函數、模塊等,都是物件,他們的祖先是PyObject。而 Java 中的函數,基本數據類型等都不算物件。

3、括號和縮排

Python 與眾多程式語言的不同之處,在於它使用縮排區分程式區塊(block)。而 Java 與其他大部分的程式語言都是使用大括號定義函數和類定義的開頭和結尾。使用縮排的好處在於程是碼會比較易讀,且不會有缺括號導致錯誤的可能。

4、軟體可移植性

Java 的可移植性 (可攜性) 更強,可以用於開發平台獨立的應用。這是 Java 相較於 Python 的優勢之一,任何可以運用 Java 虛擬機器 (JVM) 的電腦或者行動裝置都可執行 Java 的應用。相較於 Java,執行 Python 的程式就比較麻煩,都需要一個編譯器來將 Python 代碼轉化為你的作業系統可理解的代碼。因為大部分的設備有安裝了 Java 虛擬機器 (JVM) ,所以 Java 工程師可以很自信的說他們的開發出來的 Java 應用,幾乎對所有的用戶都可用。

5、Python 的 GIL

Python 的 GIL (全局解釋器鎖) 一直被不少開發者所詬病。Python 的多執行緒在多 CPU 條件下,並不能一併運行,而必須要在每個執行緒運行時,先需要獲得解釋器的訪問權限,才可以運行。在一個執行緒運行時,其他的執行緒只能處於等待的過程,不過這方面的問題可使用多工處理機制來彌補。而 Java 支援真正的多執行緒,控制資源的的共享很到位。

6、應用領域

Java 主要用於商業邏輯強的領域,如電子商城系統、金融、保險等傳統資料庫事務領域,通過類似 ssh 框架事務代碼,對商業資料庫,如 Oracle、DB2、SQL 伺服器等支援較到位。Python 主要用於大數據分析、金融分析、信息分析、圖像演算法、數學計算、統計分析、算法建模、伺服器運算、自動化操作、開發速度快,適合需要快速靈活開發的產業。

哪一個更好上手?

一開始也許是 Python 較好上手。因為 Python 的語法設計很直覺,讓新手們可以快速上手、寫各種應用程式。但是入門簡單,並不代表會一直簡單下去。要學會巧妙運用 Python,還需要學習各種 Python 的函式庫。Python 的強大在於函式庫,因為 Python 的函式庫可以用 Python、C 語言、C++等程式語言設計,再提供給 Python 使用,所以不管是 GPU 運行、神經網絡、智能算法、數據分析、圖像處理、科學計算等,各式各樣的函式庫都在等著你來學習。而 Java 就沒有那麼多函式庫,無論是入門還是進階,學習的難易度相較於 Python 都較平均。

推薦文章:
咖啡搭上Python課程,在家就可以品嘗冠軍級手沖的香醇!

潛在疾病該怎知道?有Python課程新創AI基因平台幫你分析!

百度騰訊搜圖都靠他-Python課程AI訓練大師

程式課程選達內,美上市IT課程教育集團

Java課程助你擠進IT專業職場大門

AI人工智慧進駐大賣場!! 有了這項新技術就能讓員工更專注在客服務上了!!

身為前端工程師的你,夠瞭解自己的工作嗎?