首頁 » 新·SEO » 技術 » RWD 網頁是什麼?SEO 必備功能?網站改版前請看過來!

RWD 網頁是什麼?SEO 必備功能?網站改版前請看過來!

rwd網頁設計是什麼

RWD 響應式網頁設計成為架站標配功能,市面上除了 RWD 網頁以外,還有什麼手機版網頁的開發方式?又該如何從中選擇?如果我的網站不是 RWD 網站,就不能做 SEO 嗎?

本文將會帶你從 RWD 切入,全面說明網站行動裝置開發方式,讓你尋商思路更清晰!

RWD 網頁是什麼?為什麼越來越多網站都用 RWD?

RWD 網頁是什麼?

RWD 響應式網頁設計,又稱回應式網頁設計,英文為 Responsive Web Design,命名方式非常直覺,「Responsive」代表著我們網頁的內容可依據裝置瀏覽器的螢幕寬度,「回應」在視覺排版上。

在技術上,它是怎麼實現的?

根據 Google 說明,RWD 網頁可讓伺服器一律向所有裝置發送相同的 HTML 程式碼,並透過 CSS 調整網頁在裝置上的呈現方式。如此網站的訪客無論採用任何裝置瀏覽,都不用縮放、捲動就能瀏覽到完整頁面。

網站有或沒有採用RWD網頁設計的差異
🔼網站沒有採用與採用 RWD 網頁設計的差異🔼

因此,談到手機版網頁,RWD 最常被提到,因為在網頁體驗上,對行動裝置使用者非常友善。

RWD 的重要性與趨勢

為什麼我們要讓我們的網站對行動裝置友善,先為你整理 2 大原因:

  • 越來越多人用行動裝置上網與購物:根據資策會 FIND 公佈最新調查結果顯示,國內12 歲以上使用智慧型手機或平板電腦者已達到 1600 萬人
  • 想做 Google SEO:Google 看重網頁體驗,把行動裝置相容性納入排名要素,且在2019 年,優先索引行動版內容(這是後話)。

行動裝置的普及性,同時催生「響應式設計」概念的誕生。這是美國網頁設計師 Ethan Marcotte 因有感於即便網頁視覺排版設計精美,但呈現在各式各樣、不同寬度的裝置時,會因為比例不同版面被裁切,甚至導致內容難以辨認的情形,進而提出的概念。

正如我們現在所見,「響應式網頁」技術如今已經相當成熟,並逐漸取代傳統網頁設計開發方式,也就是我們等等會聊到的大小網,成為全球公認的網頁設計開發技術趨勢。

RWD、AWD、手機網站建置哪個好? 3 大網站開發方式差異比較

我們如果要建立手機版網頁,其實包括 RWD,共有三種做法,分別是本文主角 RWD、AWD 自適應網頁、手機桌機的獨立網站(俗稱大小網)。

RWD
(響應式網站)
AWD
(自適應網站)
手機桌機的獨立網站
(大小網)
頁面網址手機、桌機同網址手機、桌機不一定同網址,但可以做到完全一樣手機、桌機不同網址
不同裝置的呈現內容手機、桌機相同頁面內容可不同頁面內容不同

以 SEO 的角度出發,網站桌機版與行動裝置版的頁面與網址不同會有什麼影響?我們可以從 Google 為什麼推薦 RWD 網站的角度來切入。 

做 SEO 必備響應式網頁設計,Google 怎麼看?

Google 特別為響應式設計網站建立頁面單獨說明,它在該篇文章條列推薦 RWD 的原因,以下為簡單說明:

  • 建立外部連結的時候比較容易處理,資源在累積上不會被分散
  • Google 想推薦我們的時候,也比較容易去判斷,不必在兩個版本間做選擇
  • 相同的頁面只有一個版本,工程師只要維護一個版本的網頁
  • 不必考慮使用者裝置跳轉時連結路徑的相關技術,減少錯誤發生率
  • 相較大小網的開發方式,響應式網站可以根據瀏覽視窗調整呈現方式,符合使用者經驗
  • 節省 Google 的檢索預算,Google 只需要檢索一次響應式網站的頁面內容

小結 2 點:

  • SEO 不用做兩次
  • 同樣的關鍵字,Google 很難判定要推哪一個
Google :為什麼要使用回應式設計

很多人說要有回應式網頁設計才能做 SEO?

RWD 響應式網頁確實比較容易做 SEO,這是不能否定的事實,不過經營網站還需要考慮網站管理維護與網站效能。

RWD
(響應式網站)
AWD
(自適應網站)
手機桌機的獨立網站
(大小網)
開發時間快~中
開發成本低~高中~高低~高
管理維護較容易管理維護容易管理,但維護複雜,因為網頁同時有多種版本資源相等於管理維護 2 網站,較難
網頁載入速度🔺

相較大小網把網站分成 2 個版本,不影響全站的網頁載入速度,而 RWD 需要透過優化圖片等方式才能提高網頁速度,才能追趕另外 2 種開發方式的性能。

所以從這點來看, 如果 RWD 沒有處理好這塊,不一定能做好 SEO(因為網頁載入速度也是 Google 的排名要素 )。

這也順帶聊到做 SEO 只有響應式網頁才能做嗎?很多業者會突然被架站廠商告知,他們的網站因為沒有 RWD,所以不能做 SEO。

其實要做好 SEO,單談 SEO 技術面,響應式設計只在行動版網站配置會被提到,我們在技術面還會提到像是結構化資料robots.txt網站地圖、頁面要素、主機與網域⋯⋯等共 12 項需要了解與著手建立的項目。

另外,以流量非常大的博客來為例,雖然他們沒有採用響應式網頁設計來開發行動網站的配置方式,不過它的搜尋流量佔了全站的 50% 以上,且是流量在台灣書店的電商購物類別排名是第一名。

博客來網站流量.png

小結

本次為你介紹響應式網頁,除了從人們上網趨勢來去切入它的重要性,同時也進一步為你說明它是 Google 都推薦且適合做 SEO 的網頁設計開發方式。當然也不是說其他的行動網站配置方式就沒辦法做好 SEO,甚至響應式網站也不一定能做好 SEO。

希望我們今天的內容能幫助到你,我們有豐富的架站經驗,也擔任多家企業的網站建置顧問,如果有任何網站建置需要諮詢的問題,都歡迎填寫表單與我們聯絡!

立即預約我們的專業顧問