行動版網站的三種配置方式-RWD、動態服務、獨立網址

SEO教學
行動上網已成為主流!該如何設計行動版網站?

圖片來源:Pexels

行動上網已成為主流!該如何設計行動版網站?

行動版網站的配置,對於現在這個人手一機的時代越來越重要,規劃良好的行動網站結構,能讓手機或平板的使用者隨時瀏覽網站不受限,擁有更佳的使用體驗。

在2016年行動裝置帶來的流量已經正式超越桌機

圖片來源:StatCounter

根據StatCounter統計,2016年10月全球行動上網用量首度超越桌機(桌機48.7%,手機與平板51.3%),行動上網顯然已成主流,意味著網站內容的呈現也得優先考量行動裝置的瀏覽習慣和需求。

Google也於今年3月發佈公告:經過一年半的實驗和測試,Google已開始採用「行動優先索引」收集網站內容資料,也將以行動裝置條件作為網站評分依據。

〈Google官方部落格:Rolling out mobile-first indexing

 

一般來說,行動版網站有三種配置方式:RWD響應式網頁設計動態服務獨立網址

RWD響應式網頁設計(Responsive Web Design)

RWD響應式網頁設計

 

相同網址,相同內容

網頁內容根據訪客的螢幕尺寸來調整畫面的呈現,讓訪客不需要透過縮放即可完整瀏覽網站內容,為Google最建議的行動網站配置方式。

優點:

  • 維護容易,成本低
    只需一個網站即可,降低網站的開發及維護成本。
  • 利於SEO(搜尋最佳化)經營
    在相同網址的情況下,能避免重複性頁面,以及分散搜尋排名的問題。

缺點:

  • 網站不適合有太複雜的功能或介面
    必須妥協桌機與手機之間的差異,無法設計過於複雜的網頁。
  • 網站載入時間較長
    相較於將多餘內容隱藏的純手機版網站,RWD載入的是完整電腦版的網站內容,因此網站載入的時間較長,但這問題可由開發人員優化後改善。

動態服務(Dynamic serving)

動態服務—相同網址,不同內容

相同網址,不同內容

在相同網址的情況下,網站會依據訪客的裝置設備,給予不同的網頁內容,提供較佳的使用者體驗。

優點:

  • 利於SEO(搜尋最佳化)經營
    在相同網址的情況下,能避免重複性頁面,以及分散搜尋排名的問題。
  • 提供較具差異性的網頁
    針對不同裝置的客戶,提供不同版本的網頁,為用戶帶來較佳的使用體驗。

缺點:

  • 維護成本較高
    須開發及維護兩套獨立的html代碼、CSS、JavaScript,因此需較高的成本。
  • 導入複雜
    為避免錯誤的向行動版用戶提供桌機版頁面,須使用Vary HTTP標頭,提供信號給伺服器,以呈現與裝置相對應的網頁內容。

獨立網址(Separate URLs) = 大小網

獨立網址—不同網址,不同內容

不同網址,不同內容

依據訪客的裝置設備,自動轉址到適當的網址,或讓訪客自行選擇要點選到哪個版本的網站,訪客使用桌機和行動裝置能看到不同的網址及網站內容。

優點:

  • 提供較具差異性的網頁
    針對不同裝置的客戶,提供不同版本的網頁,為用戶帶來較佳的使用體驗。

缺點:

  • 維護成本較高
    因為使用不同的後台與獨立的資料庫來控制網站的資訊,桌機版和行動版須分開更新,管理成本相對較高。
  • 重複性頁面問題
    容易因技術上的問題,造成重複性頁面。
  • 不利於SEO(搜尋最佳化)經營
    除重複性頁面外,也容易造成分散流量及搜尋排名的問題。

三種行動版網站配置方式比較:

配置方法 網址保持不變嗎? HTML保持不變嗎?
RWD響應式網頁設計 v v
動態服務 v x
獨立網址(大小網) x x

在了解三種行動網站設計的優劣勢後,可依照自己網站的特性及條件,根據實際需求選擇最好的方案!

 

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *