什麼是RWD? 響應式網頁和SEO的關係?

嗨嗨你好，我是Zoella，你的個人網站經營教練，這篇文章會告訴你，什麼是響應式網站設計、關於響應式網站設計的優缺點、Wordpress網站沒有響應式網站設計該如何處理?

接下來請準備好舒適的環境，帶著愉悅的心情，我將帶你進入SEO的世界。

如果你需要其他SEO的資訊，這邊請 →　SEO網站經營大全

個人網站經營者時間有限、經費有限的情況下，RWD(Responsive Web Design)響應式網站設計

• 符合Google提出的「行動版網站搜尋引擎最佳化設定」
• 只需要維護一個網站可以享有不同裝置自動畫面比例切換，顧及所有裝置使用者的體驗。

RWD(Responsive Web Design)中文稱為響應式網站設計，提供所有裝置相同的語法，會根據不同螢幕尺寸(桌機、手機、平板)調整寬度及畫面大小。

響應式網頁設計語法：

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

這個語法可以讓網站頁面配合裝置的寬度調整網頁大小和縮放比例，沒有這個語法，手機上看到的網頁會以桌面版的畫面來呈現，導致手機網頁的畫面太小無法閱讀，但響應式網站設計是可以解決這個問題，而且只需要維護一個網址，就可以解決不同裝置的顯示問題！

之前有提到Google面對手機當道的全球變化時，推出了Mobile Friendly (行動裝置設計友善畫面)，並在2020年宣布Mobile-First Indexing (手機優先檢索)，代表搜尋者手機使用體驗對Google的重要性。

Google在「行動版網站搜尋引擎最佳化設定」指南中建議使用 RWD 技術來開發網站，也寫了一篇說明文章，告訴大家為什麼應該要使用響應式網頁的好處，把響應式網站的熱度推到最高。

但網站是不是一定要使用響應式網頁設計呢?

答案：不一定

Google 希望你使用並沒有在文章說沒有用就會遭受處罰，強制你一定要使用，還是可以視自己的網頁規劃選擇。

除了響應式網站設計的選擇以外，你還可以選擇以下這兩種方法

1. 動態服務：相同的網址底下，會針對手機和桌機給予不同的HTML檔案。
2. 單獨的 URL：不同的網址，不同的HTML檔案，會檢測用戶裝置，用定向指到適當的頁面，意思就是手機版一個網址，桌機版一個網址，依照使用者裝置不同給予不同的網址路口，就會需要維護兩個網站。

延伸閱讀：

進一步了解動態服務、單獨的 URL的Mobile friendly規定

手機SEO流量當道! 從Mobile Friendly到Mobile-First Indexing 我們該注意什麼?

優點：

1. 適合所有的裝置，可自動按造不同裝置切換最適合瀏覽的畫面。
2. 僅需維護一個頁面，減少網站維護時間。
3. 降低手機版網站發生錯誤的機率。
4. Google檢索時間更快速，只須爬取一個網頁，提高檢索效率，協助 Google 檢索更多內容，並確保擷取的內容是最新版本。

參考資料：Google說明指南

缺點：

1. 網站速度載入過久，響應式網站須載入網站完整資訊後，再依據裝置進行區塊隱藏，因此網站載入所花費時間較為長。

運用語法檢查

1. 按右鍵，點「檢視網頁原始碼」
2. 按「ctrl+f」,叫出搜尋欄
3. 在搜尋欄打上「meta name=”viewport” content=”width=device-width, initial-scale=1.0」

如果有找到這串原始碼，就代表你的網站是響應式設計。