RWD與SEO:有什麼關聯或好處?

這幾年隨著智慧型手機和平板的普及,愈來愈多使用者在瀏覽網頁時以行動裝置取代電腦裝置。但是傳統網頁都是針對電腦尺寸去設計,當裝置瞬間縮小好幾倍時,可想而知會出現裝置不相容,甚至產生閱讀困難的狀況。

Google、Yahoo、Bling等各大搜尋引擎也發現了這個狀況,因此分別從幾年前開始重視行動裝置用戶的搜尋體驗,甚至更改演算法,要求網站在手機中的易讀性與易操作性,否則排名將會降低。

你可能已經聽過RWD跟SEO這兩個名詞,可是他們之間有什麼關聯?做RWD網頁又如何為SEO帶來好處?

RWD是什麼?

RWD的全名是Responsive Web Design,中文稱為響應式網頁設計。這是一種透過感應螢幕大小得知使用者現在所使用的裝置是什麼,進而調整整體排版、區塊顯示方法及圖片縮放,讓網頁內容更適合該尺寸螢幕的機制。

延伸閱讀:為什麼要選RWD網站,一篇就讓你了解RWD網頁設計

使用RWD時的注意事項

但是架設網站的時候,不是光把RWD加入網頁中,或是找一個有支援RWD的網頁架設平台就可以,你可能還要考慮到下面這3件事情:

1. 視覺與排版設計

就如同我們前面提到,RWD會因應不同設備提供不同的畫面呈現,也就是說電腦看跟手機看會有一些差異。這時候就不能用傳統網頁設計的思維去做手機排版,但是也不能差異太大,還是要考慮到網站的風格一致性及使用者習慣

因此建議網頁設計完成後,要先找幾位測試者實際使用,看看流程或功能操作是否都順暢,之後再正式上線會比較好。

2. 載入速度

一般而言,電腦的網速會比手機快,所以載入速度也會比較快,因此電腦網頁可以提供非常充足的資訊或照片,但是到了手機就不行,僅能提供重點資訊,一些比較不重要的內容或元素就必須隱藏起來

3. 內外部網站是否也為RWD

如果你因為SEO的規定需要在網站中置入內部與外部連結,但是要注意這些連結的頁面是否也有提供RWD,否則會出現在你的網站體驗很好,到了其他網頁後卻有不好的銜接使用體驗,這樣還是會影響使用者的整體感受。

SEO是什麼?

SEO的全名是Search Engine Optimization,中文稱為搜尋引擎最佳化。簡單來說它是一種搜尋引擎會參考的指標,一旦網站遵循並達成愈多指標項目,它的分數就會愈高、名次也會排得愈前面;相對的,如果你完全不遵循這些指標去優化網站,或者是過度優化(黑帽SEO),只要被搜尋引擎發現,網站就會遭受懲罰,排名將會一落千丈,甚至完全沒有辦法被搜尋到。

SEO的排名依據

一般來說會有下面這4個判斷標準:

1. 關鍵字與內容相關性

假如使用者搜尋「RWD對SEO的好處」,他們會希望看到RWD可以幫助SEO哪些事情,或者是如何用SEO的角度去優化RWD網頁;可是如果他們看到的內容是RWD網頁怎麼設計,裏頭寫了一大堆程式語言教學,當內容不符合使用者的期望,他們就會直接離開,這時搜尋引擎就會判斷該網站無法在「RWD對SEO的好處」這個關鍵字提供使用者想要的內容,因此排名就不會提高。

2. 使用者體驗

使用者體驗包含的層面非常廣,除了網頁設計直覺好上手、外觀好看之外,更重要的就是手機與平板用戶的使用體驗,也就是我們提到的RWD響應式網頁。

Google從2015年開始就修改演算法,對手機用戶愈友善的網站,排名就有機會愈高,其他搜尋引擎後來也陸續跟進,到現在已經成為一個趨勢,你不得不遵從。

3. 停留時間

停留時間也包含在前面兩點之中,搜尋引擎的判斷規則是:當使用者在你的網站停愈久,表示跟他搜尋的關鍵字有非常大的相關,並且提供他夠充足的資訊,那麼排名就會正向提高。

4. 外部連結

當你的網站中有非常多外部連結,甚至有其他網站外部連結到你的網站,表示這個網站的權重很高,排名也會隨之提升。

RWD對SEO有哪些好處?

結合上述RWD跟SEO的基礎概念,我們不難發現RWD對SEO有下面這3大好處:

1. 增加使用者體驗

前面說到,RWD最大的特色就是一站三用 – 電腦、平板、手機都可用,無論你使用哪一種裝置,RWD都會自動幫使用者調整成適合螢幕大小的設計,讓使用者更方便順利的瀏覽網頁。

這一點就被各大搜尋引擎認為是「使用者體驗優良」或「行動裝置友善網頁」,只要使用者體驗增加,加上網頁設計時有注意到其他SEO排名依據,那麼排名一定會有所提升。

相反的,假如你的網站沒有做任何RWD,當手機用戶點進網站後發現很難用,或者是一些資訊根本無法瀏覽時,他們就會果斷返回上一頁,那麼你將同時失去流量、停留時間和使用者體驗,搜尋排名又怎麼會高呢?

2. 減少搜尋引擎判斷重複內容的機會

基本上如果你是用響應式網頁設計,不會發生電腦版與手機版網址不同的情況,假如有的話,那表示你並沒有正確使用RWD。

讓我們舉個最知名的網站 – Momo,這是它的電腦版網址,這是它的手機版網址,相信你一定多少發現一絲端倪:我明明是用電腦搜尋,可是怎麼可以看到手機版網頁?

先姑且不論使用者體驗,光是從搜尋引擎的角度來看,他們最忌諱重複內容,尤其是不同網址相同內容的情況,這是會影響SEO排名的。

3. 提升在地搜尋排名

什麼是「在地搜尋排名」?這幾年Google在搜尋引擎上做了一些調整,搜尋結果會優先顯示距離使用者比較近的店家或該地區的資訊

舉例:如果我住在台北並搜尋「烤鴨餐廳推薦」,在關鍵字沒有帶入特定城市或區域的情況下,通常搜尋結果都會是距離你比較近的商家或推薦內容,這點在行動裝置上尤其明顯。

如果網站有做響應式設計,搜尋引擎判斷手機用戶可以順利閱讀的情況下,就會讓你的網站優先曝光給在地的使用者,排名自然也可以大幅提高。

如何判斷RWD對SEO是否友好?

說了這麼多,也理解響應式裝置對SEO的好處,可是我要怎麼判斷網頁的RWD對SEO是友好的?你有兩種方法可以進行檢測:

1. Google Search Concole

既然是Google訂出的規矩,那麼他們一定會開發可以讓你檢測網站行動裝置友好的系統,而它就藏在Google Search Console中。

你可以在「體驗」這個選單下看到行動裝置可用性,如果系統偵測到網站有不符合行動裝置友善的設計或內容,它就會跳出通知並要求你改善,只要你有遵照指示做改善,排名就不會下降。

雖然你可以透過這項功能了解網站是否存在任何不友善的問題,但是這僅是針對整體網站,你無法了解個別頁面的情況,除非你手動一個一個提交測試。

2. 行動裝置相容性測試

另一個可以使用的是「行動裝置相容性測試網站」,它同樣也是Google開發的功能之一,不同的是你不需要特別登入帳戶,直接從這個網頁上輸入網址,程式就會自動幫你做分析,就算是單一頁面也可以分析,幫助你更了解各個頁面的手機友好狀況。

結論

總結來說,SEO影響的層面真的非常廣泛,很多時候我們不一定會想到響應式網頁設計居然也跟SEO和排名有關係,可是它就在無形間直接影響排名的高低。

但是換一個角度思考,無論是架設網站還是提供充實的內容,我們本來就不應該抱著投機取巧的心態,而應該以使用者的角度為出發點,盡力提供他們最優質的內容跟便捷的操作。這不是正與Google希望網頁達成的目標是否不謀而合呢?

常見問答

本區問答由 AI 依文章內容自動整理,僅供快速參考,正式內容仍以全文為準。

RWD 是什麼?跟 SEO 有什麼關係?

RWD 全名是 Responsive Web Design(響應式網頁設計),透過感應螢幕大小判斷使用者裝置,自動調整排版、區塊顯示與圖片縮放,讓網頁內容適合不同螢幕。
SEO(搜尋引擎最佳化)會綜合多項指標決定排名,其中「使用者體驗」與「行動裝置友善」就直接受 RWD 影響。
簡單講:手機體驗不好的網站,Google 從 2015 年起就會降低排名,所以做好 RWD 等於替 SEO 鋪好基本路。

Google 判斷 SEO 排名的標準有哪些?

主要四個。
關鍵字與內容相關性:使用者搜尋的關鍵字要能在你的內容中得到對應答案,否則離開後就被判定為不相關。
使用者體驗:含網頁設計直覺度、外觀,以及手機、平板的瀏覽舒適度,這部分 RWD 是關鍵。
停留時間:使用者待越久代表內容夠充足、與搜尋意圖相關,排名會正向提高。
外部連結:網站有多少高品質連結,以及多少外部網站連到你,會影響網站權重。

做 RWD 對 SEO 有哪些具體好處?

三大好處。
一是增加使用者體驗,電腦、平板、手機都能順暢瀏覽,被搜尋引擎判定為「行動裝置友善網頁」,排名自然提升。
二是減少重複內容的判斷風險,正確的 RWD 不會出現電腦版與手機版網址不同(例如 Momo 就有這狀況),Google 最忌諱不同網址相同內容會影響排名。
三是提升在地搜尋排名,Google 會優先把行動裝置友善的網站曝光給附近的使用者,例如搜尋「烤鴨餐廳推薦」會優先顯示鄰近商家。

做 RWD 時要注意什麼?不是套個版型就好嗎?

不是。
要注意三件事。
視覺與排版設計:電腦版和手機版的呈現會有差異,但不能差距太大,要維持品牌風格一致與使用者習慣,建議上線前找測試者實際使用驗證流程順暢。
載入速度:手機網速通常較慢,行動版要把次要元素隱藏只留重點資訊。
內外部連結也要是 RWD:如果連到的外部頁面不支援響應式,使用者體驗就會在跳出後斷掉,整體感受還是會被扣分。

怎麼檢查我的 RWD 對 SEO 是不是友好?

兩個方法都來自 Google。
第一是 Google Search Console 裡的「體驗 → 行動裝置可用性」報表,會掃描整個網站偵測不符合行動裝置友善的設計或內容並提示改善,缺點是針對整體網站,個別頁面要手動提交。
第二是「行動裝置相容性測試」工具,不需登入帳戶直接輸入網址就能分析單一頁面的手機友好狀況,適合針對特定頁面快速檢查。
兩個搭配使用最完整。