![]()
雖然手機本身有局限,會讓我們做手機網頁的時候唯唯諾諾,但手機的功能確實越來越強,可以預見在不久的未來,手機可以全部實現目前PC中的功能,網絡環境也會越來越好,加載速度的加快也有利于設計師發揮更大的空間。
如今越來越多的移動設備出現在我們身邊,作為設計師對網站專題的設計進入到一個新階段,需要考慮更多的用戶訪問環境,輸入設備,分辨率等不同因素。
響應式網頁是目前熱門的解決方案,好比一雙男生的休閑鞋,可以與所有褲子進行隨意搭配,但是對于專題設計來說,響應式設計并不合適。
專題網頁的設計通常是短平快,在特定時間達到一些運營需求,而響應式設計通常需要考慮更多不同分辨率下的響應效果,花費的設計和開發時間成本可能是雙倍的,而且專題設計具有很強的形式感,響應式設計的流體布局,必然會對視覺造成限制,所以對于專題來說做成響應式的網站需要慎重考慮。
最高效的辦法就是傳統的為手機版單獨做一版設計稿,讓手機版網頁滿足通用的移動設備分辨率。
1、PC版和手機版頁面保持一致性
看用戶的訪問數據來定,一般情況下都是先做PC版的頁面再做手機頁面,PC端網頁可以呈現更豐富的內容,用戶瀏覽網頁時更專注,達到最好的體驗。
但有很多情況下,頁面的訪問更多的來自手機端,比如手游的專題,用戶通過微信、手Q入口進入,如果開始就先做PC版的專題,想必手機版的內容將是一個移植的PC版網頁,讓移動版的體驗大打折扣。
舉個例子,twitter與instagram的PC頁面都是從手機端的延展,繼承了手機端的交互,保持了一個很好的一致性體驗。
2、移動端專題頁面的形式
首先,我們要先確定移動端專題頁面的形式,基本上移動端網站有3個選項:
(1)、響應式網站,即網站的域名和URL都不變,只是根據瀏覽設備而自動調整頁面的大小和內容,這主要是靠HTML5和CSS代碼實現的。
(2)、網站的域名和URL不變,但是根據用戶的設備來進行判斷,給用戶不同的頁面,即URL不變,但是HTML頁面發生了變化。
(3)、啟用新的子域名,如http://boke.008xhy.com,根據用戶的設備來進行判斷,然后進行跳轉。
在這里,我想重點說一下,第一種方式是最佳的方式,但是這種方式也有很多的挑戰,而國內普遍采用的是第三種方式,這種方式從網站優化上和成本上都不是非常好,但是客觀現實的影響,卻比較普遍。還有就是國內的移動網絡的網速實際還比較慢,所以移動端的網站需要進行精簡,這樣的話對桌面端的網站進行適配是肯定不行的。
(1)、第一種方式面臨的問題是非智能機的瀏覽器和臺式機的IE6等瀏覽器對HTML5和CSS的支持是存在問題的。
(2)、第二種方式,我是持謹慎態度的,因為我會擔心網站對百度蜘蛛的處理問題,因為百度蜘蛛沒有區分移動和桌面的蜘蛛,這樣在判斷跳轉上可能會出現問題,從而對網站的排名和權重有不利的影響。
(3)、第三種方式,其實是個無奈之選,但是從技術上絕對不是最佳之選。
其實第三種方式最大的挑戰就在于使搜索引擎蜘蛛正確的判斷我們的網站為移動端網站。
3、跳轉方式
根據用戶訪問設備來進行的跳轉的時候,可以采用兩種方式HTTP重定向和Javascript重定向。
HTTP重定向就是我們通常說是的301和302重定向,但是我會建議大家采用302重定向的方式,因為如果搜索引擎蜘蛛對頁面的判斷出現了問題,無法準確判斷是移動端網站的時候,采用301跳轉回有比較大的風險。
而Javascript重定向這種方法,對某些搜索引擎而言不是很友好。如果對搜索引擎的蜘蛛判斷不準確時,即無法判斷是否為移動端蜘蛛時,讓其返回適配版的HTML版網站即可,無需跳轉回桌面版。
4、URL規劃
移動端的URL規劃最好與桌面端保持一致,除了前面的域名不同以外。如:http://boke.008xhy.com/abc.html和m.008xhy.com/abc.html,同時需要注意的是,不要給移動端的URL添加很多追蹤參數,使用規范、簡單的url,盡量去除與頁面內容無關的參數,如用來區分手機型號、區分訪問用戶,方便統計等的參數(如果需要添加參數的處理方式,可以采用其他的方法)。
我們再幫著搜索引擎判斷我們為移動端網站時,主要有2種方法,建議最好是同時采用。
(1)、DOCTYPE聲明
使用DOCTYPE聲明有助于搜索引擎識別該頁面是否適合手機瀏覽。
<!DOCTYPE> 聲明位于文檔中的最前面的位置,處于 <html> 標簽之前。
例如:xhtml協議的手機頁面中可以使用如下DOCTYPE:
<http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>
wml協議的手機頁面可以使用如下DOCTYPE:
<http://www.wapforum.org/DTD/wml_1.1.xml”>
而HTML5協議的DOCTYPE為:
<!DOCTYPE HTML>
需要注意的是HTML5的網站容易被搜索引擎判斷為是響應式網站,即一個網站可以適配不同的瀏覽設備。所以,最好還是添加<link>標簽。
(2)、<link>標簽
<link>標簽需要在移動端和桌面端同時對頁面進行注釋,這里需要注意的是這樣就需要保持移動端和桌面端的網站URL規劃一致。
例如:桌面端的頁面的可以寫為:
<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”http://boke.008xhy.com/page-1″ >
移動端的頁面的可以寫為:
<link rel=”canonical” href=”http://boke.008xhy.com/page-1″ > |
SEO新手移動端專題頁面的優化要點
發布時間:2017.04.06 瀏覽:
次
0
贊一個
預約SEO顧問服務請聯系:185-1018-8870(手機微信同步) 領取免費VIP內部課程
文章來源:北京SEO技術服務中心
文章標題:SEO新手移動端專題頁面的優化要點
本文地址:http://www.szbingri.com/yidongyouhua/490.html
版權所有 © 北京SEO技術服務中心(微信/QQ:zhizheseo/2052048546),歡迎分享本文,轉載請保留出處! 
上一篇:SEO技術:移動端搜索和PC端搜索的區別 下一篇:17個移動端SEO優化意見

