談到手機版網頁，最常被提到的就是 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 響應式網站上關於 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）」。

原文出處：

https://www.awoo.com.tw/blog/rwd-website-seo/