RWD 響應式網站設計是什麼?對 SEO 的好處有哪些?

談到手機版網頁,最常被提到的就是 RWD。究竟什麼是 RWD 呢?RWD,也就是響應式網站設計,英文為 Responsive Web Design。Responsive 響應式代表著,網頁內容可以依照螢幕寬度,馬上反應在排版上。也就是說,同一個 HTML 文本,可以透過 CSS 編寫,依照不同裝置(手機、桌機、平板)螢幕寬度,無論直立或橫放,都能流暢的縮放、更改版面配置、甚至是控制網頁上的文字顯示與否。

一般提到「建立手機版網頁」,有三種做法,分別是:RWD、AWD、手機桌機獨立網站。

 

簡單的差異如下:

RWD,Responsive Web Design,響應式網站

手機、桌機同網址。同一個 HTML 文本,CSS 能依照不同螢幕寬度的條件,來改變排版。

 

AWD,Adaptive Web Design,自適應式網站

手機、桌機網址,可以做到完全一樣。不同的裝置開啟時,會先判定裝置是哪一種,來給予不同的 CSS,進而改變排版。

 

Separate URLs,手機桌機各自為獨立網站,不同網址

手機、桌機網址不同。保持電腦版網站不變,另外做一個專門給手機用的小尺寸網站。所以也可能會有不同的 HTML 文本、CSS、JavaScript 檔案。

把「Separate URLs」,拿來這邊跟 RWD、AWD 討論,有點奇怪。畢竟,AWD 網站也是可以做成「手機、桌機網址不同」,但是為了順應下面本篇文章主軸,會針對 SEO 優缺點來討論,就暫且讓我們用比較粗淺的方式來分類。

 

什麼是 RWD 響應式網站(Responsive web design)?

要開始討論對 SEO 影響之前,可以先了解什麼是 RWD 響應式網站?原理是什麼呢?RWD 是透過檢查螢幕寬度(瀏覽器寬度),讓網頁上的內容,可以改變文字大小、行距、整體排版、區塊位置、圖片縮放等等樣式。無論你是用手機開網頁、電腦開網頁、平板開網頁,網頁內容的版面配置,都可流暢的依照瀏覽器寬度來改變,用一套網址就可以走天下啦!

 

直接看下面影片就可以清楚了解:

 

RWD 重要的精神:設置檢視區 viewport

RWD 最重要精神,就是會依據「螢幕寬度」,也就是檢視區寬度(viewport),來改變網頁上的內容排版。在 HTML 文本上,應該要註明 meta name=”viewport” 的標籤,讓瀏覽器清楚知道,「寬度尺寸變化」與「網頁的內容縮放」兩者的比例。

  • 利用 meta viewport 標籤,控制瀏覽器大小變化時,網頁內容的寬度、縮放該如何調整。
  • 註明 width=device-width ,讓網頁內容可以依據「裝置寬度」,靈活運用裝置的獨立像素,可以自由改變排版。
  • 註明 initial-scale=1 ,讓網頁 CSS 像素:裝置獨立像素=1:1,如此一來,無論手機直立、橫放,都能確保網頁能完整運用螢幕寬度。
Viewport安裝前後差異示意圖
左圖:有設定 viewport,右圖:沒有設定 viewport (此為模擬圖,畫面擷取自美麗佳人Marie Claire)

 

RWD 重要的精神:使用 CSS @media,針對不同螢幕寬度,套用不同樣式

RWD 網頁,之所以可以隨著裝置螢幕寬度來改變版型,最大的功勞就是來自於 CSS 樣式。簡單來說,我們可以用 CSS 設定條件,在不同的螢幕寬度之下,可以使用不同的字型大小、行距、版面位置。

  • 在 CSS 中,大型元素使用「相對」寬度,避免使用「絕對」寬度。因為各家手機、平板,螢幕大小不同,設定了「絕對」寬度,難以保證可以在所有類型裝置上正常顯示。例如,在頂層 div ,設定 width: 100%,而不要使用 width: 344px。
  • 使用 CSS @media 以針對不同大小的螢幕套用不同的樣式。

@media 的語法,是一種簡易的條件篩選功能,可以套用在 CSS 樣式中,當螢幕寬度符合條件,就會查詢到相對應的 CSS 樣式。

例如,當螢幕寬度小於、等於 600 px 時,背景會是 lightblue ,當螢幕寬度大於 600 px,背景會是 lightgreen。

上面的 CSS 寫法,可以到這邊看結果。(使用滑鼠拉右側視窗的寬度,就可以發現顏色變化。詳見下圖)

 

下圖是跑出來的結果:

網站RWD優化-CSS隨螢幕寬度效果變化
螢幕寬度小於、等於 600 px 時,背景會是 lightblue

 

網站RWD優化-CSS隨螢幕寬度效果變化
當螢幕寬度大於 600 px,背景會是 lightgreen

 

RWD 響應式網站上關於 SEO 的設置

RWD 響應式網站有哪些設定,與 SEO 相關呢?在 SEO 領域中,「使用者體驗」一直是 Google 非常強調的。例如:手機網頁是不是好操作?按鈕夠不夠大?文字間距夠不夠寬?流程是不是順暢?瀏覽的畫面是不是有符合螢幕寬度?網頁載入時間是不是夠快?

 

這些都是 SEO 中,非常重要的一環,也剛好是 RWD 技術的重點。

  • 使用 meta name=”viewport” 標記,向瀏覽器聲明,網頁內容可以配合裝置寬度調整大小。
  • 請勿使用 robots.txt 或其他方式,擋住 Googlebot 檢索任何網頁資產 (CSS、JavaScript 和圖片),以避免 Google 無法正確解讀 RWD 的網頁配置。
  • RWD 響應式網站上線後,使用 Google 行動裝置相容性測試,檢驗 Googlebot 是否能正確解讀,並且預防有不小心擋掉 Googlebot 的狀況。
  • 使用響應式圖片技術(Responsive Images)。除了可依據裝置寬度,調整圖片比例之外,在高解析度裝置上,也可給予高解析度圖片。另外,也可以結合 CSS 的 @media 篩選功能,對於不同裝置寬度,給予適合的圖片檔案,避免圖片檔案過大。
  • Google 建議使用「適應性 JavaScript( JavaScript-adaptive)」。

 

延伸閱讀:

響應式圖片 | Web Fundamentals | Google Developers

回應式網頁設計 | 搜尋 | Google Developers,其中的「適應性 JavaScript」段落

 

RWD、AWD 哪種對 SEO 比較好?手機桌機各為不同網址,對 SEO 不好嗎?

關於 RWD、AWD、手機桌機獨立網站,SEO 最好的是哪一種?Google 官方表明,並沒有偏好哪一種技術,只要你確保 Googlebot 可以存取網頁、可以存取到網頁上所使用的 CSS、JavaScript,就沒有問題。

 

但是,如果單純從「Google Search」官方說明,來探討「RWD、AWD、手機桌機不同網址」哪種對 SEO 比較好呢?

SEO 項目 RWD 響應式設計 AWD 自適應設計 獨立的手機網站
解決重複內容問題
減少重新導向
節省 Google 檢索預算
加快網頁載入速度

 

  1. 重複內容

當手機版、電腦版網址不同時,如果 Googlebot 判定發生問題,例如,沒有在手機版 HTML 文本,註明「電腦版的對應網址」,導致 Google 演算法收錄不正確的網頁作為電腦版網址。或是,將手機版頁面視為桌機版的「重複內容」,這兩種情況,都會讓 SEO 上的處理相當棘手。

所以,就「重複內容」議題,推薦使用能做到「單一網址」的 RWD、AWD。

 

  1. 減少重新導向(轉址)、減少重新導向錯誤

當手機版、電腦版網址不同時,可能在切換裝置時,會透過「重新導向」,將使用者帶到適合的頁面。像是,用手機開啟電腦版網址時,會自動轉址到手機版網址。

但是,重新導向讓使用者等待更久,更容易放棄,更容易直接跳出。另外,在設定重新導向時,也常會發生錯誤。例如,應該用 302 重新導向,卻誤用 301 重新導向,或是導向到錯誤的網址,都會影響搜尋的排名表現!

所以,就「減少重新導向錯誤」議題,推薦使用能做到「單一網址」的 RWD、AWD。

 

  1. Googlebot 的爬取也是有預算上限(Crawl budget)

什麼是 Googlebot 的爬取預算呢?基本上,Googlebot 會依照網站流量、更新速度,來決定造訪這個網站的頻率,以及 Googlebot 投入在這個網站的時間。大家泛稱這個概念為「Googlebot 爬取預算(Crawl budget)」,Google 也曾經撰文解釋

當手機版、電腦版網址不同時,需要在各版本的 HTML 文本,指明相對應的電腦版、行動版網頁。Googlebot 可順著這個指示,前往不同版本,繼續爬取。

但是,比起「手機、電腦單一網址」來說,「手機、電腦網址不同」花費了 Googlebot 更多的爬取預算在不同版本、相似內容上面(手機版、電腦版)。

若網站規模小,不會有什麼影響。但對於越大的網站(有效 URL 數量在 1,000 以上的網站)、更新頻率越高的網站(例如每日都有新文章產生),會有較大的影響。

所以,就「節省 Googlebot 的爬取預算(Crawl budget)」議題,推薦使用能做到「單一網址」的 RWD、AWD。

 

延伸閱讀

什麼是爬取預算(crawl budget)?網站速度優化,從Google Page Speed Insights開始

 

  1. 網頁載入速度

網頁載入速度一直是「使用者體驗」主要指標,Google 曾經重申多次,「網頁載入速度」是決定自然排名、關鍵字廣告排名的因素之一

那麼,若是在同樣的「硬體條件」、「網路頻寬」下,該選擇哪種技術架設網站呢?(繼續往下探討之前,要聲明一下,這邊的技術探討,是以廣泛來說,不代表絕對的優劣。

能專門為「手機裝置」、「手機網路頻寬」,來量身訂做 HTML、JavaScript、CSS,是最能保證手機版網頁載入效能的方式之一。

AWD 自適應式技術,就是專門為手機裝置所開發,能充分為網頁載入的效能優化。

而 RWD 響應式技術,手機、電腦都是存取同一份 HTML、JavaScript、CSS,若網站層級、資料量龐大,有可能會造成檔案肥大,影響網頁載入速度。

 

延伸閱讀:

Mobile SEO必學!行動版網站健檢Search Console幫你做

 

除了 SEO,經營網站,還有其他重點需要考量

擁有一個網站,除了 SEO,還有其他重點需要考量。我們粗略分成兩大部分來看:

  1. 手上能運用的資源:人力、開發時間、管理及維護成本。
  2. 網站內容需求:內容資料量、功能複雜度、畫面要求程度。
評估項目 手機、電腦獨立網站 RWD 響應式設計 AWD 自適應設計
開發時間 快速~中 較久
管理及維護 較難管理及維護,因為同時有 2 個網站。 較容易管理、維護。 較容易管理,但維護上複雜,因為可能同時有多種版本網頁資源。
費用 視網站複雜度,費用由低到高不等。 依照網站需求、版面複雜度,費用由低到高不等。 依照網站需求、版面複雜度,費用由中到高不等。

因為 RWD、AWD 在 SEO 先天條件上差異不大,反而與「工程層面」、「功能需求層面」有高度相關,誠心建議在選擇之前,協同「網站產品經理」(清楚了解網站訴求、功能、SEO 項目)以及「工程開發團隊」(清楚了解工程層面的複雜度、後續維運成本),雙方一起討論,評估最適合的成本,並有利於後續維運,才是最適合的選項!

 

參考資料:

回應式網頁設計 | 搜尋 | Google Developers

回應式網頁設計基礎

不會寫CSS也能懂!如何選擇RWD或是AWD?—— Lucy

New call-to-action
Hailey Huang

Hailey Huang

SEO Team Leader

相關文章

80%

行銷預算有去無回

與我們討論最適合你的

數位行銷方案