在移動大潮如此洶涌猛烈的情況下，重視移動流量是必須的。而一個移動友好的站對用戶是適合瀏覽，而對搜索引擎來說則是適當?shù)臉撕炇褂?，讓他在短時間內(nèi)判別出它的移動友好性，從而脫穎而出。

首先是meta標簽標示。以及將手機，移動端，wap版等代表移動的詞匯插入到網(wǎng)頁中頂部尾部以及頁面中幾次，強化移動頁面的識別。博客園一篇文章以天貓?zhí)詫毦〇|為例做了詳解，我直接摘錄過來。謝謝原作者。

一、天貓

<title>天貓觸屏版</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection">

二、淘寶

<title>淘寶網(wǎng)觸屏版</title> <meta charset="utf-8"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="yes" name="apple-touch-fullscreen"> <meta content="telephone=no" name="format-detection"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta property="wb:webmaster" content="c51923015ca19eb1"> <meta name="author" content="m.taobao.com"> <meta name="copyright" content="Copyright ?m.taobao.com 版權(quán)所有"> <meta name="revisit-after" content="1 days"> <meta name="keywords" content=""> <meta name="description" content="">

三、京東

1 <title> 京東 - 手機版 </title> 2 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"> 3 <meta name="format-detection" content="telephone=no"> 4 <meta name="Keywords" content="手機購物,WAP商城,日用百貨,3C家電,汽車用品">

四、網(wǎng)易

<title>手機網(wǎng)易網(wǎng)</title> <meta charset="UTF-8"> <meta content="width=device-width,user-scalable=no" name="viewport"> <meta name="apple-itunes-app" content="app-id=425349261"> <meta name="apple-mobile-web-app-capable" content="yes">

五、百度

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="format-detection" content="telephone=no">

meta指元素可提供有關(guān)頁面的元信息(meta-information)，比如針對搜索引擎和更新頻度的描述和關(guān)鍵詞。 標簽位于文檔的頭部，不包含任何內(nèi)容。 標簽的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對。

手機端特有的有哪些?

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection">

先進個meta標簽表示：強制讓文檔的寬度與設(shè)備的寬度保持1:1，并且文檔大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽;

width - viewport的寬度 height - viewport的高度 initial-scale - 初始的縮放比例 minimum-scale - 允許用戶縮放到的小比例 maximum-scale - 允許用戶縮放到的大比例 user-scalable - 用戶是否可以手動縮放

第二個meta標簽是iphone設(shè)備中的safari私有meta標簽，它表示：允許全屏模式瀏覽;

第三個meta標簽也是iphone的私有標簽，它指定的iphone中safari頂端的狀態(tài)條的樣式;

在web app應(yīng)用下狀態(tài)條(屏幕頂部條)的顏色; 默認值為default(白色)，可以定為black(黑色)和black-translucent(灰色半透明)。 注意：若值為“black-translucent”將會占據(jù)頁面px位置，浮在頁面上方 (會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕為40px)。

第四個meta標簽表示：告訴設(shè)備忽略將頁面中的數(shù)字識別為電話號碼。

其次是百度對字號間距的規(guī)定，需嚴格遵守。

百度用戶體驗部對移動頁瀏覽體驗的研究成果：

1、主體內(nèi)容含文本段落時，正文字號推薦14px，行間距推薦(0.42~0.6)*字號，正文字號不小于10px，行間距不小于0.2*字號;

2、主體內(nèi)容含多圖時，除圖片質(zhì)量外，應(yīng)設(shè)置圖片寬度一致位置統(tǒng)一;

3、主體內(nèi)容含多個文字鏈時，文字鏈字號推薦14px或16px：字號為14px時，縱向間距推薦13px;字號為16px時，縱向間距推薦14px;文字鏈整體可點區(qū)域不小于40px;

4、主體內(nèi)容中的其他可點區(qū)域，寬度和高度應(yīng)大于40px;

5、此外，需注意交互一致性，同一頁面不應(yīng)使用相同手勢完成不同功能。

再次，降低js，大圖片，flash等富媒體資源使用，甚至在非特別必要情況下，使用純靜態(tài)文本資源，訪問速度快，主題集中，減少蜘蛛工作。用還是不用，可以細致的體現(xiàn)到每個頁面策略上去，富媒體的東西無非是利用人右腦功能強化記憶，加強吸引力的。但在移動端，它會嚴重拖慢加載速度以及占用有限手機空間。并非很好選擇，除非對圖片要求及flash或交互要求高的站點，不過通常它們的加速方面有強大的技術(shù)支持?？捎行У譁p帶來的不利影響。

第四，使用m.jiaodaseo.com，wap.jiaodaseo.com，類似這樣的通用標示多次重復(fù)標示，并可采用技術(shù)手段拒絕pc用戶訪問。或者強制跳轉(zhuǎn)到pc頁面。如果是自適配的，這種辦法就不適用了，可加強上面提到的關(guān)鍵詞標示，增進識別度。

第五，百度的自定義標簽，用以幫助識別pc移動站。

用來向百度蜘蛛說明此url頁面適合在PC端還是M端展現(xiàn)。說白了，就是幫助百度提交校驗識別結(jié)果的正確性，減少百度蜘蛛把PC站當成M站，或者把M站當成PC站進行抓取。

2.代碼位置：

代碼放在中間，規(guī)則和對應(yīng)關(guān)系見下：　

如果是PC站，代碼：<meta name="applicable-device"content="pc">

如果是M站，代碼：<meta name="applicable-device"content="mobile">

如果是自適應(yīng)或代碼適配，代碼：<meta name="applicable-device"content="pc,mobile">。

總的一句話，速度快穩(wěn)定移動訪問體驗佳，搜索引擎高度識別，并能建立起移動站跟pc站的一一對應(yīng)關(guān)系。