21.9 C
Taipei
星期二, 3 5 月, 2022
Home網站前端開發RWD 響應式網站前端工程師一定得選擇RWD嗎?AWD要怎麼做才能無痛SEO?

前端工程師一定得選擇RWD嗎?AWD要怎麼做才能無痛SEO?

該選擇 RWD 還是 AWD ? 先看看自己的需求吧!

當下 RWD 正夯,但並不代表所有的網頁都適用 RWD 技術。決策者必須先檢視網站的規模、內容、專案的需求以及人力,再決定使用 AWD 還是 RWD。至於哪一類的網站適合 RWD、哪一種的網站適合 AWD,簡單整理如下表所示:

RWDAWD
人力需求較少,因為只有一套 CSS較多 (因為需要多套 CSS),
需要網頁人才與尚需前端工程師撰寫判斷裝置後自動匯入相應的 CSS 的程式
維護成本較少,因為只有一套 CSS較多,因為有多套 CSS 以及程式
適用內容網站內容較單純時適用。
如簡單的企業形象網站、一頁式網站等等。
網站內容較多、較複雜時適用。
如博克來、MOMO 購物網、蝦皮拍賣等。
適用排版較簡潔的畫面與排版較多元化、複雜的畫面與排版
SEO 支援SEO 優化、維護較容易同左,但前提是不能直接把網站分成桌機版跟手機版兩個網站再進行轉址,導致流量分散。
工程師必須要在同一個 URL 下寫出對應裝置的網站架構並指定適用的 CSS
可支援的裝置各裝置都適用各裝置都適用

以上分析建議仔細看過。 以下再作補充說明:

評估現有的資源人力

只需要寫一套 CSSRWD 所耗的時間與成本一定比 AWD 還快又省,適合小型網頁、新創產業或是各方面資源有限的狀況下。幾近客製化的 AWD 網頁雖然有利於做 UI / UX,但是需要前端工程師來撰寫判斷使用者來配對 CSS 的程式,且若想要做 SEO 的話,也是需要前端工程師把多套 CSS 串在同一個 URL 的。

網頁設計畫面要求較嚴謹的狀況下,就使用 AWD 吧!

若有足夠的預算,且希望使用者無論使用手機、桌機、平板等尺寸不一的裝置都能擁有完美的網頁瀏覽體驗的狀況下,就選擇 AWD 吧!往後在網頁維護上,前端工程師或是網頁設計師也更能找到對應的 CSS 檔來修改,且比較沒有如 RWD 般所有的樣式都塞在同一套 CSS 有 「牽一髮動全身」 的隱憂。 若硬要使用 RWD 也無非不可行,但是若 CSS 樣式寫得不夠嚴謹的話,則恐怕不同的裝置會寫到同一種 style,這時就需要花更多時間來修復,反而浪費更多成本。

AWD 要怎麼做才能對 SEO 無痛?

很多人都說 AWD 對 SEO 不利。那是因為大多數的人會省去將 「行動版」 與 「桌機板」 串在同一個網址的流程,索性就把把網站做成兩個獨立的桌機版跟行動版兩個網站,再進行轉址,所以流量自然會分流,對 SEO 當然有負面影響!

觀察很多分成桌機版跟行動版的網站 (如 Momo 購物、Facebook 等等) 的 URL ,會發現行動版的網址前面多會有個 「m.」 的開頭,就是這樣的情況。

但我們先回到原點,弄懂 AWD 的基本原理,其實 AWD 只是分成桌機版與行動板等兩套 CSS (有時可能會多出其他的而有兩套以上的 CSS)。但是一個網站擁有多套 CSS 並不等於要分成兩個網站。工程師常見的做法是撰寫程式讓同一個 URL 之下,判斷裝置而吐出相對應的網站架構與 CSS 樣式。多了這個步驟,才可以集中流量在同一個網址中,對 SEO 或品牌辨識度都比較好,就不會有前面提到 「分流」 的問題,也不會影響到 SEO。

所以不要再說 AWD 對 SEO 不利了!不利 SEO 的是把 「網站做成兩個獨立的桌機版跟行動版兩個網站,再進行轉址」 的作法。你所需要的,是要把行動版與桌機板使用同一個 URL。

最新文章

熱門文章