本文檔集合整理了站長(cháng)學(xué)院中已有的教育文章，同時(shí)對已經(jīng)過(guò)時(shí)的內容進(jìn)行了修訂，各位站點(diǎn)管理員可以通過(guò)閱讀本文檔，全面了解在移動(dòng)大潮中從百度移動(dòng)搜索獲得更多流量的基礎性知識。本文檔的內容包括：《幾種站點(diǎn)移動(dòng)化技術(shù)選型對比》《建對百度友好的移動(dòng)站點(diǎn)》《跳轉適配生效指南》《代碼適配如何做對百度友好》《自適應對百度友好關(guān)鍵》。本文檔同時(shí)會(huì )隨著(zhù)學(xué)院內容的增加而擴充，請大家隨時(shí)關(guān)注。另外鳴謝文檔物料的提供者：百度搜索高級技術(shù)經(jīng)理振雷、52pk產(chǎn)品負責人孫二坤、高三網(wǎng)負責人三木、貓途鷹SEO負責人張洺乾、皮皮魯網(wǎng)SEO負責人蔣飛。

　　選擇適合你的移動(dòng)化之路

　　如何布局您的PC站和移動(dòng)站，并表達兩者之間內容的對應關(guān)系

　　目前較流量的PC站與移動(dòng)站配置方式有三種，百度站在搜索引擎角度將這三種分別稱(chēng)為跳轉適配、代碼適配和自適應，以下為這三種配置方式的名詞解釋及異同對比。

　　1，跳轉適配：該方法會(huì )利用單獨的網(wǎng)址向每種設備提供不同的代碼。這種配置會(huì )嘗試檢測用戶(hù)所使用的設備或ua，然后使用 HTTP 重定向和 Vary HTTP 標頭重定向到相應的頁(yè)面。

　　2，代碼適配：該方法使用相同的網(wǎng)址（不考慮用戶(hù)所使用的設備），但會(huì )根據服務(wù)器對用戶(hù)所用瀏覽器的了解（ua），針對不同設備類(lèi)型生成不同版本的 HTML。

　　3，自適應：通過(guò)同一網(wǎng)址提供相同 HTML 代碼的網(wǎng)站設計方法。該方法不考慮用戶(hù)所使用的設備（pc、平板電腦、移動(dòng)設備），但可以根據屏幕尺寸以不同方式呈現（即適應）顯示屏。

	PC、移動(dòng)網(wǎng)址是否一致	PC、移動(dòng)網(wǎng)頁(yè)代碼是否一致
跳轉適配	否	否
代碼適配	是	否
自適應	是	是

　　三種配置方式的分析

　　百度僅站在搜索引擎角度對跳轉適配、代碼適配、自適應這三種配置方式做了一些對比和分析，希望能夠幫助站點(diǎn)選擇更適合自己、性?xún)r(jià)比最優(yōu)的方式來(lái)進(jìn)行移動(dòng)化。

	跳轉適配	代碼適配	自適應
復雜程度	簡(jiǎn)單到中等。開(kāi)發(fā)獨立網(wǎng)站的速度可以非?？?。 　　小型企業(yè)可選用多種自動(dòng)方案，以近乎實(shí)時(shí)的速度生成移動(dòng)網(wǎng)站。	中到高，取決于網(wǎng)站的復雜程度和您需要創(chuàng )建的代碼庫數量。 　　代碼適配所需的開(kāi)發(fā)時(shí)間可能較長(cháng)，且要求服務(wù)器端編程	中。需要使用能隨屏幕尺寸而變的流體網(wǎng)格從頭開(kāi)始創(chuàng )建。 　　如果網(wǎng)站需求較簡(jiǎn)單，有許多開(kāi)源模板可供選擇。 　　如要構建包含額外編程的復雜的自適應網(wǎng)站，所需的時(shí)間會(huì )比較長(cháng)。
性能	中。圖片和其他網(wǎng)站內容可輕松針對小屏幕優(yōu)化，但網(wǎng)站重定向經(jīng)常會(huì )導致延遲問(wèn)題。	高?？梢院?jiǎn)化為只包含為相應設備優(yōu)化的內容，以實(shí)現最佳性能。	高。無(wú)任何重定向，但需要有周全的計劃才能實(shí)現最優(yōu)的效果。數據量膨脹是最常見(jiàn)的錯誤。
維護需求	中到高。更新主網(wǎng)站后，還必須單獨在移動(dòng)網(wǎng)站上進(jìn)行更新。	如果人工維護，將需要大量的資源。許多網(wǎng)站使用內容管理系統來(lái)避免這一問(wèn)題，并自動(dòng)在所有模板上發(fā)布內容。	低。創(chuàng )建后，更新內容會(huì )流向所有設備，維護工作量極低。
設備	可專(zhuān)門(mén)針對移動(dòng)用戶(hù)優(yōu)化網(wǎng)站。	單獨的文件和服務(wù)器端代碼（會(huì )在向用戶(hù)傳遞網(wǎng)頁(yè)前在您的服務(wù)器上運行）可以提供依設備而定的體驗。	所有設備上的用戶(hù)體驗保持一致（一些設備專(zhuān)屬的選項可通過(guò)服務(wù)器端程序添加）。
是否支持擴展至新平臺	不支持。這是智能手機專(zhuān)用的獨立移動(dòng)網(wǎng)站。新平臺無(wú)法輕松集成到現有架構中。	支持?？奢p松針對具體的設備（例如智能電視）創(chuàng )建模板，并通過(guò)同一個(gè)網(wǎng)址投放。	支持。使用指定的斷點(diǎn)和流體網(wǎng)格，可輕松擴展到新平臺和新設備。

　　建設對百度友好的移動(dòng)站點(diǎn)

　　一、域名&服務(wù)器&前端語(yǔ)言

　　1.域名

　　最初的時(shí)候，我以為移動(dòng)站（俗稱(chēng)手機站，簡(jiǎn)稱(chēng)M站或者wap站）的域名和PC站一樣，隨便挑一個(gè)就可以了。后來(lái)才發(fā)現，“理想是美好的，現實(shí)是殘酷的”：百度搜索引擎原來(lái)有自己的偏好！如下所示：

　　推薦： m.baidu.com     sports.sina.cn     a.m.hao123.net     www.m168.info

　　不推薦：www.baidu.com/m

　　可以看出來(lái)，百度搜索引擎喜歡獨立的、短小的二級域名（簡(jiǎn)潔的三級域名也可）。但卻不喜歡用子目錄做的M站，理由也很簡(jiǎn)單，如果說(shuō)PC站用 www.baidu.com，M站用www.baidu.com/m/ ，那搜索引擎對 /m/ 這個(gè)目錄會(huì )感到疑惑：到底是PC站的一個(gè)子目錄，還是PC站相對應的M站呢？真是剪不斷，理還亂啊。西安網(wǎng)站設計哪家公司好,網(wǎng)站制作推薦閱讀>>> 構建對百度友好的移動(dòng)站點(diǎn)——移動(dòng)化培訓長(cháng)沙視頻3,

　　以上舉例的域名，我們來(lái)做個(gè)PC站與M站對應的關(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

　　可能大家會(huì )發(fā)現，最后一個(gè)例子中，PC站和M站都是使用的www作為前綴，其實(shí)我是不怎么贊同的，使用 m 或者 wap 才較為合適。因為說(shuō)不定什么時(shí)候老板想把www.m168.cc 作為他用，而 www.m168.info 作為PC站了。

　　OK，我們現在知道M站用二級域名或者三級域名了，那么有同學(xué)又提到了一個(gè)問(wèn)題，在百度搜索引擎的策略里，PC站和M站的主域是不是必須用一個(gè)呢？答案是“否”，但又必須相關(guān)，如下：

　　可行——PC站：www.hao123.com 移動(dòng)站：m.hao123.net

　　不推薦——PC站：www.hao123.com 移動(dòng)站：m.123.com

　　可以看到，百度搜索引擎（以下內容簡(jiǎn)稱(chēng)百度）認同 用 hao123 做為主干，使用不同后綴的域名分別用作PC站和M站的域名，但不推薦使用沒(méi)有關(guān)系的域名。

　　2.服務(wù)器

　　不管做什么站，首先網(wǎng)站有個(gè)非常重要的前提：服務(wù)器的穩定性。百度官方透露：目前百度對可訪(fǎng)問(wèn)性有問(wèn)題的網(wǎng)站打壓是非常厲害的。如果被檢測到網(wǎng)站404、502等各種影響用戶(hù)瀏覽網(wǎng)站的狀況發(fā)生，是會(huì )影響到網(wǎng)站自身在移動(dòng)百度搜索結果里的排名。同時(shí)，移動(dòng)百度搜索對網(wǎng)頁(yè)加載速度上的要求也很苛刻：“網(wǎng)頁(yè)加載超過(guò)3秒以上不考慮排名”。當然，一般情況下會(huì )排除統計工具代碼的加載時(shí)間，但廣告加載會(huì )計算在3秒之內！大家還是先回家測試一下手機站的加載速度吧。溫馨提示：利用站長(cháng)平臺工具“頁(yè)面優(yōu)化建議”可以粗略的查出影響頁(yè)面加載的因素有哪些。西安個(gè)人做網(wǎng)站,西安企業(yè)建站推薦閱讀>>> 什么是跳轉適配——移動(dòng)化培訓長(cháng)沙視頻4,

　　

　　3.前端開(kāi)發(fā)語(yǔ)言

　　移動(dòng)互聯(lián)網(wǎng)發(fā)展至今，前端開(kāi)發(fā)語(yǔ)言經(jīng)過(guò)歷次的更迭，目前主流仍在使用的用xml、xhtml、html5。

　　歷年來(lái)，移動(dòng)web主要技術(shù)標準有：

　　WML——古典的移動(dòng)web標準，使用WML

　　i-mode——小日本的標準，使用iHTML，我們可以忽略

　　OMA領(lǐng)導的xHTML mobile profile，使用xHTML

　　W3C領(lǐng)導的xHTML Basic，使用xHTML

　　以及所謂的Full Web，也就是普通的HTML——從iPhone開(kāi)始流行起來(lái)

　　近年來(lái)比較流行HTML5，是html標準的最新版（在2014年10月正式發(fā)布），目前世界上主流瀏覽器最新版均以支持，同時(shí)，也是各站長(cháng)平臺、瀏覽器廠(chǎng)商推薦的移動(dòng)站點(diǎn)的前端語(yǔ)言標準。附送一張進(jìn)化圖，用以各位看官了解：

　　

　　二、applicable-device標注

　　1.意義

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

　　2.代碼位置

　　代碼放在<head></head>中間，規則和對應關(guān)系見(jiàn)下：

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

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

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

　　三、站點(diǎn)結構

　　1.樹(shù)狀or扁平？

　　其實(shí)大家沒(méi)有必要再糾結所謂的樹(shù)狀還是扁平，只要能讓Baiduspider把整個(gè)網(wǎng)站跑一遍就可以，但今天要提醒大家注意兩點(diǎn)：

　　a 不要所有內容放在同一個(gè)目錄下（包括根目錄），這種不符合上面所說(shuō)的“樹(shù)狀結構”，同時(shí)無(wú)法讓蜘蛛明白這些文章的分類(lèi)。錯誤例子：http://www.xxx.com/article-7750-1.html

　　b 不要過(guò)度細分目錄（就是一級目錄下面有二級目錄，然后還有三級、四級。。。等目錄），按需生成目錄，不要無(wú)下限的生成多級目錄：

　　http://www.xxx.com/news/ 推薦

　　http://www.xxx.com/news/yyxw/ 若內容過(guò)少，不推薦

　　2.面包屑導航

　　對于移動(dòng)網(wǎng)頁(yè)來(lái)說(shuō)，面包屑導航也非常重要，在此不再多言。

　　3.anchor質(zhì)量

　　超鏈接分兩種，一種是純文本鏈接（只有url，沒(méi)有說(shuō)明描述），在移動(dòng)網(wǎng)頁(yè)上百度并不推薦使用；另一種就是錨文本鏈接，代碼如下：

　　<a title="標題描述" href="http://www.xxx.com/article-7750-1.html">標題描述</a>

　　上述標題描述即為anchor，這個(gè)anchor必須準確地描述相對應的鏈接內容，虛假的anchor內容還會(huì )受到百度的懲罰。西安著(zhù)名的網(wǎng)站建設公司,建企業(yè)網(wǎng)站推薦閱讀>>> 百度移動(dòng)搜索工作介紹——移動(dòng)化培訓長(cháng)沙視頻1,

　　四、url結構和外鏈

　　1.url結構

　　雖然百度已經(jīng)支持動(dòng)態(tài)化url鏈接，但靜態(tài)化url鏈接依然是優(yōu)先推薦使用（純靜態(tài)化，或者偽靜態(tài)化）。在使用靜態(tài)化url鏈接時(shí)，url的結構也是需要注意的地方：

　　盡量簡(jiǎn)單短小，少用特殊符號；

　　盡量不用中文url，因為在移動(dòng)端沒(méi)有太大意義，目前平臺的改版工具和移動(dòng)適版工具支持得也不夠，別給自己找麻煩了；

　　結構層次盡量不要太多，越少越好，但不要把所有的內容頁(yè)放在同一個(gè)目錄里面

　　2.外鏈

　　有句內行話(huà)是這么說(shuō)的：“內容為王，外鏈為皇”。如今，外鏈的作用依然很強大，不管是導量方面也好，SEO優(yōu)化方面也罷。各個(gè)站長(cháng)依然為了“外鏈”而頭疼，特別是被不明身份者惡意刷外鏈的站長(cháng)們，更是吃不下睡不著(zhù)。關(guān)于外鏈生效的問(wèn)題方面，PC端、移動(dòng)端外鏈均有效（PC鏈向移動(dòng)站點(diǎn)同樣有效），但需要注意幾點(diǎn)：

　　整體而言，減弱信任度；

　　高質(zhì)量的外鏈，一直有效；

　　低質(zhì)量的外鏈，具有負面影響，而作弊外鏈，則會(huì )受到懲罰。

　　針對惡意外鏈事件屢次發(fā)生，站長(cháng)平臺發(fā)布了“外鏈分析”的工具，讓各位站長(cháng)可以明確的知曉到底有哪些站放了我們網(wǎng)站的外鏈。各位可以在站長(cháng)平臺查看：

　　

　　五、移動(dòng)類(lèi)型提交

　　百度站在平臺的設置里，把網(wǎng)站分為了五類(lèi)：PC站；有對應PC站的移動(dòng)站；獨立移動(dòng)站；自適應的站點(diǎn)；代碼適配的站點(diǎn)。根據站點(diǎn)實(shí)際情況進(jìn)行設置，有利于百度蜘蛛在抓取頁(yè)面，以及搜索結果的排名（PC站和M站的搜索結果展現機制不一樣）。設置方法如下：

　　

　　

　　跳轉適配生效經(jīng)驗分享

　　當用戶(hù)用百度搜索某個(gè)關(guān)鍵詞時(shí)，百度會(huì )優(yōu)先展現用戶(hù)體驗最佳的頁(yè)面，就算你做了移動(dòng)站，可因為百度并沒(méi)有發(fā)現你原PC頁(yè)面對應的移動(dòng)頁(yè)面，也會(huì )失去上述優(yōu)先機會(huì )。那么，如何讓百度快速發(fā)現PC--移動(dòng)頁(yè)面的對應關(guān)系？我們常做的有自主適配、meta標注、站長(cháng)工具提交適配關(guān)系，但由于自主適配和meta標注只有在百度蜘蛛抓取原PC頁(yè)面的時(shí)候才能發(fā)現對應的移動(dòng)頁(yè)面，那么發(fā)現全部移動(dòng)頁(yè)面會(huì )需要很長(cháng)的時(shí)間，而在百度站長(cháng)工具中提交移動(dòng)適配關(guān)系將大大縮短了這個(gè)時(shí)間。

　　下圖中這個(gè)移動(dòng)站上線(xiàn)半年，之前一直做了自主適配和meta標注，在8月10日的時(shí)候提交了移動(dòng)適配，通過(guò)下面曲線(xiàn)圖就可以看出6天之后適配效果就達到比較理想狀態(tài)（紅線(xiàn)和藍線(xiàn)間距越小適配效果越好）。

　　6天時(shí)間就校驗成功并生效，可能會(huì )讓一些校驗不成功或一直校驗中的同學(xué)憤憤不平，但在吐槽的時(shí)候，是不是也應該在自己身上找下原因呢？下面我們主要闡述下移動(dòng)適配中的幾個(gè)要點(diǎn)。

　　一、內容一致是移動(dòng)適配成功的關(guān)鍵

　　1、PC頁(yè)面和對應的移動(dòng)頁(yè)面主體內容必須完全對等

　　盡量保持原PC頁(yè)面信息量不變，但為了移動(dòng)頁(yè)面美觀(guān)和訪(fǎng)問(wèn)速度，可以刪減不太重要的模塊和細分導航，但頁(yè)面主體內容必須保持不變，比如文章正文或目錄頁(yè)面的鏈接數和鏈接指向要完全一致。

　　2、PC和移動(dòng)的適配關(guān)系必須是一對一，不能多對一

　　若某些PC頁(yè)面沒(méi)有對應的移動(dòng)頁(yè)，那這些PC頁(yè)可以不提交適配關(guān)系，但不能將多個(gè)PC頁(yè)面同時(shí)指向一個(gè)移動(dòng)頁(yè)面，比如某文章頁(yè)面在PC上有分頁(yè)，到了移動(dòng)站上分頁(yè)取消，原PC文章所有分頁(yè)都指向了同一個(gè)移動(dòng)頁(yè)面，這也會(huì )導致校驗識別。PS：允許出現一個(gè)PC頁(yè)面對應兩個(gè)移動(dòng)頁(yè)的情況：一個(gè)是給高端機看的，一個(gè)是給低端機看的。

　　3、需要適配的頁(yè)面不能內容過(guò)少、為空或者無(wú)法訪(fǎng)問(wèn)

　　百度需要將PC頁(yè)面內容和移動(dòng)頁(yè)面內容進(jìn)行對比參照，若內容過(guò)少或空，以及需要登錄才能查看的頁(yè)面，百度都無(wú)法識別相似度。

　　二、建議移動(dòng)站和PC同主域或同主干，不建議使用目錄

　　1、移動(dòng)站和PC主域相同，或主干相同

　　例若PC站是www.123.com，移動(dòng)站強烈建議選用m.123.com，移動(dòng)站URL盡量簡(jiǎn)潔短小，建議使用m.123.com而非yidongzhan.123.com。www.123.net因為主干相同也可以。

　　2、不建議使用二級目錄作為移動(dòng)站

　　例若PC站是www.123.com，移動(dòng)站選用www.123.com/m/，這樣，百度、GOOGLE等搜索引擎都是不喜歡的。但如果真的這樣做了，百度站長(cháng)工具也可以提交適配規則，具體方法可查看站長(cháng)學(xué)院中《目錄級移動(dòng)適配如何使用工具提交適配關(guān)系》這篇文章。

　　三、更多注意事項

　　1、允許Baiduspider訪(fǎng)問(wèn)，不要robots封禁

　　雖然聽(tīng)起來(lái)有些無(wú)厘頭，但這種情況是真實(shí)存在的，要注意你的移動(dòng)站點(diǎn)對百度是不是開(kāi)放的。

　　2、UA判斷后盡量使用301或302進(jìn)行跳轉

　　現在比較常見(jiàn)的是PC站點(diǎn)只適配一個(gè)移動(dòng)站點(diǎn)，那么使用301就可以，如果需要同時(shí)適配高端域名和低端域名，推薦使用302

　　3、盡量為頁(yè)面添加applicable-device標簽

　　applicable-device標簽用于幫助百度校驗識別頁(yè)面類(lèi)型的準確度，雖然不是硬性要求，但對站點(diǎn)來(lái)說(shuō)沒(méi)有任何弊端

　　如果是PC頁(yè)，在<head></head>中標注<meta name="applicable-device"content="pc">

　　如果是移動(dòng)頁(yè)，在<head></head>中標注<meta name="applicable-device"content="mobile">

　　4、移動(dòng)適配工具、META標簽、自主適配——三種方式邏輯關(guān)系保持一致

　　很多朋友都是這三種方式全用的，百度也支持這樣，但這里有一個(gè)問(wèn)題是：邏輯關(guān)系要保持不致，不能在自主適配時(shí)PC頁(yè)對應的是移動(dòng)頁(yè)是A，而提交時(shí)卻變成了B。這樣最終百度自主選擇的適配移動(dòng)頁(yè)面可能和你預期的不一樣。

　　四、通過(guò)百度站長(cháng)工具提交適配關(guān)系的注意事項

　　前面兩個(gè)要點(diǎn)要確保都沒(méi)問(wèn)題了，那接下來(lái)就是向百度提交適配關(guān)系了。

　　1、強烈推薦使用規則適配

　　使用規則適配的好處主要有百度校驗快，生效時(shí)間短，最主要的是后期不需要站長(cháng)去維護，而URL適配需要不斷地更新近期增加的頁(yè)面。建議只有當PC對應的移動(dòng)頁(yè)面URL沒(méi)有規則可言時(shí)再考慮URL適配。

　　2、在規則適配中推薦使用提交多條規則

　　除非你的站點(diǎn)簡(jiǎn)單，頁(yè)面類(lèi)型單一可以選用單條規則，使用多條規則的好處是可以針對不同類(lèi)型的URL頁(yè)面寫(xiě)出對應規則，比如目錄頁(yè)、目錄分頁(yè)、文章頁(yè)、專(zhuān)題頁(yè)、產(chǎn)品頁(yè)等等，這樣能照顧到每一種頁(yè)面類(lèi)型，一旦某個(gè)規則填寫(xiě)錯誤負面影響可以縮到最小，整體提高校驗速度和縮短生效時(shí)間。

　　3、規則適配中正則粒度越細越好

　　提交多條規則就涉及到正則式的問(wèn)題，正則匹配符號(\d+)表述數字，([a-zA-Z]+) 表示字母，([a-zA-Z0-9]+)表示字母混合，(\w+)表示字母數字下劃線(xiàn)混合，上述四種匹配符號中，前兩者屬于粒度最細的、推薦使用，第三種第四種粒度較粗，在正則式中若用大粒度匹配符將會(huì )增加校驗時(shí)間。

　　案例：若有兩個(gè)PC頁(yè)面www.123.com/a/abc-1.html和www.123.com/a/def-1.html，有些站長(cháng)會(huì )直接用 www.123.com/a/(\w+).html 對應 m.123.com/a/${1}.html 一個(gè)正則表達。但建議寫(xiě)成兩個(gè)正則：

　　www.123.com/a/abc-(\d+).html對應 m.123.com/a/abc-${1}.html

　　www.123.com/a/def-(\d+).html對應 m.123.com/a/def-${1}.html

　　五、最后強調

　　不管使用哪種方式，適配成功后都要持續保持PC頁(yè)和移動(dòng)頁(yè)的適配關(guān)系，因為百度會(huì )繼續檢查適配關(guān)系是否正常是否生效，如果發(fā)現適配關(guān)系不正確，之前生效的數據也會(huì )轉為失效，影響移動(dòng)流量。

　　1，PC結構發(fā)生變化，檢查移動(dòng)站點(diǎn)是否快速跟著(zhù)變了

　　2，PC頁(yè)面主體內容發(fā)生變化，檢查移動(dòng)頁(yè)面是否一致

　　3，如果使用平臺工具提交的適配關(guān)系，定期檢查數據狀態(tài)，如果之前顯示“適配成功”的數據改成了“校驗失敗”要趕緊查看PC頁(yè)與移動(dòng)頁(yè)的對應關(guān)系。

　　自適應對百度友好關(guān)鍵

　　一、什么樣的網(wǎng)站適合做自適應

　　自適應網(wǎng)頁(yè)設計(Responsive Web Design)是指可以自動(dòng)識別終端設備屏幕的大小從而做出相應調整的網(wǎng)頁(yè)設計方法。這種網(wǎng)頁(yè)設計方法完美解決了如何在不同大小的網(wǎng)絡(luò )設備上呈現同樣的網(wǎng)頁(yè)效果。大家公認自適應至少有4個(gè)好處:提升用戶(hù)體驗；PC端和移動(dòng)端SEO保持一致；避免重復內容和出錯內容；鏈接統一。

　　而自適應比較明顯的缺陷是，開(kāi)發(fā)成本比較高，尤其是要構建包含額外編程的復雜的自適應網(wǎng)站，所需的時(shí)間會(huì )比較長(cháng)。如果網(wǎng)站需求較簡(jiǎn)單，有許多開(kāi)源模板可供選擇。

　　對于已經(jīng)比較成熟PC網(wǎng)站來(lái)說(shuō)，如果要實(shí)現全站的自適應，有可能需要推掉原來(lái)所有的代碼進(jìn)行重構，時(shí)間和技術(shù)成本都比較大，而且如果一個(gè)網(wǎng)站有多個(gè)portal（入口），會(huì )大大增加架構設計的復雜度，所以現在有很多網(wǎng)站只在移動(dòng)端實(shí)現了響應式布局設計。

　　二、自適應網(wǎng)頁(yè)代碼上需要做出哪些調整

　　1、 阻止移動(dòng)瀏覽器自動(dòng)調整頁(yè)面大小

　　iOS和Android瀏覽器都基于webkit核心，這兩種瀏覽器以及其他的很多瀏覽器都支持viewport meta元素覆蓋默認的畫(huà)布縮放設置，只需在HTML的<head>標簽中插入一個(gè)<meta>標簽，<meta>標簽中可以設置具體的寬度(如像素值)或者縮放比例2.0(設備實(shí)際尺寸的兩倍)，下面是將一個(gè)頁(yè)面放大到設備實(shí)際尺寸兩倍顯示的meta標簽示例:

　　<meta name=”viewport” content=”initial-scale=2.0,width=device-width”/>

　　2、將網(wǎng)頁(yè)修改為百分比布局

　　當某個(gè)瀏覽窗口處于媒體查詢(xún)固定的范圍之外，網(wǎng)頁(yè)就需要水平滾動(dòng)才能完整瀏覽，而通過(guò)百分比布局可以頁(yè)面元素根據窗口大小在一個(gè)又一個(gè)媒體查詢(xún)之間靈活修正樣式，具體來(lái)講，就是css代碼不會(huì )指定具體像素寬度：width:xxx px;而是會(huì )指定一個(gè)百分比寬度：width:xx%;或者直接就是width:auto;這里大家可以根據一個(gè)簡(jiǎn)易的公式將固定像素寬度轉換成對應的百分比寬度：目標元素寬度 ÷ 上下文元素寬度 = 百分比寬度

　　例如：

　　<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;

　　}

　　轉換為百分比的header區塊的css為：

　　#header {

　　margin-right: 10px;

　　margin-left: 10px;

　　width: 97.916667% /* 940 ÷ 960 */

　　}

　　3、用em替換px

　　同樣，目標元素寬度 ÷ 上下文元素寬度 = 百分比寬度這個(gè)公式也適用于將文字的像素單位轉換為相對單位，值得注意的是，現代瀏覽器的默認文字都是16像素，因此一開(kāi)始給body標簽應用下列任何一條規則所產(chǎn)生的效果都一樣:

　　font-size: 100%;

　　font-size:16px;

　　font-size: 1em;

　　例如某網(wǎng)站網(wǎ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、流動(dòng)布局（fluid grid）的使用

　　“流動(dòng)布局”指的是各個(gè)區塊的位置都浮動(dòng)，不是固定不變的。

　　.main {float: right;width: 70%;}

　　.leftBar {float: left;width: 25%;}

　　這么做的好處是，如果寬度太小，放不下兩個(gè)元素，后面的元素會(huì )自動(dòng)滾動(dòng)到前面元素的下方，不會(huì )在水平方向溢出，避免了水平滾動(dòng)條的出現，大大提升了用戶(hù)的閱讀體驗。另外，絕對定位（position:absolute）的使用，也要非常小心。

　　5、Media Query技術(shù)的使用

　　在自適應設計的技術(shù)中，css3支持css2.1定義的媒體類(lèi)型，同時(shí)添加了很多涉及媒體類(lèi)型的功能屬性，包括max-width(最大寬度)，device-width(設備寬度，orientation(屏幕定向:橫屏或豎屏)，因此可以通過(guò)Media Query加載相應的CSS文件. 例如，下面代碼定義了如果頁(yè)面通過(guò)屏幕呈現，并且屏幕寬度不超過(guò)480px,則加載shetland.css

　　<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />

　　同樣可以創(chuàng )建多個(gè)樣式表，以適應不同設備或者不同分辨率的寬度范圍，當然更有效的做法是將多個(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;

　　}

　　上面的代碼中定義的樣式類(lèi)只有在瀏覽器屏幕寬度超過(guò)600px時(shí)才會(huì )有效。

　　因此，使用min-width和max-width可以同時(shí)判斷屏幕尺寸與瀏覽器實(shí)際寬度，如果希望通過(guò)Media Query作用于某種特定設備，但忽略在其上運行的瀏覽器是否由于沒(méi)有最大化尺寸與設備屏幕尺寸不一致，則可以使用max-device-width和max-device-width屬性來(lái)判斷設備本身屏幕尺寸。

　　Media Query不是唯一的解決方案，同樣可以通過(guò)Javascript來(lái)實(shí)現自適應設計，特別是某些舊瀏覽器無(wú)法完美支持CSS3的Media Query時(shí)，它可以作為備選方案。當然，我們仍然能借助專(zhuān)業(yè)的Javascript庫來(lái)幫助舊瀏覽器(IE5+,Firefox 1+,Safari 2等)支持CSS3的Media Queries.使用方法:下載css3-mediaqueries.js,然后在頁(yè)面中調用它即可，例如:

　　<!--[if lt IE 9]>

　　<script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script>

　　<![endif]-->

　　6、 設計響應式圖片

　　有很多同比縮放圖片的技術(shù)，其中有不少是簡(jiǎn)單易行的，比較流行的方法是使用CSS的max-width屬性：

　　img { max-width: 100%;}

　　老版本的IE不支持max-width，所以只好寫(xiě)成：

　　img { width: 100%; }此外，windows平臺縮放圖片時(shí)，可能出現圖像失真現象。這時(shí)，可以嘗試使用IE的專(zhuān)有命令：

　　img { -ms-interpolation-mode: bicubic; }

　　或者，Ethan Marcotte的imgSizer.js。

　　addLoadEvent(function() {

　　var imgs =

　　ocument.getElementById("content").getElementsByTagName("img");

　　imgSizer.collate(imgs);

　　});

　　如果有條件的話(huà)，最好能根據屏幕的不同大小，加載不同分辨率的圖片。

　　三、 自適應站點(diǎn)對百度友好的關(guān)鍵

　　1，applicable-device標注應該怎么寫(xiě)

　　有了自適應設計的網(wǎng)頁(yè)，還要照顧到對百度友好的設計，即告訴百度“我是自適應頁(yè)面”方便百度進(jìn)行識別校驗。方法也很簡(jiǎn)單，只要在上面viewport標簽下面再添加一個(gè)applicable-device標簽就行：

　　<meta name="applicable-device" content="pc,mobile">

　　表示頁(yè)面同時(shí)適合在移動(dòng)設備和PC上進(jìn)行瀏覽。

　　2， 在使用百度站長(cháng)平臺鏈接提交工具的sitemp進(jìn)行提交時(shí)，要做mobile type標記，具體取值：

　　<mobile:mobile type="pc,mobile"/>

　　其他網(wǎng)頁(yè)取值如下：

　　<mobile:mobile/> ：移動(dòng)網(wǎng)頁(yè)

　　<mobile:mobile type="mobile"/> ：移動(dòng)網(wǎng)頁(yè)

　　<mobile:mobile type="htmladapt"/>：代碼適配

　　無(wú)該上述標簽表示為PC網(wǎng)頁(yè)

　　代碼適配如何做對百度友好

　　百度的移動(dòng)適配目前分為三種情況：跳轉適配，代碼適配和自適應。跳轉適配目前百度的站長(cháng)平臺里有完整的適配工具，可以在平臺里提交適配規則即可。但是代碼適配則需要我們在網(wǎng)站里做一些配置，才能讓百度準確識別我們的網(wǎng)頁(yè)適配關(guān)系。下面就詳細介紹下我們做代碼適配的過(guò)程。

　　流量潛力

　　如果不做移動(dòng)適配的話(huà)，可能我們本來(lái)有的移動(dòng)網(wǎng)頁(yè)和移動(dòng)端排名因百度無(wú)法確認是移動(dòng)頁(yè)面，因此這部分流量都給指向了百度的轉碼頁(yè)?？梢钥醋约壕W(wǎng)站在站長(cháng)工具里面，移動(dòng)端有多少流量是指向了轉碼頁(yè)。這部分流量在做完適配后，即可指向我們的移動(dòng)頁(yè)面，避免了自己的流量被百度截流。

　　開(kāi)發(fā)

　　代碼適配的開(kāi)發(fā)，百度官方也有詳細的說(shuō)明，可分為兩部分： Vary HTTP標頭 和 Meta applicable-device 標簽。

　　【Vary HTTP 標頭】

　　其作用在百度的文檔里解釋得很清楚：1、它會(huì )向百度傳遞一個(gè)信號，表示說(shuō)這是個(gè)代碼適配的站點(diǎn)，百度就會(huì )盡快把網(wǎng)站抓取一遍進(jìn)行適配；2、它可以防止用戶(hù)接收到錯誤的網(wǎng)頁(yè)緩存。這部分是在網(wǎng)站的服務(wù)器上進(jìn)行的，有可能是 Nginx,Apache, IIS 等， 需要在服務(wù)器的配置里，設置 Varyheader 為 Vary:Accept-Encoding, User-Agent

　　比如Nginx 下， 可以在配置文件中加上：more_set_headers-s 200 "Vary: " "Accept-Encoding, User-Agent"

　　注意：打開(kāi)這個(gè)設置需要nginx同時(shí)安裝有ngx_headers_more模塊

　　在A(yíng)pache下，可以在配置文件里寫(xiě)上：Headerappend Vary User-Agent

　　【Meta applicable-device 標簽】

　　Vary header 加上之后，為了讓百度更好地識別我們的頁(yè)面是 PC 還是 Mobile，就需要使用百度自定義的這個(gè) Meta applicable-device 標簽了。注意以下來(lái)自百度的消息: Meta applicable-device 標簽，并非是站點(diǎn)必須標注的，現在很多站點(diǎn)沒(méi)有標記這個(gè)標簽情況也很好。但這個(gè)標簽可以幫助百度校驗自己的判斷，并及時(shí)進(jìn)行修正。做這個(gè)事情又不麻煩，所以我們建議代碼適配站點(diǎn)為了保證效果，還是加這個(gè)標簽。

　　因此可能有些網(wǎng)站之前的移動(dòng)流量已經(jīng)很好了, 不會(huì )出現被百度轉碼的情況. 這說(shuō)明百度已經(jīng)能很好地識別你的移動(dòng)頁(yè)面了. 但是依然建議加上這個(gè)標簽, 一來(lái)加這個(gè)標簽很容易, 二來(lái)可以確保百度能更準確地識別頁(yè)面類(lèi)型. 如果沒(méi)有加這個(gè)標簽的話(huà), 萬(wàn)一突然技術(shù)做改版, 一些代碼的修改導致百度無(wú)法繼續準確識別頁(yè)面類(lèi)型了呢?

　　這部分是在網(wǎng)站的模板里添加的。自適應的網(wǎng)站肯定已經(jīng)有了判斷用戶(hù)設備是 PC 還是 Mobile 的邏輯。利用這個(gè)邏輯，在整站的 <head></head> 部分添加一行代碼即可：

　　如果用戶(hù)是PC設備(注意需要包括Baiduspider PC UA)，則添加<metaname="applicable-device" content="pc">

　　如果用戶(hù)是移動(dòng)設備(包括 Baiduspider Mobile UA)，則添加<metaname="applicable-device" content="mobile">

　　注：關(guān)于BAIDUSPIDER，移動(dòng)和PC其實(shí)都是Baiduspider，并沒(méi)有區分，只是UA進(jìn)行了區分。最新移動(dòng)UA請見(jiàn)百度官方文檔。

　　驗收上線(xiàn)

　　開(kāi)發(fā)完成后，需要先在測試機上驗收?？梢杂?Google 瀏覽器來(lái)模擬 Baiduspider 來(lái)檢查是否添加正確, 如圖所示, 是檢查 Baiduspider Mobile UA 的效果的

　　

　　在測試機上驗收完成后就可以上線(xiàn)了。上線(xiàn)后，盡量再用站長(cháng)平臺的抓取診斷工具測試幾個(gè)頁(yè)面，以免到線(xiàn)上后出現與測試機不一致的情況。比如下面是抓取 PC 頁(yè)面來(lái)檢查的線(xiàn)上結果。

　　

　　跟蹤

　　上線(xiàn)后就可以持續跟蹤百度移動(dòng)的SEO流量數據了。要追蹤的主要是網(wǎng)站自己的統計工具統計的流量數據和百度站長(cháng)平臺的移動(dòng)端轉碼頁(yè)流量數據。上線(xiàn)后一到兩周，移動(dòng)端的流量應該就會(huì )有明顯的增長(cháng)，而百度轉碼頁(yè)的流量則會(huì )下降。這個(gè)此消彼長(cháng)的過(guò)程會(huì )持續一段時(shí)間。直到轉碼頁(yè)的流量基本為0，都轉為移動(dòng)頁(yè)的流量。