有沒有翔譽建設的八卦?

為什麼響應式設計對SEO有好處?-CSDN.NET

響應式設計已成為網絡營銷上非常熱門的話題,而且愈來愈火,這不禁引人思考,它是否真的就可以成為一個行業標準呢?

答案很簡短:是的。

響應式Web設計意味著你無需把網站制作成多個版本,如移動版、桌面版或者PC版等,它會根據設備的分辨率和縮放自動重新佈局,使網頁能夠適應不同的設備,rwd網頁設計,並且用戶看到的是相同的內容。

就單單2012年,移動手機訂閱已增加55%,這也充分說明響應式Web設計已成為網絡營銷的未來。

它是如何工作的?

是不是感覺聽起來太好了,以至於缺乏真實性了呢?這一切都來源於Ethan Marcotte在2010年發佈的 “Responsive Web Design”,這是一篇非常簡短的理論。響應式網頁會基於瀏覽器屏幕自動調整元素的大小、形狀、位置等,而不像以往那種開發一個800px網頁,而且還要設置它位於屏幕中心。而響應式網頁裏的元素會基於CSS媒體查詢自動適應屏幕大小。

讓我們舉一個簡單的例子,使用A-L這9個元素,在像筆記本或者舊的電腦屏幕(擁有較低像素),這些元素看起來會像3行3列的網格:

當屏幕寬度變寬後,就會變成如下圖:

變窄了以後,他們可能會有新的排列:

現在,給大家看一個真實的例子,響應式網頁設計,微軟網站的各個部分:

當屏幕變小後,元素排列就會有所不同,網路開店,移動版:

在他們的設計中,微軟保持了桌面版上的所有元素,即使是從其他設備上來查看。但桌面版和移動版最大的區別是移動版僅僅沒有足夠的空間或者瀏覽器記憶來給一個單頁提供如此豐富的內容。例如Samshing magazine網站,當屏幕變小後,它會自動去掉一些多餘的東西:

桌面版:

在iPad上的顯示:

下面是在Kindle Fire上的顯示:

現在看看移動版:

正如你所看到的,高雄網頁設計,響應式Web設計帶給你一個非常震驚的屏幕控制。一個響應式網站幾乎可以轉換所有的東西,例如從PC優化到移動優化。

下面讓我們來談談響應式設計給SEO帶來了哪些影響?

為什麼響應式設計對SEO有好處?

可用性

穀歌都會希望顯示用戶想要看的網站。當搜索者通過搜索結果頁面導航到你的網站後,如果他立即關掉你所打開的網頁並且返回搜索結果頁面,這時,穀歌會做一個記錄,根據搜索的關鍵字,你的網頁可能不是用戶的最佳選擇。

如果你有一個移動網站,擁有較少的內容並且與正常網站相比是明顯不一樣的,這將會對訪客產生阻礙,因為訪客有可能會按照桌面版的方式來獲取他想要的內容。如果你根本就沒有移動版的網站,那麼將會有61%的訪客會返回穀歌頁面,然後去重新找一個易讀的網站。這樣,你的跳出率就會提高,民宿訂房系統,網站排名也會下降。而如果你的網站是採用響應式設計的,那麼訪客無論是在移動端瀏覽還是在桌面端瀏覽,都將獲得相同的體驗。

內容重復

移動版的內容會和桌面版的內容保持一樣,但在網絡中你仍然可以從兩個地方獲取相同內容,也就是說這將讓你非常麻煩,而且還會為訪問你的網站的用戶帶來錯誤的版本網站,一個響應式設計的網站意味著在Internet上內容只存在於一個地方。

移動搜索排名

穀歌曾表示,他們的網站排名優化會根據移動搜索來進行。穀歌建議採用響應式網站設計,這樣你的移動版網站排名就不會受到太大影響,這對你們的網站是非常有好處的。

鏈接建設

對於響應式設計而言,網頁設計,在桌面版上的鏈接和移動版上的鏈接是相同的。移動網站仍然較新,所以你的競爭對手在移動搜索領域會大大減少反向鏈接。一個響應式網站對原始網站會有一個反向鏈接,即使是在爭奪移動端訪客。這將會給你帶來一些臨時優勢,RWD自適應式網頁設計,隨著移動設備使用量的不斷上升,網站管理員會在主頁面上提供移動版鏈接,反向鏈接會從桌面版和移動版上結合一個非常強壯的反向鏈接配置文件。

早期實踐案例

儘管響應式設計非常熱,但也有大量的網站還未使用。如果你的網站還未採用響應式設計,那麼下面提供幾個例子,對你採用響應式設計將會有幫助。

結果

你可能會猜測,如果你的網站未對桌面版或移動版進行優化,那麼跳出率將會從這些設備上減少,我們也已經看到一些對主頁面(桌面版)的積極影響。Distiller網站採用響應式設計以後,他們的網站在一個月內提升了400%:

這是一個比較極端的例子,而Distiller的博客卻未達到同樣的效果。然而,正如上圖所示,在一個恰當的情形下,採用響應式設計可能會給你帶來非常驚人的效果。

缺點

響應式設計並不是網絡營銷的聖杯,儘管它非常火,但在決定採用它之前,看看它不利的一面也會對你的決定起到非常大的影響。

時間

把網站換成響應式可能會需要大量的時間,無論是對你的設計團隊還是開發團隊。與以往重新設計網站相比,它都將會花費更長的時間,這兩支隊伍需要接受這個全新的概唸然後才能實現它。但有利的一面是,當其他網站意識到對他們的網站進行響應式設計之前,你的網站就已經遙遙領先啦。

大頁面

如果桌面版的網站擁有大量的內容,那麼意味著你的移動版也需要加載這麼多內容。你能想象一個較差的手機能加載這些嗎?

這就是為什麼NYTimes.com和CNN.com會有獨立的移動版本,在移動版上僅僅顯示桌面版的一小部分的文章內容和連接。如果你的網站也有大量的內容,那麼建議你採用兩個版本。

移動用戶體驗

由於響應式網站要求移動版和桌面版必須擁有相同的頁面和內容,這對提高用戶體驗帶來了許多限制。當用戶在較小屏幕的移動設備上瀏覽網頁時,肯定會與瀏覽桌面版的網頁體驗有所不同。如果你想有個移動版的網站,但是該網站交互性比較強且又復雜,比如像Facebook,那麼建議你專門做一個的移動版本,這樣比較好維護並且易控制。

那麼,響應式設計到底適不適合你的網站?

如果你的網站太大或者過於復雜並且需要一個移動網站,你有可能已經意識到(或者已經有一個驚人的移動網站,該網站並沒有多糟糕)。但是,倘若你不想要一個移動網站、或者是在考慮把網站切換為響應式網站是否值得,那麼你可以做一個Google Analytics:

我真的需要一個移動網站嗎?

看一份手機統計報告,這是一份基於移動用戶得出的一份標準報告。如果移動/平板訪問量低於總流量的5%,你可能就無需創建一個特定的移動網站(這個值一直在持續增長)。

如果高於5%,點擊Goal Set或者Ecommerce metrics set——使用它來跟蹤轉換——在頁面頂部,Explorer選項卡裏:

桌面訪問量是否大大超過了移動,台北網頁設計?如果移動轉換率低於桌面轉換率的一般,桃園網頁設計,你的網站表現明顯低於行業標準,並且需要對移動用戶進行優化。

移動網站在用戶屏幕上效果如何?

進入Standard Reports>Audience>,SEO優化;Mobile>Devices然後改變屏幕分辨率的初始值。你可以點擊其他下拉列表來選擇你要使用的初始值。可以根據訪客來嘗試使用10大最常用的分辨率,然後在看看你的網站在上面的顯示效果?使用Screenfly來查看網站在不同設備上的顯示效果。你可能會非常吃驚地看到,一個非常簡單的網站在許多平板電腦或者移動設備上都不太引人注目。即使你有一個移動網站,在50%的訪客手機上看起來都非常棒,但也還有50%不好的。所以,你應該考慮採用響應式設計。

我的移動網站是否滿足訪客的需求?

下面在標準報告中看看移動跳出率,Standard Reports>Mobile>Overview。當訪客進入你的移動網站後,跳出速度是不是比你的桌面版要快?移動跳出率應該與桌面跳出率有個大概的一緻。

如果你有時間,可以做一個全面的移動SEO統計,來確定你的移動網站到底需要怎樣的設計?Aleyda Solis已經在State of Search上寫了一份非常好的移動統計向導。

最佳選擇:慢慢轉向響應式

如果你想慢慢地向響應式Web設計靠攏並且已經有了個相當不錯的移動網站,考慮到網站採用響應式以便對desktop版和tablet版進行優化,但是移動不需要。這樣設計將會變的容易些,但在技術上的體驗會讓你在以後的轉化過程中更加順暢。

意識到響應式設計的技術實現還是比較高級,這裏提供一些注意事項供大家參考:

值得採用

切換到響應式是一個非常大的挑戰,但考慮到行業發展趨勢,趁早轉換只會讓你領先於競爭對手。

來自:SEOMOZ