談到手機版網頁，最常被提到的就是 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 （此為仿真圖，畫面截取自美麗佳人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 寫法，可以。（使用鼠標拉右側窗口的寬度，就可以發現顏色變化。詳見下圖）
下圖是跑出來的結果：
屏幕寬度小于、等于 600 px 時，背景會是 lightblue
當屏幕寬度大于 600 px，背景會是 lightgreen
RWD 響應式網站上關于 SEO 的設置
RWD 響應式網站有哪些設置，與 SEO 相關呢？在 SEO 領域中，「用戶體驗」一直是 Google 非常強調的。例如：手機網頁是不是好操作？按鈕夠不夠大？文本間距夠不夠寬？流程是不是順暢？瀏覽的畫面是不是有符合屏幕寬度？網頁加載時間是不是夠快？
這些都是 SEO 中，非常重要的一環，也剛好是 RWD 技術的重點。
- 使用 meta name=”viewport” 標記，向瀏覽器聲明，網頁內容可以配合設備寬度調整大小。
- 請勿使用 robots.txt 或其他方式，擋住 Googlebot 檢索任何網頁資產 (CSS、JavaScript 和圖片)，以避免 Google 無法正確解讀 RWD 的網頁配置。
- RWD 響應式網站上線后，使用 ，檢驗 Googlebot 是否能正確解讀，并且預防有不小心擋掉 Googlebot 的狀況。
- 使用響應式圖片技術（Responsive Images）。除了可依據設備寬度，調整圖片比例之外，在高分辨率設備上，也可給予高分辨率圖片。另外，也可以結合 CSS 的 @media 篩選功能，對于不同設備寬度，給予適合的圖片文檔，避免圖片文檔過大。
- Google 建議使用「適應性 JavaScript（ JavaScript-adaptive）」。
RWD、AWD 哪種對 SEO 比較好？手機桌機各為不同網址，對 SEO 不好嗎？
關于 RWD、AWD、手機桌機獨立網站，SEO 最好的是哪一種？Google 官方表明，并沒有偏好哪一種技術，只要你確保 Googlebot 可以訪問網頁、可以訪問到網頁上所使用的 CSS、JavaScript，就沒有問題。
但是，如果單純從「Google Search」官方說明，來探討「RWD、AWD、手機桌機不同網址」哪種對 SEO 比較好呢？
| SEO 項目 | RWD 響應式設計 | AWD 自適應設計 | 獨立的手機網站 |
| 解決重復內容問題 | ? | ? | ? |
| 減少重新導向 | ? | ? | ? |
| 節省 Google 檢索預算 | ? | ? | ? |
| 加快網頁加載速度 | △ | ? | ? |
- 重復內容
當手機版、電腦版網址不同時，如果 Googlebot 判定發生問題，例如，沒有在手機版 HTML 文本，注明「電腦版的對應網址」，導致 Google 算法收錄不正確的網頁作為電腦版網址?；蚴?，將手機版頁面視為桌機版的「重復內容」，這兩種情況，都會讓 SEO 上的處理相當棘手。
所以，就「重復內容」議題，推薦使用能做到「單一網址」的 RWD、AWD。
- 減少重新導向（轉址）、減少重新導向錯誤
當手機版、電腦版網址不同時，可能在切換設備時，會透過「重新導向」，將用戶帶到適合的頁面。像是，用手機打開電腦版網址時，會自動轉址到手機版網址。
但是，重新導向讓用戶等待更久，更容易放棄，更容易直接跳出。另外，在設置重新導向時，也常會發生錯誤。例如，應該用 302 重新導向，卻誤用 301 重新導向，或是導向到錯誤的網址，都會影響搜索的排名表現！
所以，就「減少重新導向錯誤」議題，推薦使用能做到「單一網址」的 RWD、AWD。
- Googlebot 的爬取也是有預算上限（Crawl budget）
什么是 Googlebot 的爬取預算呢？基本上，Googlebot 會依照網站流量、更新速度，來決定造訪這個網站的頻率，以及 Googlebot 投入在這個網站的時間。。
當手機版、電腦版網址不同時，需要在各版本的 HTML 文本，指明相對應的電腦版、行動版網頁。Googlebot 可順著這個指示，前往不同版本，繼續爬取。
但是，比起「手機、電腦單一網址」來說，「手機、電腦網址不同」花費了 Googlebot 更多的爬取預算在不同版本、相似內容上面（手機版、電腦版）。
若網站規模小，不會有什么影響。但對于越大的網站（有效 URL 數量在 1,000 以上的網站）、更新頻率越高的網站（例如每日都有新文章產生），會有較大的影響。
所以，就「節省 Googlebot 的爬取預算（Crawl budget）」議題，推薦使用能做到「單一網址」的 RWD、AWD。
什么是爬取預算(crawl budget)？網站速度優化，從Google Page Speed Insights開始
- 網頁加載速度
網頁加載速度一直是「用戶體驗」主要指針，Google 曾經重申多次，！
那么，若是在同樣的「硬件條件」、「網絡帶寬」下，該選擇哪種技術架設網站呢？（繼續往下探討之前，要聲明一下，這邊的技術探討，是以廣泛來說，不代表絕對的優劣。
能專門為「手機設備」、「手機網絡帶寬」，來量身訂做 HTML、JavaScript、CSS，是最能保證手機版網頁加載性能的方式之一。
AWD 自適應式技術，就是專門為手機設備所開發，能充分為網頁加載的性能優化。
而 RWD 響應式技術，手機、電腦都是訪問同一份 HTML、JavaScript、CSS，若網站層級、數據量龐大，有可能會造成文檔肥大，影響網頁加載速度。
Mobile SEO必學！行動版網站健檢Search Console幫你做
除了 SEO，經營網站，還有其他重點需要考察
擁有一個網站，除了 SEO，還有其他重點需要考察。我們粗略分成兩大部分來看：
- 手上能運用的資源：人力、開發時間、管理及維護成本。
- 網站內容需求：內容數據量、功能復雜度、畫面要求程度。
| 評估項目 | 手機、電腦獨立網站 | RWD 響應式設計 | AWD 自適應設計 |
| 開發時間 | 中 | 快速～中 | 較久 |
| 管理及維護 | 較難管理及維護，因為同時有 2 個網站。 | 較容易管理、維護。 | 較容易管理，但維護上復雜，因為可能同時有多種版本網頁資源。 |
| 費用 | 視網站復雜度，費用由低到高不等。 | 依照網站需求、版面復雜度，費用由低到高不等。 | 依照網站需求、版面復雜度，費用由中到高不等。 |
因為 RWD、AWD 在 SEO 先天條件上差異不大，反而與「工程層面」、「功能需求層面」有高度相關，誠心建議在選擇之前，協同「網站產品經理」（清楚了解網站訴求、功能、SEO 項目）以及「工程開發團隊」（清楚了解工程層面的復雜度、后續維運成本），雙方一起討論，評估最適合的成本，并有利于后續維運，才是最適合的選項！
參考數據：
本文網址： http://www.699tw.com/seo-advanced/9mv17eo27wa5
留言評論