日韩一区二区麻豆国产_日日夜夜av_成人免费观看49www在线观看_亚洲.欧美.日本.国产综合在线

在移動大潮如此洶涌猛烈的情況下，重視移動流量是必須的。而一個移動友好的站對用戶是適合瀏覽，而對搜索引擎來說則是適當的標簽使用，讓他在最短時間內判別出它的移動友好性，從而脫穎而出。

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

　　一、天貓

<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>淘寶網觸屏版</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 版權所有"> <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家電,汽車用品">

　　四、網易

<title>手機網易網</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指元素可提供有關頁面的元信息(meta-information)，比如針對搜索引擎和更新頻度的描述和關鍵詞。 標簽位于文檔的頭部，不包含任何內容。 標簽的屬性定義了與文檔相關聯的名稱/值對。

　　手機端特有的有哪些?

<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標簽表示：強制讓文檔的寬度與設備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽;

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

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

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

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

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

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

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

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

2、主體內容含多圖時，除圖片質量外，應設置圖片寬度一致位置統一;

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

4、主體內容中的其他可點區域，寬度和高度應大于40px;

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

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

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

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

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

2.代碼位置：

代碼放在中間，規則和對應關系見下：　

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

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

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

總的一句話，速度快穩定移動訪問體驗佳，搜索引擎高度識別，并能建立起移動站跟pc站的一一對應關系。