網頁設計該注意的事: AWD 要怎麼做才能對 SEO 無痛?
 |
| 網頁設計該注意的事: AWD 要怎麼做才能對 SEO 無痛? |
AWD 跟 RWD 的目的一致，都是希望能針對桌機、平板、手機等不同尺寸的裝置，而顯示出易於瀏覽的網站畫面。
我們在規劃網站時，一定有不少的 PM 在與 前端工程師或是網頁前端設計師在溝通上遇到瓶頸，譬如網站使用 RWD 或是 AWD 等等，看起來很像，內容卻大不相同。本篇就以未接觸過網頁設計、或是無任何技術背景的網頁規劃者為角度，講解 RWD 與 AWD 網站的差異，以及如何規劃 UI與選擇。
觀察很多分成桌機版跟行動版的網站 (如 Momo 購物、Facebook 等等) 的 URL ，會發現行動版的網址前面多會有個 「m.」 的開頭，就是這樣的情況。
但我們先回到原點，弄懂 AWD 的基本原理，其實 AWD 只是分成桌機版與行動板等兩套 CSS (有時可能會多出其他的而有兩套以上的 CSS)。但是一個網站擁有多套 CSS 並不等於要分成兩個網站。工程師常見的做法是撰寫程式讓同一個 URL 之下，判斷裝置而吐出相對應的網站架構與 CSS 樣式。多了這個步驟，才可以集中流量在同一個網址中，對 SEO 或品牌辨識度都比較好，就不會有前面提到 「分流」 的問題，也不會影響到 SEO。
所以不要再說 AWD 對 SEO 不利了！不利 SEO 的是把 「網站做成兩個獨立的桌機版跟行動版兩個網站，再進行轉址」 的作法。你所需要的，是要把行動版與桌機板使用同一個 URL。
繼續看本系列文章下篇:
4.了解整體網站的規劃流程-PM與前端溝通更順利
本系列文章前二篇:
1.RWD 和 AWD 的差異與優缺點
2.我該選擇 RWD 還是 AWD ?
✌推薦閱讀：
我們在規劃網站時，一定有不少的 PM 在與 前端工程師或是網頁前端設計師在溝通上遇到瓶頸，譬如網站使用 RWD 或是 AWD 等等，看起來很像，內容卻大不相同。本篇就以未接觸過網頁設計、或是無任何技術背景的網頁規劃者為角度，講解 RWD 與 AWD 網站的差異，以及如何規劃 UI與選擇。
(目錄) |
AWD 要怎麼做才能對 SEO 無痛?
很多人都說 AWD 對 SEO優化 不利。那是因為大多數的人會省去將 「行動版」 與 「桌機板」 串在同一個網址的流程，索性就把把網站做成兩個獨立的桌機版跟行動版兩個網站，再進行轉址，所以流量自然會分流，對 SEO 當然有負面影響！觀察很多分成桌機版跟行動版的網站 (如 Momo 購物、Facebook 等等) 的 URL ，會發現行動版的網址前面多會有個 「m.」 的開頭，就是這樣的情況。
但我們先回到原點，弄懂 AWD 的基本原理，其實 AWD 只是分成桌機版與行動板等兩套 CSS (有時可能會多出其他的而有兩套以上的 CSS)。但是一個網站擁有多套 CSS 並不等於要分成兩個網站。工程師常見的做法是撰寫程式讓同一個 URL 之下，判斷裝置而吐出相對應的網站架構與 CSS 樣式。多了這個步驟，才可以集中流量在同一個網址中，對 SEO 或品牌辨識度都比較好，就不會有前面提到 「分流」 的問題，也不會影響到 SEO。
所以不要再說 AWD 對 SEO 不利了！不利 SEO 的是把 「網站做成兩個獨立的桌機版跟行動版兩個網站，再進行轉址」 的作法。你所需要的，是要把行動版與桌機板使用同一個 URL。
繼續看本系列文章下篇:
4.了解整體網站的規劃流程-PM與前端溝通更順利
本系列文章前二篇:
1.RWD 和 AWD 的差異與優缺點
2.我該選擇 RWD 還是 AWD ?
✌推薦閱讀：