海南苯概企业管理有限公司

代碼適配站點目前并非主流，但有其自己的特點和設(shè)計規(guī)范。學院邀請相關(guān)專家再次分享下如何建設(shè)對百度友好的代碼適配站點。

一、什么樣的網(wǎng)站適合做代碼適配？

代碼適配的特點是網(wǎng)站在移動化的過程中，使用了相同的網(wǎng)址作為移動適配的方法，根據(jù)服務(wù)器對用戶設(shè)備瀏覽器user agent參數(shù)的獲取，針對不同設(shè)備類型加載不同的訪問界面。也就是代碼適配成功之后，同一套網(wǎng)站url，在不同設(shè)備上打開的情況下可以是完全不同的頁面結(jié)構(gòu)和樣式（包括html和css）。

代碼適配的優(yōu)點：和自適應(yīng)站點一樣，網(wǎng)頁版和移動版使用了同一套url規(guī)則，保持了網(wǎng)頁版的原有鏈接，SEO策略可以保持一致，也避免了站內(nèi)重復內(nèi)容的產(chǎn)生；相對于自適應(yīng)網(wǎng)站設(shè)計前端性能會很高，因為是同一套代碼應(yīng)對所有的設(shè)備顯示，需要加載針對響應(yīng)式所需要的css,javascript，但是代碼適配的話可以簡化為只包含為相應(yīng)設(shè)備優(yōu)化的內(nèi)容，以實現(xiàn)較少的前端性能損耗。

代碼適配的缺點：后期代碼維護很麻煩，要針對不同設(shè)備或不同分辨率屏幕設(shè)計相應(yīng)的模板文件，內(nèi)容的部分雖然可以使用內(nèi)容管理系統(tǒng)在所有模板上自動同步更新內(nèi)容，但是根據(jù)網(wǎng)站的復雜程度，代碼適配所需的開發(fā)時間很有可能較長。

綜上所述，網(wǎng)站結(jié)構(gòu)簡單，網(wǎng)頁模板不是很多的站點比較適合做代碼適配，比如企業(yè)站，個人博客等。另外要注意的是，因為需要服務(wù)器端腳本來輔助實現(xiàn)，所以您的網(wǎng)站必須在獨立服務(wù)器或VPS云主機上，虛擬主機用戶就不要進行代碼適配您的網(wǎng)站了。
 

二、如何實現(xiàn)代碼適配？

 1.服務(wù)器端的準備工作

為什么要修改Vary HTTP頭？其實代碼適配應(yīng)用的是HTTP的內(nèi)容協(xié)商機制，即服務(wù)器為同一個URL的請求提供了多份不同的文檔作為響應(yīng)，服務(wù)端和客戶端之間會根據(jù)事先設(shè)定好的協(xié)商機制來選擇適合的版本。最常見的就是服務(wù)端根據(jù)客戶端發(fā)送的請求頭中包含某些字段自動發(fā)送最合適的版本。Vary的作用就在于告訴代理服務(wù)器、緩存或者CDN，如何判斷請求是否一樣，vary中的組合就是代理服務(wù)器、緩存或者CDN判斷的依據(jù)，比如Vary中有 User-Agent（User-Agent：告訴HTTP服務(wù)器，客戶端使用的操作系統(tǒng)和瀏覽器的名稱和版本。例 如： User-Agent: Mozilla/4.0 (compatible; MSIE8.0; Windows NT 5.1; Trident/4.0; CIBA; .NET CLR 2.0.50727; .NET CLR3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; InfoPath.2; .NET4.0E)），那么User-Agent是否變化就是判斷的依據(jù)，即使同一個頁面請求，用戶使用IE打開，再用Firefox打開的時候，會被代理服務(wù)器/CDN/緩存認為是不同的請求，如果Vary中沒有User-Agent，那么代理服務(wù)器/CDN/緩存會認為是相同的頁面，直接給用戶返回緩存的頁面，而不會再去web服務(wù)器請求相應(yīng)的頁面?？傊?wù)器開啟了Vary:User-Agent之后，客戶端的任何請求信息中會包含UA的信息。同時官方說明它有助于百度spdier 更快速地發(fā)現(xiàn)針對移動設(shè)備進行優(yōu)化的內(nèi)容，并且提高其他ua抓取此網(wǎng)頁的優(yōu)先級。

2.如何修改服務(wù)器http頭

首先查看自己網(wǎng)站的http響應(yīng)頭的方法有很多，Linux服務(wù)器端可以直接使用這個shell命令：curl –head http://www.xxxx.com/ ;Chrome 瀏覽器自帶的抓包工具也可以查看；或者直接使用站長平臺的抓取診斷工具就可以，下面就是查詢一個服務(wù)器響應(yīng)的http頭的結(jié)果：

 

這個例子里目前的http頭信息中，Vary項現(xiàn)在是Accept-Encoding;而我們要修改的也就是這一項。具體修改http頭的方法根據(jù)不同的web服務(wù)器用不同的設(shè)置方法：

1）     如果web服務(wù)器是apache的話，第一步要確保服務(wù)器是否安裝了mod_headers模塊。如果是第一次編譯安裝apache，確保./configure--prefix=/usr/local/apache2 --enable-rewrite --enable-so --enable-headers--enable-expires --with-mpm=worker --enable-modules=most --enable-deflate等，后面有--enable-headers；如果apache已經(jīng)安裝編譯好了，httpd -M 指令可以列出編譯過的模塊，同時能看到哪些模塊是static靜態(tài)編譯，哪一些是shared動態(tài)加載的。要往已經(jīng)編譯安裝好的apache添加mod_headers模塊，要在httpd的源文件里面找到mod_headers.c ,運行程序編譯出mod_headers.so ,然后在httpd.conf添加進來，參考步驟如下：

#cd /root/src/httpd-2.2.26/modules/mappers

#/usr/local/apache/bin/apxs-c mod_headers.c

#gcc-shared -o mod_headers.so mod_headers.o -lgdbm

#/usr/local/apache/bin/apxs-i -A -n mod_headers mod_headers.so

/usr/local/apache/bin/是正在使用的apahce的目錄

第二步，在httpd.conf 中添加headers_module模塊：

找到# LoadModule，在它的下一行插入：

LoadModule headers_module  modules/mod_headers.so

保存更新，然后在要修改的目標站點的配置文件中，添加下面語句：

<IfModulemod_headers.c>

        <FilesMatch".(js|css|xml|gz|html)$">

          Header append Vary: User-Agent

        </FilesMatch>

</IfModule>

保存之后，然后重啟apache就可以生效了。不需要對服務(wù)器進行重新編譯。
 

2）如果web服務(wù)器是nginx的話，第一步要確定安裝了ngx_headers_more模塊，nginx源碼沒有包含該模塊，需要另行添加。安裝方法：

wget ‘http://nginx.org/download/nginx-1.5.8.tar.gz’

tar –xzvf nginx-1.5.8.tar.gz

cd nginx-1.5.8/

#here we assume you would install you nginx under/opt/nginx/.

./configure –prefix=/opt/nginx \--add-module=/path/to/headers-more-nginx-module

make

make install

第二步，在配置文件nginx.conf中，添加如下代碼：

gzip_vary on;

more_set_headers -s 200 "Vary: ""Accept-Encoding, User-Agent";

然后重啟服務(wù)器。
 

3）  如果是IIS

在web.config里加上如下配置，web.config位置在：%windir%\Microsoft.NET\Framework\.net版本號\CONFIG\Web.config 。<system.webServer>
 <httpProtocol>
 <customHeaders>
<remove name="Vary"></remove>
<add name="Vary" value="Accept-Encoding"></add>
</customHeaders>
</httpProtocol>
</system.webServer>

最后，同樣可以用上面方法再請求一次http頭，來判斷我們的設(shè)置有沒有成功。如果返回的頭中，有Vary:User-Agent 或者Vary:Accept-Encoding User-Agent 就表明我們設(shè)置成功了。

3.完成內(nèi)容協(xié)商

首先設(shè)計好針對不同設(shè)備的網(wǎng)站模板文件，可以和pc端相應(yīng)的模板文件放在同一個路徑下，命名成不同的文件比如index.pc.htm index.iphone.htm index.andori.htm index.tv.htm等都是網(wǎng)站首頁在不同設(shè)備下的模板文件等待調(diào)用。

在這里簡單的僅以通過php代碼來實現(xiàn)的方式舉例，在url對應(yīng)的動態(tài)文件中(可能是某個入口文件，也可能是通過入口文件include某控制文件)，通過如下代碼實現(xiàn)動態(tài)適配:

$UA = strtoupper($_SERVER['HTTP_USER_AGENT']);

if(preg_match("/(iPhone|iPad|iPod|Android|ucweb|windowsphone|Blackberry)/i", $UA)) {

  /* 加載相應(yīng)的模板文件 */

}

這段代碼含義是，首先通過$UA =strtoupper($_SERVER['HTTP_USER_AGENT'])來獲取用戶 訪問的瀏覽器設(shè)備信息，通過匹配得到加載出不同設(shè)備系統(tǒng)，瀏覽器下適配好的不同模板文件(以上匹配的UA只限iphone,ipad,ipod,android,uc移動瀏覽器，windows phone,黑莓手機等設(shè)備)，如果大家想了解更多的httpuser-agent關(guān)鍵字，可自行去網(wǎng)上查找。
 

4.添加metaapplicable-device標簽

Vary標頭添加好后，服務(wù)器端就能根據(jù)請求頭中的UA信息，判斷客戶端是PC還是移動設(shè)備甚至是什么移動設(shè)備的請求了，有了這個服務(wù)器就能根據(jù)設(shè)定給出相應(yīng)的響應(yīng)文件，從而達到同一套url，不一樣的設(shè)備顯示不一樣的頁面樣式。為了讓百度更好地識別我們的頁面是 PC 還是 Mobile，就需要使用百度自定義的這個 Meta applicable-device 標簽。這個標簽可以幫助百度校驗自己的判斷，并及時進行修正。這部分是在網(wǎng)站的模板里添加的。如果是PC端的模板文件，則在<head></head> 之間添加<metaname="applicable-device"content="pc">；如果是移動端的模板文件，則在<head></head> 之間添加<metaname="applicable-device"content=" mobile ">；這樣即使通過服務(wù)器的設(shè)置BaiduSpider判斷錯誤了，這個標簽的設(shè)置也能起到修正的作用。

5.Firefox插件

之前站長學院文章<代碼適配移動站點對百度友好案例分享>中提到過Google 瀏覽器來模擬UA效果的插件，在此我再介紹一款火狐瀏覽器的UA模擬插件，它可以幫助各位站長輕松的”偽裝”成其他平臺/品牌的瀏覽器，來測試自己網(wǎng)站的適配結(jié)果

首先通過https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/ 下載并安裝此插件，

完成后，點擊工具欄上的按鈕，打開UserAgent Switcher的菜單

 

選擇“EditUser Agent”或“UserAgent Switcher”=>"Options"，打開如下的設(shè)置頁面。

 

點擊右下角的“Downloadlists of user agents to import...”鏈接，在打開的網(wǎng)頁中找到下圖中標注的位置，我們可以找到最常用的UA列表了,這里直接給出列表的下載地址，方便大家下載。

 

下載完成后，回到設(shè)置頁面，點擊左下方的“Import...”按鈕，將剛才下載的useragentswitcher.xml 導入到擴展中即可 ，之后我們就可以在瀏覽器上通過切換訪問剛剛適配好的頁面啦，之后補充一點我們?nèi)匀豢梢栽诂F(xiàn)有的UA基礎(chǔ)上“新建”（New）以及“修改”（Edit），來滿足我們的要求。

效果如下: