目前較流量的PC站與移動站配置方式有三種,百度站在搜索引擎角度將這三種分別稱為跳轉(zhuǎn)適配、代碼適配和自適應(yīng),以下為這三種配置方式的名詞解釋及異同對比。
1,跳轉(zhuǎn)適配:該方法會利用單獨(dú)的網(wǎng)址向每種設(shè)備提供不同的代碼。這種配置會嘗試檢測用戶所使用的設(shè)備或ua,然后使用 HTTP 重定向和 Vary HTTP 標(biāo)頭重定向到相應(yīng)的頁面。
2,代碼適配:該方法使用相同的網(wǎng)址(不考慮用戶所使用的設(shè)備),但會根據(jù)服務(wù)器對用戶所用瀏覽器的了解(ua),針對不同設(shè)備類型生成不同版本的 HTML。
3,自適應(yīng):通過同一網(wǎng)址提供相同 HTML 代碼的網(wǎng)站設(shè)計(jì)方法。該方法不考慮用戶所使用的設(shè)備(pc、平板電腦、移動設(shè)備),但可以根據(jù)屏幕尺寸以不同方式呈現(xiàn)(即適應(yīng))顯示屏。
PC、移動網(wǎng)址是否一致 | PC、移動網(wǎng)頁代碼是否一致 | |
跳轉(zhuǎn)適配 | 否 | 否 |
代碼適配 | 是 | 否 |
自適應(yīng) | 是 | 是 |
百度僅站在搜索引擎角度對跳轉(zhuǎn)適配、代碼適配、自適應(yīng)這三種配置方式做了一些對比和分析,希望能夠幫助站點(diǎn)選擇更適合自己、性價(jià)比最優(yōu)的方式來進(jìn)行移動化。
跳轉(zhuǎn)適配 | 代碼適配 | 自適應(yīng) | |
復(fù)雜程度 |
簡單到中等。開發(fā)獨(dú)立網(wǎng)站的速度可以非常快。 小型企業(yè)可選用多種自動方案,以近乎實(shí)時(shí)的速度生成移動網(wǎng)站。 |
中到高,取決于網(wǎng)站的復(fù)雜程度和您需要創(chuàng)建的代碼庫數(shù)量。 代碼適配所需的開發(fā)時(shí)間可能較長,且要求服務(wù)器端編程 |
中。需要使用能隨屏幕尺寸而變的流體網(wǎng)格從頭開始創(chuàng)建。 如果網(wǎng)站需求較簡單,有許多開源模板可供選擇。 如要構(gòu)建包含額外編程的復(fù)雜的自適應(yīng)網(wǎng)站,所需的時(shí)間會比較長。 |
性能 | 中。圖片和其他網(wǎng)站內(nèi)容可輕松針對小屏幕優(yōu)化,但網(wǎng)站重定向經(jīng)常會導(dǎo)致延遲問題。 | 高??梢院喕癁橹话瑸橄鄳?yīng)設(shè)備優(yōu)化的內(nèi)容,以實(shí)現(xiàn)最佳性能。 | 高。無任何重定向,但需要有周全的計(jì)劃才能實(shí)現(xiàn)最優(yōu)的效果。數(shù)據(jù)量膨脹是最常見的錯(cuò)誤。 |
維護(hù)需求 | 中到高。更新主網(wǎng)站后,還必須單獨(dú)在移動網(wǎng)站上進(jìn)行更新。 | 如果人工維護(hù),將需要大量的資源。許多網(wǎng)站使用內(nèi)容管理系統(tǒng)來避免這一問題,并自動在所有模板上發(fā)布內(nèi)容。 | 低。創(chuàng)建后,更新內(nèi)容會流向所有設(shè)備,維護(hù)工作量極低。 |
設(shè)備 | 可專門針對移動用戶優(yōu)化網(wǎng)站。 | 單獨(dú)的文件和服務(wù)器端代碼(會在向用戶傳遞網(wǎng)頁前在您的服務(wù)器上運(yùn)行)可以提供依設(shè)備而定的體驗(yàn)。 | 所有設(shè)備上的用戶體驗(yàn)保持一致(一些設(shè)備專屬的選項(xiàng)可通過服務(wù)器端程序添加)。 |
是否支持?jǐn)U展至新平臺 | 不支持。這是智能手機(jī)專用的獨(dú)立移動網(wǎng)站。新平臺無法輕松集成到現(xiàn)有架構(gòu)中。 | 支持。可輕松針對具體的設(shè)備(例如智能電視)創(chuàng)建模板,并通過同一個(gè)網(wǎng)址投放。 | 支持。使用指定的斷點(diǎn)和流體網(wǎng)格,可輕松擴(kuò)展到新平臺和新設(shè)備。 |
一、域名&服務(wù)器&前端語言
1.域名
最初的時(shí)候,我以為移動站(俗稱手機(jī)站,簡稱M站或者wap站)的域名和PC站一樣,隨便挑一個(gè)就可以了。后來才發(fā)現(xiàn),“理想是美好的,現(xiàn)實(shí)是殘酷的”:百度搜索引擎原來有自己的偏好!如下所示:
推薦: m.baidu.com sports.sina.cn a.m.hao123.net www.m168.info
不推薦:www.baidu.com/m
可以看出來,百度搜索引擎喜歡獨(dú)立的、短小的二級域名(簡潔的三級域名也可)。但卻不喜歡用子目錄做的M站,理由也很簡單,如果說PC站用 www.baidu.com,M站用www.baidu.com/m/ ,那搜索引擎對 /m/ 這個(gè)目錄會感到疑惑:到底是PC站的一個(gè)子目錄,還是PC站相對應(yīng)的M站呢?真是剪不斷,理還亂啊。
以上舉例的域名,我們來做個(gè)PC站與M站對應(yīng)的關(guān)系:
PC站 M站
www.baidu.com m.baidu.com
sports.sina.com sports.sina.cn
a.hao123.net a.m.hao123.net
www.m168.cc www.m168.info
可能大家會發(fā)現(xiàn),最后一個(gè)例子中,PC站和M站都是使用的www作為前綴,其實(shí)我是不怎么贊同的,使用 m 或者 wap 才較為合適。因?yàn)檎f不定什么時(shí)候老板想把www.m168.cc 作為他用,而 www.m168.info 作為PC站了。
OK,我們現(xiàn)在知道M站用二級域名或者三級域名了,那么有同學(xué)又提到了一個(gè)問題,在百度搜索引擎的策略里,PC站和M站的主域是不是必須用一個(gè)呢?答案是“否”,但又必須相關(guān),如下:
可行——PC站:www.hao123.com 移動站:m.hao123.net
不推薦——PC站:www.hao123.com 移動站:m.123.com
可以看到,百度搜索引擎(以下內(nèi)容簡稱百度)認(rèn)同 用 hao123 做為主干,使用不同后綴的域名分別用作PC站和M站的域名,但不推薦使用沒有關(guān)系的域名。
2.服務(wù)器
不管做什么站,首先網(wǎng)站有個(gè)非常重要的前提:服務(wù)器的穩(wěn)定性。百度官方透露:目前百度對可訪問性有問題的網(wǎng)站打壓是非常厲害的。如果被檢測到網(wǎng)站404、502等各種影響用戶瀏覽網(wǎng)站的狀況發(fā)生,是會影響到網(wǎng)站自身在移動百度搜索結(jié)果里的排名。同時(shí),移動百度搜索對網(wǎng)頁加載速度上的要求也很苛刻:“網(wǎng)頁加載超過3秒以上不考慮排名”。當(dāng)然,一般情況下會排除統(tǒng)計(jì)工具代碼的加載時(shí)間,但廣告加載會計(jì)算在3秒之內(nèi)!大家還是先回家測試一下手機(jī)站的加載速度吧。溫馨提示:利用站長平臺工具“頁面優(yōu)化建議”可以粗略的查出影響頁面加載的因素有哪些。
3.前端開發(fā)語言
移動互聯(lián)網(wǎng)發(fā)展至今,前端開發(fā)語言經(jīng)過歷次的更迭,目前主流仍在使用的用xml、xhtml、html5。
歷年來,移動web主要技術(shù)標(biāo)準(zhǔn)有:
WML——古典的移動web標(biāo)準(zhǔn),使用WML
i-mode——小日本的標(biāo)準(zhǔn),使用iHTML,我們可以忽略
OMA領(lǐng)導(dǎo)的xHTML mobile profile,使用xHTML
W3C領(lǐng)導(dǎo)的xHTML Basic,使用xHTML
以及所謂的Full Web,也就是普通的HTML——從iPhone開始流行起來
近年來比較流行HTML5,是html標(biāo)準(zhǔn)的最新版(在2014年10月正式發(fā)布),目前世界上主流瀏覽器最新版均以支持,同時(shí),也是各站長平臺、瀏覽器廠商推薦的移動站點(diǎn)的前端語言標(biāo)準(zhǔn)。附送一張進(jìn)化圖,用以各位看官了解:
二、applicable-device標(biāo)注
1.意義
用來向百度蜘蛛說明此url頁面適合在PC端還是M端展現(xiàn)。說白了,就是幫助百度提交校驗(yàn)識別結(jié)果的正確性,減少百度蜘蛛把PC站當(dāng)成M站,或者把M站當(dāng)成PC站進(jìn)行抓取。
2.代碼位置
代碼放在<head></head>中間,規(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">
三、站點(diǎn)結(jié)構(gòu)
1.樹狀or扁平?
其實(shí)大家沒有必要再糾結(jié)所謂的樹狀還是扁平,只要能讓Baiduspider把整個(gè)網(wǎng)站跑一遍就可以,但今天要提醒大家注意兩點(diǎn):
a 不要所有內(nèi)容放在同一個(gè)目錄下(包括根目錄),這種不符合上面所說的“樹狀結(jié)構(gòu)”,同時(shí)無法讓蜘蛛明白這些文章的分類。錯(cuò)誤例子:http://www.xxx.com/article-7750-1.html
b 不要過度細(xì)分目錄(就是一級目錄下面有二級目錄,然后還有三級、四級。。。等目錄),按需生成目錄,不要無下限的生成多級目錄:
http://www.xxx.com/news/ 推薦
http://www.xxx.com/news/yyxw/ 若內(nèi)容過少,不推薦
2.面包屑導(dǎo)航
對于移動網(wǎng)頁來說,面包屑導(dǎo)航也非常重要,在此不再多言。
3.anchor質(zhì)量
超鏈接分兩種,一種是純文本鏈接(只有url,沒有說明描述),在移動網(wǎng)頁上百度并不推薦使用;另一種就是錨文本鏈接,代碼如下:
<a title="標(biāo)題描述" href="http://www.xxx.com/article-7750-1.html">標(biāo)題描述</a>
上述標(biāo)題描述即為anchor,這個(gè)anchor必須準(zhǔn)確地描述相對應(yīng)的鏈接內(nèi)容,虛假的anchor內(nèi)容還會受到百度的懲罰。
四、url結(jié)構(gòu)和外鏈
1.url結(jié)構(gòu)
雖然百度已經(jīng)支持動態(tài)化url鏈接,但靜態(tài)化url鏈接依然是優(yōu)先推薦使用(純靜態(tài)化,或者偽靜態(tài)化)。在使用靜態(tài)化url鏈接時(shí),url的結(jié)構(gòu)也是需要注意的地方:
盡量簡單短小,少用特殊符號;
盡量不用中文url,因?yàn)樵谝苿佣藳]有太大意義,目前平臺的改版工具和移動適版工具支持得也不夠,別給自己找麻煩了;
結(jié)構(gòu)層次盡量不要太多,越少越好,但不要把所有的內(nèi)容頁放在同一個(gè)目錄里面
2.外鏈
有句內(nèi)行話是這么說的:“內(nèi)容為王,外鏈為皇”。如今,外鏈的作用依然很強(qiáng)大,不管是導(dǎo)量方面也好,SEO優(yōu)化方面也罷。各個(gè)站長依然為了“外鏈”而頭疼,特別是被不明身份者惡意刷外鏈的站長們,更是吃不下睡不著。關(guān)于外鏈生效的問題方面,PC端、移動端外鏈均有效(PC鏈向移動站點(diǎn)同樣有效),但需要注意幾點(diǎn):
整體而言,減弱信任度;
高質(zhì)量的外鏈,一直有效;
低質(zhì)量的外鏈,具有負(fù)面影響,而作弊外鏈,則會受到懲罰。
針對惡意外鏈?zhǔn)录掖伟l(fā)生,站長平臺發(fā)布了“外鏈分析”的工具,讓各位站長可以明確的知曉到底有哪些站放了我們網(wǎng)站的外鏈。各位可以在站長平臺查看:
五、移動類型提交
百度站在平臺的設(shè)置里,把網(wǎng)站分為了五類:PC站;有對應(yīng)PC站的移動站;獨(dú)立移動站;自適應(yīng)的站點(diǎn);代碼適配的站點(diǎn)。根據(jù)站點(diǎn)實(shí)際情況進(jìn)行設(shè)置,有利于百度蜘蛛在抓取頁面,以及搜索結(jié)果的排名(PC站和M站的搜索結(jié)果展現(xiàn)機(jī)制不一樣)。設(shè)置方法如下:
當(dāng)用戶用百度搜索某個(gè)關(guān)鍵詞時(shí),百度會優(yōu)先展現(xiàn)用戶體驗(yàn)最佳的頁面,就算你做了移動站,可因?yàn)榘俣炔]有發(fā)現(xiàn)你原PC頁面對應(yīng)的移動頁面,也會失去上述優(yōu)先機(jī)會。那么,如何讓百度快速發(fā)現(xiàn)PC--移動頁面的對應(yīng)關(guān)系?我們常做的有自主適配、meta標(biāo)注、站長工具提交適配關(guān)系,但由于自主適配和meta標(biāo)注只有在百度蜘蛛抓取原PC頁面的時(shí)候才能發(fā)現(xiàn)對應(yīng)的移動頁面,那么發(fā)現(xiàn)全部移動頁面會需要很長的時(shí)間,而在百度站長工具中提交移動適配關(guān)系將大大縮短了這個(gè)時(shí)間。
下圖中這個(gè)移動站上線半年,之前一直做了自主適配和meta標(biāo)注,在8月10日的時(shí)候提交了移動適配,通過下面曲線圖就可以看出6天之后適配效果就達(dá)到比較理想狀態(tài)(紅線和藍(lán)線間距越小適配效果越好)。
6天時(shí)間就校驗(yàn)成功并生效,可能會讓一些校驗(yàn)不成功或一直校驗(yàn)中的同學(xué)憤憤不平,但在吐槽的時(shí)候,是不是也應(yīng)該在自己身上找下原因呢?下面我們主要闡述下移動適配中的幾個(gè)要點(diǎn)。
一、內(nèi)容一致是移動適配成功的關(guān)鍵
1、PC頁面和對應(yīng)的移動頁面主體內(nèi)容必須完全對等
盡量保持原PC頁面信息量不變,但為了移動頁面美觀和訪問速度,可以刪減不太重要的模塊和細(xì)分導(dǎo)航,但頁面主體內(nèi)容必須保持不變,比如文章正文或目錄頁面的鏈接數(shù)和鏈接指向要完全一致。
2、PC和移動的適配關(guān)系必須是一對一,不能多對一
若某些PC頁面沒有對應(yīng)的移動頁,那這些PC頁可以不提交適配關(guān)系,但不能將多個(gè)PC頁面同時(shí)指向一個(gè)移動頁面,比如某文章頁面在PC上有分頁,到了移動站上分頁取消,原PC文章所有分頁都指向了同一個(gè)移動頁面,這也會導(dǎo)致校驗(yàn)識別。PS:允許出現(xiàn)一個(gè)PC頁面對應(yīng)兩個(gè)移動頁的情況:一個(gè)是給高端機(jī)看的,一個(gè)是給低端機(jī)看的。
3、需要適配的頁面不能內(nèi)容過少、為空或者無法訪問
百度需要將PC頁面內(nèi)容和移動頁面內(nèi)容進(jìn)行對比參照,若內(nèi)容過少或空,以及需要登錄才能查看的頁面,百度都無法識別相似度。
二、建議移動站和PC同主域或同主干,不建議使用目錄
1、移動站和PC主域相同,或主干相同
例若PC站是www.123.com,移動站強(qiáng)烈建議選用m.123.com,移動站URL盡量簡潔短小,建議使用m.123.com而非yidongzhan.123.com。www.123.net因?yàn)橹鞲上嗤部梢浴?/p>
2、不建議使用二級目錄作為移動站
例若PC站是www.123.com,移動站選用www.123.com/m/,這樣,百度、GOOGLE等搜索引擎都是不喜歡的。但如果真的這樣做了,百度站長工具也可以提交適配規(guī)則,具體方法可查看站長學(xué)院中《目錄級移動適配如何使用工具提交適配關(guān)系》這篇文章。
三、更多注意事項(xiàng)
1、允許Baiduspider訪問,不要robots封禁
雖然聽起來有些無厘頭,但這種情況是真實(shí)存在的,要注意你的移動站點(diǎn)對百度是不是開放的。
2、UA判斷后盡量使用301或302進(jìn)行跳轉(zhuǎn)
現(xiàn)在比較常見的是PC站點(diǎn)只適配一個(gè)移動站點(diǎn),那么使用301就可以,如果需要同時(shí)適配高端域名和低端域名,推薦使用302
3、盡量為頁面添加applicable-device標(biāo)簽
applicable-device標(biāo)簽用于幫助百度校驗(yàn)識別頁面類型的準(zhǔn)確度,雖然不是硬性要求,但對站點(diǎn)來說沒有任何弊端
如果是PC頁,在<head></head>中標(biāo)注<meta name="applicable-device"content="pc">
如果是移動頁,在<head></head>中標(biāo)注<meta name="applicable-device"content="mobile">
4、移動適配工具、META標(biāo)簽、自主適配——三種方式邏輯關(guān)系保持一致
很多朋友都是這三種方式全用的,百度也支持這樣,但這里有一個(gè)問題是:邏輯關(guān)系要保持不致,不能在自主適配時(shí)PC頁對應(yīng)的是移動頁是A,而提交時(shí)卻變成了B。這樣最終百度自主選擇的適配移動頁面可能和你預(yù)期的不一樣。
四、通過百度站長工具提交適配關(guān)系的注意事項(xiàng)
前面兩個(gè)要點(diǎn)要確保都沒問題了,那接下來就是向百度提交適配關(guān)系了。
1、強(qiáng)烈推薦使用規(guī)則適配
使用規(guī)則適配的好處主要有百度校驗(yàn)快,生效時(shí)間短,最主要的是后期不需要站長去維護(hù),而URL適配需要不斷地更新近期增加的頁面。建議只有當(dāng)PC對應(yīng)的移動頁面URL沒有規(guī)則可言時(shí)再考慮URL適配。
2、在規(guī)則適配中推薦使用提交多條規(guī)則
除非你的站點(diǎn)簡單,頁面類型單一可以選用單條規(guī)則,使用多條規(guī)則的好處是可以針對不同類型的URL頁面寫出對應(yīng)規(guī)則,比如目錄頁、目錄分頁、文章頁、專題頁、產(chǎn)品頁等等,這樣能照顧到每一種頁面類型,一旦某個(gè)規(guī)則填寫錯(cuò)誤負(fù)面影響可以縮到最小,整體提高校驗(yàn)速度和縮短生效時(shí)間。
3、規(guī)則適配中正則粒度越細(xì)越好
提交多條規(guī)則就涉及到正則式的問題,正則匹配符號(\d+)表述數(shù)字,([a-zA-Z]+) 表示字母,([a-zA-Z0-9]+)表示字母混合,(\w+)表示字母數(shù)字下劃線混合,上述四種匹配符號中,前兩者屬于粒度最細(xì)的、推薦使用,第三種第四種粒度較粗,在正則式中若用大粒度匹配符將會增加校驗(yàn)時(shí)間。
案例:若有兩個(gè)PC頁面www.123.com/a/abc-1.html和www.123.com/a/def-1.html,有些站長會直接用 www.123.com/a/(\w+).html 對應(yīng) m.123.com/a/${1}.html 一個(gè)正則表達(dá)。但建議寫成兩個(gè)正則:
www.123.com/a/abc-(\d+).html對應(yīng) m.123.com/a/abc-${1}.html
www.123.com/a/def-(\d+).html對應(yīng) m.123.com/a/def-${1}.html
五、最后強(qiáng)調(diào)
不管使用哪種方式,適配成功后都要持續(xù)保持PC頁和移動頁的適配關(guān)系,因?yàn)榘俣葧^續(xù)檢查適配關(guān)系是否正常是否生效,如果發(fā)現(xiàn)適配關(guān)系不正確,之前生效的數(shù)據(jù)也會轉(zhuǎn)為失效,影響移動流量。
1,PC結(jié)構(gòu)發(fā)生變化,檢查移動站點(diǎn)是否快速跟著變了
2,PC頁面主體內(nèi)容發(fā)生變化,檢查移動頁面是否一致
3,如果使用平臺工具提交的適配關(guān)系,定期檢查數(shù)據(jù)狀態(tài),如果之前顯示“適配成功”的數(shù)據(jù)改成了“校驗(yàn)失敗”要趕緊查看PC頁與移動頁的對應(yīng)關(guān)系。
一、什么樣的網(wǎng)站適合做自適應(yīng)
自適應(yīng)網(wǎng)頁設(shè)計(jì)(Responsive Web Design)是指可以自動識別終端設(shè)備屏幕的大小從而做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計(jì)方法。這種網(wǎng)頁設(shè)計(jì)方法完美解決了如何在不同大小的網(wǎng)絡(luò)設(shè)備上呈現(xiàn)同樣的網(wǎng)頁效果。大家公認(rèn)自適應(yīng)至少有4個(gè)好處:提升用戶體驗(yàn);PC端和移動端SEO保持一致;避免重復(fù)內(nèi)容和出錯(cuò)內(nèi)容;鏈接統(tǒng)一。
而自適應(yīng)比較明顯的缺陷是,開發(fā)成本比較高,尤其是要構(gòu)建包含額外編程的復(fù)雜的自適應(yīng)網(wǎng)站,所需的時(shí)間會比較長。如果網(wǎng)站需求較簡單,有許多開源模板可供選擇。
對于已經(jīng)比較成熟PC網(wǎng)站來說,如果要實(shí)現(xiàn)全站的自適應(yīng),有可能需要推掉原來所有的代碼進(jìn)行重構(gòu),時(shí)間和技術(shù)成本都比較大,而且如果一個(gè)網(wǎng)站有多個(gè)portal(入口),會大大增加架構(gòu)設(shè)計(jì)的復(fù)雜度,所以現(xiàn)在有很多網(wǎng)站只在移動端實(shí)現(xiàn)了響應(yīng)式布局設(shè)計(jì)。
二、自適應(yīng)網(wǎng)頁代碼上需要做出哪些調(diào)整
1、 阻止移動瀏覽器自動調(diào)整頁面大小
iOS和Android瀏覽器都基于webkit核心,這兩種瀏覽器以及其他的很多瀏覽器都支持viewport meta元素覆蓋默認(rèn)的畫布縮放設(shè)置,只需在HTML的<head>標(biāo)簽中插入一個(gè)<meta>標(biāo)簽,<meta>標(biāo)簽中可以設(shè)置具體的寬度(如像素值)或者縮放比例2.0(設(shè)備實(shí)際尺寸的兩倍),下面是將一個(gè)頁面放大到設(shè)備實(shí)際尺寸兩倍顯示的meta標(biāo)簽示例:
<meta name=”viewport” content=”initial-scale=2.0,width=device-width”/>
2、將網(wǎng)頁修改為百分比布局
當(dāng)某個(gè)瀏覽窗口處于媒體查詢固定的范圍之外,網(wǎng)頁就需要水平滾動才能完整瀏覽,而通過百分比布局可以頁面元素根據(jù)窗口大小在一個(gè)又一個(gè)媒體查詢之間靈活修正樣式,具體來講,就是css代碼不會指定具體像素寬度:width:xxx px;而是會指定一個(gè)百分比寬度:width:xx%;或者直接就是width:auto;這里大家可以根據(jù)一個(gè)簡易的公式將固定像素寬度轉(zhuǎn)換成對應(yīng)的百分比寬度:目標(biāo)元素寬度 ÷ 上下文元素寬度 = 百分比寬度
例如:
<div id =”wraper”>
<divid = “header”></div>
</div>
#wrapper {
margin-right: auto;
margin-left: auto;
width: 960px;
}
#header {
margin-right: 10px;
margin-left:10px;
width: 940px;
}
轉(zhuǎn)換為百分比的header區(qū)塊的css為:
#header {
margin-right: 10px;
margin-left: 10px;
width: 97.916667% /* 940 ÷ 960 */
}
3、用em替換px
同樣,目標(biāo)元素寬度 ÷ 上下文元素寬度 = 百分比寬度這個(gè)公式也適用于將文字的像素單位轉(zhuǎn)換為相對單位,值得注意的是,現(xiàn)代瀏覽器的默認(rèn)文字都是16像素,因此一開始給body標(biāo)簽應(yīng)用下列任何一條規(guī)則所產(chǎn)生的效果都一樣:
font-size: 100%;
font-size:16px;
font-size: 1em;
例如某網(wǎng)站網(wǎng)站標(biāo)題相應(yīng)的樣式:
#logo {
display: block;
padding-top: 75px;
color: #0d0c0c;
font-family: Arial;
font-size: 48px;
}
修改后的樣式如下:
#logo{
display: block;
padding-top: 75px;
color: #0d0c0c;
font-family:Arial;
font-size:3em /* 48 ÷ 16 */
}
4、流動布局(fluid grid)的使用
“流動布局”指的是各個(gè)區(qū)塊的位置都浮動,不是固定不變的。
.main {float: right;width: 70%;}
.leftBar {float: left;width: 25%;}
這么做的好處是,如果寬度太小,放不下兩個(gè)元素,后面的元素會自動滾動到前面元素的下方,不會在水平方向溢出,避免了水平滾動條的出現(xiàn),大大提升了用戶的閱讀體驗(yàn)。另外,絕對定位(position:absolute)的使用,也要非常小心。
5、Media Query技術(shù)的使用
在自適應(yīng)設(shè)計(jì)的技術(shù)中,css3支持css2.1定義的媒體類型,同時(shí)添加了很多涉及媒體類型的功能屬性,包括max-width(最大寬度),device-width(設(shè)備寬度,orientation(屏幕定向:橫屏或豎屏),因此可以通過Media Query加載相應(yīng)的CSS文件. 例如,下面代碼定義了如果頁面通過屏幕呈現(xiàn),并且屏幕寬度不超過480px,則加載shetland.css
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />
同樣可以創(chuàng)建多個(gè)樣式表,以適應(yīng)不同設(shè)備或者不同分辨率的寬度范圍,當(dāng)然更有效的做法是將多個(gè)Media Query整合在一個(gè)樣式表文件中:
@media only screen and (min-devece-width: 320px) and (max-device-width: 480px) {
/* Styles */
}
@media screen and (min-width: 600px) {
.hereIsMyClass {
width: 30%;
float: right;
}
上面的代碼中定義的樣式類只有在瀏覽器屏幕寬度超過600px時(shí)才會有效。
因此,使用min-width和max-width可以同時(shí)判斷屏幕尺寸與瀏覽器實(shí)際寬度,如果希望通過Media Query作用于某種特定設(shè)備,但忽略在其上運(yùn)行的瀏覽器是否由于沒有最大化尺寸與設(shè)備屏幕尺寸不一致,則可以使用max-device-width和max-device-width屬性來判斷設(shè)備本身屏幕尺寸。
Media Query不是唯一的解決方案,同樣可以通過Javascript來實(shí)現(xiàn)自適應(yīng)設(shè)計(jì),特別是某些舊瀏覽器無法完美支持CSS3的Media Query時(shí),它可以作為備選方案。當(dāng)然,我們?nèi)匀荒芙柚鷮I(yè)的Javascript庫來幫助舊瀏覽器(IE5+,Firefox 1+,Safari 2等)支持CSS3的Media Queries.使用方法:下載css3-mediaqueries.js,然后在頁面中調(diào)用它即可,例如:
<!--[if lt IE 9]>
<script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script>
<![endif]-->
6、 設(shè)計(jì)響應(yīng)式圖片
有很多同比縮放圖片的技術(shù),其中有不少是簡單易行的,比較流行的方法是使用CSS的max-width屬性:
img { max-width: 100%;}
老版本的IE不支持max-width,所以只好寫成:
img { width: 100%; }此外,windows平臺縮放圖片時(shí),可能出現(xiàn)圖像失真現(xiàn)象。這時(shí),可以嘗試使用IE的專有命令:
img { -ms-interpolation-mode: bicubic; }
或者,Ethan Marcotte的imgSizer.js。
addLoadEvent(function() {
var imgs =
ocument.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});
如果有條件的話,最好能根據(jù)屏幕的不同大小,加載不同分辨率的圖片。
三、 自適應(yīng)站點(diǎn)對百度友好的關(guān)鍵
1,applicable-device標(biāo)注應(yīng)該怎么寫
有了自適應(yīng)設(shè)計(jì)的網(wǎng)頁,還要照顧到對百度友好的設(shè)計(jì),即告訴百度“我是自適應(yīng)頁面”方便百度進(jìn)行識別校驗(yàn)。方法也很簡單,只要在上面viewport標(biāo)簽下面再添加一個(gè)applicable-device標(biāo)簽就行:
<meta name="applicable-device" content="pc,mobile">
表示頁面同時(shí)適合在移動設(shè)備和PC上進(jìn)行瀏覽。
2, 在使用百度站長平臺鏈接提交工具的sitemp進(jìn)行提交時(shí),要做mobile type標(biāo)記,具體取值:
<mobile:mobile type="pc,mobile"/>
其他網(wǎng)頁取值如下:
<mobile:mobile/> :移動網(wǎng)頁
<mobile:mobile type="mobile"/> :移動網(wǎng)頁
<mobile:mobile type="htmladapt"/>:代碼適配
無該上述標(biāo)簽表示為PC網(wǎng)頁
百度的移動適配目前分為三種情況:跳轉(zhuǎn)適配,代碼適配和自適應(yīng)。跳轉(zhuǎn)適配目前百度的站長平臺里有完整的適配工具,可以在平臺里提交適配規(guī)則即可。但是代碼適配則需要我們在網(wǎng)站里做一些配置,才能讓百度準(zhǔn)確識別我們的網(wǎng)頁適配關(guān)系。下面就詳細(xì)介紹下我們做代碼適配的過程。
流量潛力
如果不做移動適配的話,可能我們本來有的移動網(wǎng)頁和移動端排名因百度無法確認(rèn)是移動頁面,因此這部分流量都給指向了百度的轉(zhuǎn)碼頁??梢钥醋约壕W(wǎng)站在站長工具里面,移動端有多少流量是指向了轉(zhuǎn)碼頁。這部分流量在做完適配后,即可指向我們的移動頁面,避免了自己的流量被百度截流。
開發(fā)
代碼適配的開發(fā),百度官方也有詳細(xì)的說明,可分為兩部分: Vary HTTP標(biāo)頭 和 Meta applicable-device 標(biāo)簽。
【Vary HTTP 標(biāo)頭】
其作用在百度的文檔里解釋得很清楚:1、它會向百度傳遞一個(gè)信號,表示說這是個(gè)代碼適配的站點(diǎn),百度就會盡快把網(wǎng)站抓取一遍進(jìn)行適配;2、它可以防止用戶接收到錯(cuò)誤的網(wǎng)頁緩存。這部分是在網(wǎng)站的服務(wù)器上進(jìn)行的,有可能是 Nginx,Apache, IIS 等, 需要在服務(wù)器的配置里,設(shè)置 Varyheader 為 Vary:Accept-Encoding, User-Agent
比如Nginx 下, 可以在配置文件中加上:more_set_headers-s 200 "Vary: " "Accept-Encoding, User-Agent"
注意:打開這個(gè)設(shè)置需要nginx同時(shí)安裝有ngx_headers_more模塊
在Apache下,可以在配置文件里寫上:Headerappend Vary User-Agent
【Meta applicable-device 標(biāo)簽】
Vary header 加上之后,為了讓百度更好地識別我們的頁面是 PC 還是 Mobile,就需要使用百度自定義的這個(gè) Meta applicable-device 標(biāo)簽了。注意以下來自百度的消息: Meta applicable-device 標(biāo)簽,并非是站點(diǎn)必須標(biāo)注的,現(xiàn)在很多站點(diǎn)沒有標(biāo)記這個(gè)標(biāo)簽情況也很好。但這個(gè)標(biāo)簽可以幫助百度校驗(yàn)自己的判斷,并及時(shí)進(jìn)行修正。做這個(gè)事情又不麻煩,所以我們建議代碼適配站點(diǎn)為了保證效果,還是加這個(gè)標(biāo)簽。
因此可能有些網(wǎng)站之前的移動流量已經(jīng)很好了, 不會出現(xiàn)被百度轉(zhuǎn)碼的情況. 這說明百度已經(jīng)能很好地識別你的移動頁面了. 但是依然建議加上這個(gè)標(biāo)簽, 一來加這個(gè)標(biāo)簽很容易, 二來可以確保百度能更準(zhǔn)確地識別頁面類型. 如果沒有加這個(gè)標(biāo)簽的話, 萬一突然技術(shù)做改版, 一些代碼的修改導(dǎo)致百度無法繼續(xù)準(zhǔn)確識別頁面類型了呢?
這部分是在網(wǎng)站的模板里添加的。自適應(yīng)的網(wǎng)站肯定已經(jīng)有了判斷用戶設(shè)備是 PC 還是 Mobile 的邏輯。利用這個(gè)邏輯,在整站的 <head></head> 部分添加一行代碼即可:
如果用戶是PC設(shè)備(注意需要包括Baiduspider PC UA),則添加<metaname="applicable-device" content="pc">
如果用戶是移動設(shè)備(包括 Baiduspider Mobile UA),則添加<metaname="applicable-device" content="mobile">
注:關(guān)于BAIDUSPIDER,移動和PC其實(shí)都是Baiduspider,并沒有區(qū)分,只是UA進(jìn)行了區(qū)分。最新移動UA請見百度官方文檔。
驗(yàn)收上線
開發(fā)完成后,需要先在測試機(jī)上驗(yàn)收??梢杂?Google 瀏覽器來模擬 Baiduspider 來檢查是否添加正確, 如圖所示, 是檢查 Baiduspider Mobile UA 的效果的
在測試機(jī)上驗(yàn)收完成后就可以上線了。上線后,盡量再用站長平臺的抓取診斷工具測試幾個(gè)頁面,以免到線上后出現(xiàn)與測試機(jī)不一致的情況。比如下面是抓取 PC 頁面來檢查的線上結(jié)果。
跟蹤
上線后就可以持續(xù)跟蹤百度移動的SEO流量數(shù)據(jù)了。要追蹤的主要是網(wǎng)站自己的統(tǒng)計(jì)工具統(tǒng)計(jì)的流量數(shù)據(jù)和百度站長平臺的移動端轉(zhuǎn)碼頁流量數(shù)據(jù)。上線后一到兩周,移動端的流量應(yīng)該就會有明顯的增長,而百度轉(zhuǎn)碼頁的流量則會下降。這個(gè)此消彼長的過程會持續(xù)一段時(shí)間。直到轉(zhuǎn)碼頁的流量基本為0,都轉(zhuǎn)為移動頁的流量。