現在「人手一機」的時代，手機已經成為大家上網的主要裝置，根據 Statista 2024 年底的最新統計，全球網站流量有高達 62.54％ 的比例是來自手機，顯示出手機版網站的趨勢和重要性。

此外，Google 也早在 2015 年起就開始把 SEO 的重點轉向「手機搜尋」，像是行動裝置優先索引（Mobile-First Indexing）這套演算法，代表 Google 會根據網站的手機版本進行索引與排名，大家一定要把網站的「手機版」做好，否則將會直接影響到網站 SEO 表現。

手機版網站的優化包含許多項目（SEO 業界我們叫做 行動裝置優化），這篇文章要談的是「手機版網站的架構選擇」，常見的設計方法主要有「響應式網頁設計（Responsive Web Design，簡稱 RWD）」以及「自適應網頁設計（Adaptive Web Design，簡稱 AWD）」這兩類，我們會詳細分析各自的優缺點、對 SEO 的影響、以及使用上的注意事項。

這篇文章會由 Harris 先生顧問團隊維護、並且由 Harris 進行監修。

最後編修日期：2025 年 2 月

RWD 響應式網頁設計（Responsive Web Design）

響應式網頁（Responsive Web Design）也稱為回應式網頁設計、或簡稱 RWD，只要開發一套網頁程式、使用同一個網址，透過 RWD 技術，就能讓網頁隨著使用者的螢幕尺寸、解析度、方向等變化，自動改變網頁的版面配置和物件大小，不管是使用電腦、手機、平板任何裝置，都能有良好的瀏覽體驗。

如上圖所示，使用 RWD 架構的網頁就像是「水」一樣，當我們調整視窗的尺寸，網頁的排版、文字位置、物件大小也會自動跟著重新排列，不容易出現跑版、超出螢幕、難以閱讀的狀況。舉例來說，在寬版的電腦螢幕瀏覽時，物件是從左到右水平排列；而當畫面縮放到一定的窄度時（像是以手機螢幕瀏覽），物件則變成從上到下垂直排列，自動排出最合適的呈現方式。

RWD 是 Google 推薦使用的網頁設計方式，由於電腦版和手機版網站是共用一套 HTML 程式碼，網址也是一樣的，基本上在 SEO 上比較不容易出現問題，它的優缺點如下：

• RWD 網頁優點：只要維護一套程式碼就好，更新網站時比較方便有效率，在 SEO 上也不容易出現重複內容、轉址錯誤等問題
• RWD 網頁缺點：為了讓網頁能同時符合電腦版與手機版瀏覽體驗，RWD 網頁通常較難支援太過複雜的版面設計，或是高度客製化、互動性強的功能

AWD 自適應網頁設計（Adaptive Web Design）

AWD（Adaptive Web Design）中文叫做「自適應網頁設計」，是比較早期且傳統的網頁設計概念，和 RWD 響應式網頁主要差別在於，AWD 會針對不同裝置和不同的螢幕尺寸，開發獨立的 HTML 程式碼、量身設計不同的網頁版面，例如電腦版、手機版、平板版各自對應不同的 HTML 和排版，當使用者進入網站時，伺服器端會根據裝置的螢幕尺寸，加載對應的 HTML 版本。

• AWD 網頁優點：可以針對不同裝置，靈活設計適合的排版和功能，適合功能複雜的網站
• AWD 網頁缺點：要維護多個版本的 HTML，維護成本高

AWD 是一種網頁設計概念，若要採用 AWD，又可以分為「獨立網址 Separate URLs 」、「動態服務 Dynamic Serving」這兩種實作技術，以下詳細介紹兩者的差異：

▍技術 1：獨立網址（Separate URLs）

獨立網址的設計（Separate URLs）我們在業界俗稱叫做「大小網」，設計上是把電腦版和手機版當作兩個獨立網頁來看，HTML 和網址都是不一樣的（通常手機版網址前面會是 m），例如：

• 電腦版網址：https://www.yesharris.com/
• 手機版網址：https://m.yesharris.com/

網站伺服器系統會偵測使用者裝置類型（User-Agent），將網站導向對應的網址，舉例來說：當瀏覽裝置是電腦時，系統會將使用者導向電腦版網站的 www.yesharris.com ；反之，則會導向到 m.yesharris.com 這個手機版網站的網址。

獨立網址設計的好處是，可以針對不同裝置的網頁單獨進行優化和調整，但實務上也有幾個缺點需要注意：

▶ 缺點 1：如果網站系統沒有做好裝置偵測和轉址設定，就有可能發生「使用者在電腦版進入 m.example.com 的手機版網址，網頁瀏覽體驗變得不好 」的狀況。這樣的情況很常發生在別人用手機傳網址給我們，但我們用電腦版打開，會發現網址錯誤打不開、或是網頁跑版難以瀏覽（如下圖）。

（若網站有做好裝置偵測和設定，當透過電腦進入 m.yesharris.com，就會自動被轉址到電腦版的 www.yesharris.com ）

▶ 缺點 2：獨立網址的設計並不像 RWD 架構會自動調整網頁排版，所以在電腦上調整視窗尺寸時，網頁上的物件和版面並不會自動縮放或重新排列（如下圖），容易造成使用者操作上的不方便，進而增加跳出率。

▶ 缺點 3：獨立網址在 SEO 優化上會比較麻煩一點，因為電腦版和手機版網頁的內容相似、網址卻不一樣，Google 有可能認不出它們是同個網站，而判定為重複內容、進而影響網頁排名。所以在 SEO 優化上會需要使用 rel=”canonical” 標籤來告訴 Google 哪個才是主要版本，避免這個狀況發生。

備註：關於 canonical 標記的建議做法，可以參考 Google 官方文件喔！

▍技術2：動態服務（Dynamic Serving）

動態服務（Dynamic Serving）與上面提到的獨立網址設計相同，會分別為電腦版、手機版設計 HTML 和排版，但差別在於所有裝置都使用一樣的網址，換句話說，手機使用者和電腦使用者雖然都是進入同一個網址的頁面，但看到的頁面排版和內容可能會有所不同。它的運作流程大致是這樣：

使用者進入網頁（都是同一個網址）→ 系統伺服器判斷裝置類型，加載對應的 HTML 版本 → 使用者在前台瀏覽網站

動態服務架構的優勢在於，可以針對不同裝置設計出不同的排版、內容、打造更適合的瀏覽體驗，也因為網址不變，不太會出現重複內容的問題，在 SEO 優化上較不麻煩。許多 AWD 網頁設計都會採用動態服務這種架構，像是 Amazon 和 Google 旗下的許多網站。

手機版網站架構比較，你適合使用哪一種？

介紹了這麼多專有名詞，那到底要怎麼選擇適合的手機版架構呢？我們先來統整一下這些手機版網站架構的差別。

（備註：表格中沒有 AWD，是因為 AWD 是一種設計概念，可以用「獨立網址」和「動態服務」兩種技術來執行，所以精確一點我們會用「獨立網址」和「動態服務」來比較網站架構。）

由於「獨立網址」在使用者體驗和設定上不方便，現在比較主流的網站架構主要是「RWD 響應式設計」和「動態服務」，兩個方法都各有優點，大家在評估要使用哪一種架構時，可以從「網站類型、維護人力、預算」這三大面向來考量：

▍從「網站類型」評估

▶ RWD 響應式設計：如果你的網站規模不大、版面設計不複雜、功能相對單純、不需要太多互動元素，例如 B2B 形象網站、個人部落格、中小型電商、新聞媒體網站，會很適合使用 RWD 的架構，不但維護起來方便、跨裝置瀏覽體驗良好、也能在各個裝置保持品牌形象的一致性。

▶ Dynamic Serving 動態服務：如果你的網站規模較大、需要高度客製化的功能、希望針對不同裝置提供不同的介面和操作方法，例如社群平台、影音平台、遊戲平台、航空公司網站、租屋網站、金融服務網站、大型電商網站，就會更適合使用動態服務的架構，較能確保電腦版和手機版都能有順暢的 UI/UX 體驗，同時也能提升載入效能。

▍從「維護人力」評估

▶ RWD 響應式設計：適合人力有限的中小型企業（例如只有行銷人員），因為只需要維護一套 HTML，如果你是使用 WordPress、SHOPLINE、Shopify 等等第三方架站平台，通常內建 RWD 模板，後台操作介面都很直觀，由行銷人員來維護管理即可，基本上不太需要工程師協助。

▶ Dynamic Serving 動態服務：適合有工程團隊的中大型企業，因為要管理多個版本的 HTML，確保每次網站更新時各裝置的版本都要正確，通常會需要前端和後端工程師來維運。

▍從「預算」評估

▶ RWD 響應式設計：只需要開發一套 HTML，開發費用相對較低（套版網站約 2 萬起跳、客製化網站約 5 萬起跳）。

▶ Dynamic Serving 動態服務：需要為不同裝置開發不同的 HTML 版本，開發工作量大，不只單次開發和設計的費用都比較高（約 20 萬起跳）、後續也要長期投入維護成本。

為什麼做 SEO 推薦使用 RWD？

看到這邊，你可能會有疑問：「以 SEO 優化的角度來看，建議使用哪一種網站架構呢？」

其實「RWD 響應式網頁、獨立網址、動態服務」這三種架構，只要有做好相關設定和處理，SEO 都是可以被優化的。一定要比較的話，RWD 響應式網頁是更加 SEO-Friendly 的選擇，主要有這幾個好處：

➊ 節省爬取額度（Crawl Budget）

爬取額度是指，Google 在爬每個網站時只會給你一定的時間額度，額度到了就會離開。而 RWD 網站的優勢在於，Google 只需要爬取一組 HTML，就能一次擷取電腦版/手機版/平板版網站上的內容，不像「獨立網址」或「動態服務」需要額外爬取每一個裝置的 HTML。當爬取效率變高，就能更快的爬到網站重要頁面和新發布的內容。

➋ 手機版網頁體驗良好

Google 相當重視手機版的使用者體驗，在 2023 年「行動裝置優先索引 Mobile First Indexing」演算法全面實施後，手機版體驗更是會直接影響網站的 SEO 表現。而使用 RWD 網站的優點是，系統會自動根據手機螢幕大小調整版面，比較不會發生文字太小、按鈕距離太近、畫面跑版……這些體驗不良的狀況。

➌ 同一個網址能集中權重

使用 RWD 技術的網站，在不同裝置上都是使用相同的網址，因此所有的流量和反向連結都會累積在同一個網址上，可以把網頁權重集中，讓 Google 更容易理解這個網頁的價值，提升 SEO 排名。（Dynamic Serving 動態服務也有這個優點）

最後也要釐清一下，雖然 RWD 響應式網頁的 SEO 優點比較多、也是 Google 推薦使用的架構，但  RWD 本身並不是直接影響 SEO 排名的因素，使用 RWD 網不代表排名一定比較好喔！以上介紹的幾個優點，只要你有做好相關設定，即便是獨立網址或動態服務也能達成，只是優化上會比較麻煩而已。

使用 RWD 的注意事項

當然 RWD 響應式設計也不是完美無缺，在使用上還是有一些細節需要注意：

➊ 網站速度優化

RWD 網頁的電腦版、手機版、平板版都是共用同一套 HTML 程式碼，如果沒有做好優化，可能會導致手機版和電腦版載入相同的資源（例如圖片、CSS、JavaScript），造成網站載入的負擔、讓網站速度變慢。網站速度影響的層面很多，包括 SEO 排名、Google 爬取額度、使用者體驗等等，可以採取這些方法來優化網站速度：

• 圖片使用 WebP 格式：WebP 是 Google 推出圖檔格式，檔案比常見的 JPEG、PNG 小很多， 可以加快網頁載入速度

• 減少不必要的 CSS 和 JavaScript： 由於 RWD 網頁共用相同的 HTML，可能會導致手機版載入過多不必要的 CSS 和 JavaScript（例如「滑鼠停留效果」只有電腦版才需要），建議透過CSS Media Queries 技術，來控制不同裝置載入對應的 CSS，這部分需要請工程師協助處理。

更多網站速度優化的做法，可以參考我們這篇文章「SEO重點項目：網站速度測試、速度優化指南」

➋ 網頁設計盡量簡潔

RWD 網頁需要適應不同裝置與螢幕尺寸，在設計上盡量以「簡單、方便閱讀、好操作」為原則：

• 避免過多的動畫效果
• 避免太過複雜的排版
• 避免大量的區塊、多欄位設計，因為手機版適合單欄式由上往下閱讀
• 欄位與物件寬度以「百分比」來設定（100% 就等於符合螢幕寬度），避免設定固定尺寸造成不同裝置跑版的狀況

➌ 測試上要更仔細

RWD 網頁使用同一套 HTML，沒有為各個裝置量身設計適合的版面，因此在測試的時候就需要更加仔細，針對不同尺寸和解析度的裝置（例如電腦、平板、不同型號的手機、不同瀏覽器）做檢查，以下是需要注意的項目：

• 手機版底部是否有「水平滾動條」？有的話代表畫面超出螢幕範圍了
• 手機版文字會不會太小？建議字級至少要 16px 以上
• 手機版按鈕方便點擊嗎？建議長寬尺寸都要超過 48px
• 圖片可以正常縮放嗎？
• 載入速度正常嗎？有沒有不必要的 CSS 和 JavaScript？（透過 Google PageSpeed Insights 來檢測）

最後總結一下，如果你的網站沒有太複雜的介面和功能需求，盡量用「RWD 響應式設計」的網頁架構就好，因為 RWD 對 SEO 來說相對友善且簡單，原則上只要顧好行動裝置友善（Mobile Friendly），就不太會有什麼問題。而若網站需要高度客製化的功能和版面，才建議你使用 AWD 的「獨立式網頁」或「動態服務」。

如果大家不太清楚自己的網站適合的技術，也建議直接和網站設計公司討論（推薦 isFrom 億次方、iBest 愛貝斯都是很有經驗的團隊），他們通常會針對不同需求提供各個解決方案，讓你更了解所需的預算和差異喔：）