這幾年隨著智慧型手機和平板的普及，愈來愈多使用者在瀏覽網頁時以行動裝置取代電腦裝置。但是傳統網頁都是針對電腦尺寸去設計，當裝置瞬間縮小好幾倍時，可想而知會出現裝置不相容，甚至產生閱讀困難的狀況。
Google、Yahoo、Bing 等各大搜尋引擎也發現了這個狀況，因此分別從幾年前開始重視行動裝置用戶的搜尋體驗，甚至更改演算法，要求網站在手機中的易讀性與易操作性，否則排名將會降低。
你可能已經聽過 RWD 跟 SEO 這兩個名詞，可是它們之間有什麼關聯？做 RWD 網頁又如何為 SEO 帶來好處？
RWD 是什麼？
RWD 的全名是 Responsive Web Design，中文稱為響應式網頁設計。這是一種透過感應螢幕大小得知使用者現在所使用的裝置是什麼，進而調整整體排版、區塊顯示方法及圖片縮放，讓網頁內容更適合該尺寸螢幕的機制。
使用 RWD 時的注意事項
但是架設網站的時候，不是光把 RWD 加入網頁中，或是找一個有支援 RWD 的網頁架設平台就可以，你可能還要考慮到下面這 3 件事情：
1. 視覺與排版設計
就如同我們前面提到，RWD 會因應不同設備提供不同的畫面呈現，也就是說電腦看跟手機看會有一些差異。這時候就不能用傳統網頁設計的思維去做手機排版，但是也不能差異太大，還是要考慮到網站的風格一致性及使用者習慣。
因此建議網頁設計完成後，要先找幾位測試者實際使用，看看流程或功能操作是否都順暢，之後再正式上線會比較好。
2. 載入速度
一般而言，電腦的網速會比手機快，所以載入速度也會比較快，因此電腦網頁可以提供非常充足的資訊或照片，但是到了手機就不行，僅能提供重點資訊，一些比較不重要的內容或元素就必須隱藏起來。
3. 內外部網站是否也為 RWD
如果你因為 SEO 的規定需要在網站中置入內部與外部連結，但是要注意這些連結的頁面是否也有提供 RWD，否則會出現在你的網站體驗很好，到了其他網頁後卻有不好的銜接使用體驗，這樣還是會影響使用者的整體感受。
SEO 是什麼？
SEO 的全名是 Search Engine Optimization，中文稱為搜尋引擎最佳化。簡單來說它是一種搜尋引擎會參考的指標，一旦網站遵循並達成愈多指標項目，它的分數就會愈高、名次也會排得愈前面；相對的，如果你完全不遵循這些指標去優化網站，或者是過度優化（黑帽 SEO），只要被搜尋引擎發現，網站就會遭受懲罰，排名將會一落千丈，甚至完全沒有辦法被搜尋到。
SEO 的排名依據
一般來說會有下面這 5 個判斷標準：
1. 關鍵字與內容相關性
假如使用者搜尋「RWD 對 SEO 的好處」，他們會希望看到 RWD 可以幫助 SEO 哪些事情，或者是如何用 SEO 的角度去優化 RWD 網頁；可是如果他們看到的內容是 RWD 網頁怎麼設計，裏頭寫了一大堆程式語言教學，當內容不符合使用者的期望，他們就會直接離開，這時搜尋引擎就會判斷該網站無法在「RWD 對 SEO 的好處」這個關鍵字提供使用者想要的內容，因此排名就不會提高。
2. 使用者體驗
使用者體驗包含的層面非常廣，除了網頁設計直覺好上手、外觀好看之外，更重要的就是手機與平板用戶的使用體驗，也就是我們提到的 RWD 響應式網頁。
Google 從 2015 年開始推出「行動友善」演算法更新，對手機瀏覽體驗不佳的網站降低排名；但真正的關鍵轉折是後來逐步推行的「行動優先索引（Mobile-First Indexing）」，這項政策歷經多次延期，直到 2023 年 10 月才由 Google 正式宣布全面完成。這代表 Google 現在主要是拿你網站的手機版內容去索引、判斷排名，不是電腦版。也就是說，如果你的 RWD 網頁在手機瀏覽時因為版面考量隱藏了某些文字或連結，Google 很可能根本沒把那些被隱藏的內容納入排名依據。這一點在規劃 RWD 的手機版面時要特別留意，不能把「電腦版才有」的重要內容整段拿掉，頂多是調整呈現方式（例如收合成可展開的區塊）。
3. 停留時間
停留時間也包含在前面兩點之中，使用者在你的網站停留愈久，就代表跟他搜尋的關鍵字關聯性非常高，並且提供了足夠充分的資訊，排名自然會跟著提高。
4. 外部連結
如果有不少其他網站的外部連結（也就是反向連結）指向你的網站，且來源夠優質，就表示這個網站的權重很高，排名也會隨之提升。
5. 核心網頁體驗指標（Core Web Vitals）
除了行動友善與內容相關性，Google 目前也把「核心網頁體驗指標（Core Web Vitals）」納入排名依據的一環，用來量化使用者實際瀏覽時的體驗好壞，主要看三個數值：
- LCP（Largest Contentful Paint，最大內容繪製時間）：頁面中最大區塊（通常是主圖或標題）需要多久才能完整顯示，理想值落在 2.5 秒以內。
- INP（Interaction to Next Paint，互動反應時間）：使用者點擊、輸入等操作後，頁面需要多久才有反應，這項指標已取代舊有的 FID（First Input Delay），理想值在 200 毫秒以內。
- CLS（Cumulative Layout Shift，版面穩定性）：頁面載入過程中畫面元素跳動、位移的程度，理想值在 0.1 以下，例如圖片還沒載入完成、廣告突然跳出把文字擠開，都會拉高這個數字。
這三個指標跟 RWD 息息相關，手機螢幕小、行動網路速度也常常比電腦慢，如果 RWD 規劃時沒有做好圖片壓縮、延遲載入（lazy load）或事先預留版面空間，很容易讓手機版的核心網頁體驗指標表現比電腦版差，進而拖累整體排名。
RWD 對 SEO 有哪些好處？
掌握 RWD 跟 SEO 的基礎概念後，可以歸納出以下 3 個實際影響：
1. 增加使用者體驗
前面說到，RWD 最大的特色就是一站三用，電腦、平板、手機都可用，無論你使用哪一種裝置，RWD 都會自動幫使用者調整成適合螢幕大小的設計，讓使用者更方便順利的瀏覽網頁。
這一點就被各大搜尋引擎認為是「使用者體驗優良」或「行動裝置友善網頁」，只要使用者體驗增加，加上網頁設計時有注意到其他 SEO 排名依據，那麼排名一定會有所提升。
相反的，假如你的網站沒有做任何 RWD，當手機用戶點進網站後發現很難用，或者是一些資訊根本無法瀏覽時，他們就會果斷返回上一頁，那麼你將同時失去流量、停留時間和使用者體驗，搜尋排名又怎麼會高呢？
2. 減少搜尋引擎判斷重複內容的機會
如果你是用響應式網頁設計，就不會發生電腦版與手機版網址不同的情況；假如有的話，就表示你並沒有正確使用 RWD。
如果你曾經在電腦上打開某個網站，網址卻自動跳轉成類似 m.example.com 這種帶有「m.」開頭的子網域，或者手機版跟電腦版的網址結構明顯不同，這就是典型的「分離式網址（m-dot）」架構。早年不少電商、新聞入口網站都採用這種方式因應行動裝置，等於同一份內容，用兩組不同網址各自維護一套電腦版跟手機版頁面。
先姑且不論使用者體驗，光是從搜尋引擎的角度來看，這種架構最忌諱重複內容，尤其是不同網址呈現相同內容的情況，稍有不慎就會拖累 SEO 排名，還得額外設定 canonical 標籤或跳轉規則去告訴 Google 兩個網址其實是同一份內容。
這也是這幾年多數台灣主流電商與新聞平台，陸續把分離式網址整併回同一組 RWD 網址、或改用同網址依裝置動態調整內容（dynamic serving）的原因。網址統一了，就不會有這種重複內容的困擾，維護成本也大幅降低。
3. 提升在地搜尋排名
這幾年 Google 在搜尋結果排序上做了一些調整，搜尋結果會優先顯示距離使用者比較近的店家或該地區的資訊。
舉例來說，如果你住在台北並搜尋「烤鴨餐廳推薦」，在關鍵字沒有帶入特定城市或區域的情況下，通常搜尋結果都會是距離你比較近的商家或推薦內容，這點在行動裝置上尤其明顯。
如果網站有做響應式設計，搜尋引擎判斷手機用戶可以順利閱讀的情況下，就會讓你的網站優先曝光給在地的使用者，排名自然也可以大幅提高。
如何判斷 RWD 對 SEO 是否友好？
Google 已經把舊有的「行動裝置可用性報表」與「行動裝置相容性測試」工具下架，理由是響應式設計現在已經是標準做法，不需要再獨立檢測。現在你可以改用下面這兩種方式來檢查：
1. Google Search Console 的核心網頁體驗指標報表
在 Search Console 左側選單找到「核心網頁體驗」，裡面會依 LCP、INP、CLS 三項指標，把你網站的網址分成「良好」「需改善」「不佳」三個等級，並且分開列出電腦版與行動版的表現，讓你清楚看到是不是手機版拖累了整體分數。
不過這項報表是根據實際使用者的瀏覽資料（欄位資料）彙整而成，資料量不足的網址不會被單獨列出，你也無法即時看到剛上線頁面的表現。
2. PageSpeed Insights
如果想針對單一頁面立即檢測，可以用 Google 的 PageSpeed Insights，直接貼上網址就能同時看到電腦版與行動版的 LCP、INP、CLS 分數，以及影響效能的具體建議（例如哪張圖片太大、哪段程式碼延遲了載入），不需要登入帳戶或驗證網站所有權，任何頁面都能單獨測。
SEO 影響的層面其實非常廣泛，很多時候我們不一定會想到響應式網頁設計也跟 SEO 和排名有關係，但它就在無形間直接影響排名的高低。
但是換一個角度思考，無論是架設網站還是提供充實的內容，我們本來就不應該抱著投機取巧的心態，而應該以使用者的角度為出發點，盡力提供他們最優質的內容跟便捷的操作。這不正好與 Google 希望網頁達成的目標不謀而合嗎？