RWD 是什麼?與 AWD 有什麼不同,響應式網站設計對 SEO 好處介紹

RWD vs AWD

跟據 TenMax 研究調查指出,台灣網路使用者人數已經達到 90% 以上,幾乎可以說是全台灣人口都會上網,由於智慧型手機的普及,更有 95.8% 的台灣使用者會用智慧型手機上網,瀏覽電商網站,看看新聞網站,可以說手機離不開生活。在這個趨勢下,網站就必須要更需要符合小螢幕下可操作模式,Google 官方也不斷地強調行動裝置優先,如果你的網站符合行動裝置設計,就有機會在搜尋結果頁面有更好的排名。而目前常見的網站設計方式以 RWD 與 AWD 方式為主,以下 awoo 就跟大家介紹什麼是 RWD 與 AWD,以及兩者的差異。

什麼是 RWD(Responsive Web Design) 響應式網站設計?

在這個人手一機的時代,幾乎每一個人都會用手機上網,awoo 也會跟許多合作的客戶強調行動版網站的重要性。而 RWD 響應式網站設計名詞是在 2011 年由 Ethan Marcotte 所提出的,強調用同一套網站設計在不同地裝置(桌機、平板、手機)都可以輕鬆瀏覽。

圖1:RWD 可在不同裝置上順暢地瀏覽網站,來源:searchenginejournal

而在 RWD 時,最重要的就是要先在檢視區(viewport)設定好瀏覽器控制和載入比例:

這代表指定螢幕寬度為裝置寬度,載入畫面一開始縮放比例為 100%,讓頁面不會跑版

 

其次透過 CSS3(Cascading Style Sheets) 的媒體查詢 (media query) 在適合地斷點 (break point) 進行版面或內容上的調整,大部分地情況下會是頁面上的區塊變化或者圖片大小調整,這會讓頁面有一致性體驗。

RWD 基本原理是運用 CSS3 媒體查詢來變化網頁的內容

最後就是決定變化的形式,例如內容下排或者區塊移動等等方式,可以流暢地在不同裝置之間進行變化。

 

什麼是 AWD 網站 (Adaptive Web Design) 自適應網站設計?

自適應網站設計是較響應式網站設計更早期的設計,但是目前來說還是有部分公司會採用該設計,它是針對不同裝置給予相對應的版本的網站,例如 momo 購物商城,會根據電腦版給予 https://www.momoshop.com.tw/main/Main.jsp 和手機版 https://m.momoshop.com.tw/main.momo 兩種版本網站,這可以完全根據裝置的特性進行設計,讓使用者具備有更好的操作體驗。但是事實上,不管是設計上或者是維護上,自適應設計的方式都會較為費工,可能在後台管理上也需要兩種版本,因此在採用該設計前,需要評估維運的人力和時間是否充足。

圖2:momo 購物網站提供兩種版本網站,讓不同裝置有絕佳體驗

 

RWD 與 AWD 設計哪一個好?建議使用哪一種網頁設計?

在知道哪一種設計比較好之前,我們先來比較兩種設計的差異:

網站設計方式 RWD AWD
中文全名 響應式網站設計 自適應網站設計
常見網址形式 只會用www版本 通常會分成www與m兩種版本
開發成本 較低 較高
網頁載入速度 中等 較快
設計優點 僅需要一個網址就可以滿足不同裝置 可根據電腦或手機版本提供最佳化的體驗
設計限制 設計初期需要考量多個裝置情況,需要花費較多時間研究 需要同時維護兩版本,如果需要更新或升級,需要兩種版本同步進行
適用對象 企業形象網站、品牌網站等等 大型綜合或系統複雜網站
對SEO可能的影響 網址頁面單一,操作策略可同步適用 可能會有重複內容問題產生

 

在要決定使用哪一種設計時,awoo 建議先從三個面向評估,分別是網站類型、維護人力、預算:

1. 網站類型

在確認要採用哪一種類型設計時,要先確認自家網站類型,如果是大型且有複雜系統功能的購物網站需求,採用 AWD 方式可能會比較好,可以提供行動裝置較好的操作體驗。但如果是一般的企業網站,目的是為了打造具有良好形象的網站,採用 RWD 方式會是最好的選擇,因為它可以用同一套視覺設計運用在不同的裝置上,可以保持品牌視覺ㄧ致性。

2. 維護人力

有多少人力可以維護也是重要的考量的因素之一,如果在上下架商品或營運上可以有整個部分或充足人力的話,就可以建議採用 AWD 方式,可以更順利維護兩種版本的網站。但是如果網站管理人員只有一兩個人,又需要經常性更新內容,那採用 RWD 方式,會對企業本身是最好的選擇,可以同步維護。

3. 預算費用

預算是影響選擇 AWD 或 RWD 重要因素之一,如果今天預算較為充足的話,可以建制較全面的系統以及綜合性功能網站,則可以選擇 AWD 方式。如果預算較少,但又需要同時擁有三種版本網站,則 RWD 是較符合經濟效益的選擇,這也是為什麼 RWD 越來越受歡迎的原因。

Google 為什麼建議採用 RWD?RWD 較符合 SEO?

Google 因為以行動內容優先作為索引以及排名的主要依據,針對行動裝置設計有給予建議,在回應式網頁設計一文中提及建議使用 RWD 的好處,awoo 以下也補充說明對於 SEO 好處:

1. 單一網址

使用單一網址可以幫助使用者好辨識網頁內容,同時提高網址與頁面內容關聯性。

2. 較容易索引

由於使用同一套網頁文本,可以較正確幫助 Google 為網頁指定索引屬性,不需要額外發送其他訊息告訴 Google 何種網頁為電腦版或行動版。

3. 無需重新導向

進行電腦版/行動版切換時,無需要進行重新導向,節省讀取時間,提高使用者體驗。

4. 節省檢索預算

Google 機器人對 RWD 網頁進行檢索時,可以更快檢索不同版本的網頁內容,而不需要根據不同版本網站重新檢索,如此可提高檢索效率,讓 Google 機器人可以爬取到更多網頁內容。

5. 維護成本低

網頁設計師或工程師僅需要維護單一文件,無需額外再花時間處理其他版本文件。

6. 降低行動版網站錯誤發生機率

可以減少像是行動版網頁無法索引、需要重新導向或載入速度變慢的問題。

參考資料:行動版內容優先索引系統的最佳做法

參考資料:回應式網頁設計

 

RWD 響應式網站設計 SEO 常見問題

以下列出響應式網站設計在 SEO 上常見的問題。

Q1:使用 RWD 響應式網站設計,網站排名就一定會好嗎?

A1:雖然 Google 建議使用,但這不代表網站排名就一定會靠前,影響網站排名因素很多,使用響應式網站設計可能會讓你的網站贏在起跑點,但是網站速度、外部連結或豐富內容等方面還是要優化,這樣才有機會讓網站競爭到好的排名。

Q2:使用 RWD 響應式網站設計,Google 機器人檢索和索引就沒有問題?

A2:官方說明使用 RWD 響應式網站設計可以節省檢索預算,增加檢索效率,但是不代表就一定會檢索順利,還要檢查 server 端是否阻擋機器人,或者 robots.txt 是否有阻擋設定,頁面是否下 noindex 語法,或進一步去 Google Search Console 檢查看看是否有未索引頁面等等。

Q3:要如何評估 RWD 響應式網站設計?

如果想要知道 RWD 響應式網站設計的網站體驗,可以進入到 Google Search Conosle 內的網站體驗進行確認,或者透過 PageSpeed Insight行動裝置相容性測試來確認網站的狀態。

Q4:如果網站目前採用 AWD,會建議改用 RWD 嗎?這樣會對 SEO 比較有幫助嗎?

如果想要從 AWD 改用 RWD,還是要先評估改成 RWD 後,系統功能面上是否可以滿足企業本身的需求,如果改變後,會造成維運的難度,建議還是採用 AWD,但如果不會造成任何影響,確實可以考慮改成 RWD,但是不管使用哪一種設計,在 SEO 策略還是需要花時間經營,提供好的內容與商品,讓網站能夠具備有競爭力。