在移動大潮如此洶涌猛烈的情況下,重視移動流量是必須的。而一個移動友好的站對用戶是適合瀏覽,而對搜索引擎來說則是適當(dāng)?shù)臉?biāo)簽使用,讓他在最短時間內(nèi)判別出它的移動友好性,從而脫穎而出。
首先是meta標(biāo)簽標(biāo)示。以及將手機(jī),移動端,wap版等代表移動的詞匯插入到網(wǎng)頁中頂部尾部以及頁面中幾次,強(qiá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> 京東 - 手機(jī)版 </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="手機(jī)購物,WAP商城,日用百貨,3C家電,汽車用品">
四、網(wǎng)易
<title>手機(jī)網(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)鍵詞。 標(biāo)簽位于文檔的頭部,不包含任何內(nèi)容。 標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對。
手機(jī)端特有的有哪些?
<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標(biāo)簽表示:強(qiáng)制讓文檔的寬度與設(shè)備的寬度保持1:1,并且文檔最大的寬度比例是1.0,且不允許用戶點擊屏幕放大瀏覽;
width - viewport的寬度 height - viewport的高度 initial-scale - 初始的縮放比例 minimum-scale - 允許用戶縮放到的最小比例 maximum-scale - 允許用戶縮放到的最大比例 user-scalable - 用戶是否可以手動縮放
第二個meta標(biāo)簽是iphone設(shè)備中的safari私有meta標(biāo)簽,它表示:允許全屏模式瀏覽;
第三個meta標(biāo)簽也是iphone的私有標(biāo)簽,它指定的iphone中safari頂端的狀態(tài)條的樣式;
在web app應(yīng)用下狀態(tài)條(屏幕頂部條)的顏色; 默認(rèn)值為default(白色),可以定為black(黑色)和black-translucent(灰色半透明)。 注意:若值為“black-translucent”將會占據(jù)頁面px位置,浮在頁面上方 (會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕為40px)。
第四個meta標(biāo)簽表示:告訴設(shè)備忽略將頁面中的數(shù)字識別為電話號碼。
其次是百度對字號間距的規(guī)定,需嚴(yán)格遵守。
百度用戶體驗部對移動頁瀏覽體驗的研究成果:
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)使用相同手勢完成不同功能。
移動標(biāo)簽
再次,降低js,大圖片,flash等富媒體資源使用,甚至在非特別必要情況下,使用純靜態(tài)文本資源,訪問速度快,主題集中,減少蜘蛛工作。用還是不用,可以細(xì)致的體現(xiàn)到每個頁面策略上去,富媒體的東西無非是利用人右腦功能強(qiáng)化記憶,加強(qiáng)吸引力的。但在移動端,它會嚴(yán)重拖慢加載速度以及占用有限手機(jī)空間。并非很好選擇,除非對圖片要求及flash或交互要求高的站點,不過通常它們的加速方面有強(qiáng)大的技術(shù)支持??捎行У譁p帶來的不利影響。
第四,使用m.jiaodaseo.com,wap.jiaodaseo.com,類似這樣的通用標(biāo)示多次重復(fù)標(biāo)示,并可采用技術(shù)手段拒絕pc用戶訪問。或者強(qiáng)制跳轉(zhuǎn)到pc頁面。如果是自適配的,這種辦法就不適用了,可加強(qiáng)上面提到的關(guān)鍵詞標(biāo)示,增進(jìn)識別度。
第五,百度的自定義標(biāo)簽,用以幫助識別pc移動站。
用來向百度蜘蛛說明此url頁面適合在PC端還是M端展現(xiàn)。說白了,就是幫助百度提交校驗識別結(jié)果的正確性,減少百度蜘蛛把PC站當(dāng)成M站,或者把M站當(dāng)成PC站進(jìn)行抓取。
2.代碼位置:
代碼放在中間,規(guī)則和對應(yīng)關(guān)系見下:
如果是PC站,代碼:<meta name="applicable-device"content="pc">
如果是M站,代碼:<meta name="applicable-device"content="mobile">
總的一句話,速度快穩(wěn)定移動訪問體驗佳,搜索引擎高度識別,并能建立起移動站跟pc站的一一對應(yīng)關(guān)系。
文章來源焦大seo
網(wǎng)址:http://unisenchem.cn