建網(wǎng)站必備知識：網(wǎng)站百度移動適配的方法與代碼

聽說每年6月份，百度算法大調(diào)整，道途聽說而已，而今年6月，百度站長平臺，四處召開站長沙龍，交流重點都離不開移動搜索，又于6月9日發(fā)布《移動sitemap協(xié)議mobile type升級公告》，不斷釋放移動搜索規(guī)范與調(diào)整信號，如圖，大有搜索霸主之范，“我來制定游戲規(guī)則，你們遵守來玩即可”。先不說百度怎么霸道，作為一個產(chǎn)品運(yùn)營者，我們只能遵守百度的規(guī)則，面對移動化大潮，我們的網(wǎng)站如何做到移動適配。為此，整理幾個概念以及應(yīng)用來與大家分享。

一、什么叫百度移動適配？

當(dāng)您同時擁有PC站與手機(jī)站，而且兩者在內(nèi)容上能夠?qū)?yīng)，我們需要移動適配告之百度，有助于百度在移動搜索中將原PC頁結(jié)果替換為對應(yīng)的手機(jī)頁結(jié)果。

二、百度移動適配有何意義？
早在2012年，百度就先后推出了移動搜索優(yōu)化服務(wù)（http://zhanzhang.baidu.com/wiki/37），在開放適配服務(wù)方面增加適配新選擇，全新上線了配套進(jìn)度查詢工具，調(diào)整和更新《手機(jī)站優(yōu)化指南》。通過這些舉措，逐步引導(dǎo)用戶與完善百度移動適配法則，最終達(dá)到幫助廣大網(wǎng)站更加便捷的提升移動端瀏覽效果，獲得更多搜索流量，從而輕松完成從PC端到移動端的陣營遷徙和發(fā)展革新。

三、百度移動適配有哪幾種模式？
PC站與移動站配置方式有三種，百度站在搜索引擎角度將這三種分別稱為跳轉(zhuǎn)適配、代碼適配和自適應(yīng)。

1）跳轉(zhuǎn)適配：該方法會利用單獨(dú)的網(wǎng)址向每種設(shè)備提供不同的代碼。這種配置會嘗試檢測用戶所使用的設(shè)備或ua，然后使用 HTTP 重定向和 Vary

HTTP 標(biāo)頭重定向到相應(yīng)的頁面。

【跳轉(zhuǎn)適配應(yīng)用舉例】
（1）百度siteapp。這顯然是標(biāo)準(zhǔn)的跳轉(zhuǎn)適配，但siteapp效果不大好，比如頁面混亂、內(nèi)容可控性差。好像百度也發(fā)現(xiàn)這些問題以至于此項目擱置，這個工具一直沒有更新升級。

（2）第三方移動建站工具。如：搜狐快站、騰訊風(fēng)鈴等。這些工具有個缺點是需要PC站點與移動站點做好對應(yīng)關(guān)系，需要一篇文章發(fā)兩遍的尷尬情況。

（3）完全開發(fā)一套移動站點。通過后臺程序判斷出是移動UA，不會給用戶返回代碼，直接重定向到移動頁面。這里要注意開發(fā)時一定要做好PC頁與移動頁面的對應(yīng)關(guān)系同時提交到百度站長平臺。上圖中提到“維護(hù)成本較高”，可以這樣解決：在開發(fā)時調(diào)用同一數(shù)據(jù)庫，就免去了發(fā)兩邊內(nèi)容的成本。

（4）對于CMS系統(tǒng)，無程序擴(kuò)展功能的：新建一個獨(dú)立移動站點，原PC頁面中加入JS來判斷UA，通過JS重定向到移動頁面。此方法第一次請求后會返回完整HTML到用戶本地，JS本地判斷后再次請求返回完整HTML，頁面需要加載兩次，延遲嚴(yán)重。而且百度對JS的跳轉(zhuǎn)并不支持，僅僅實現(xiàn)了頁面的轉(zhuǎn)換，還是需要好對應(yīng)適配關(guān)系提交到百度站長平臺的。

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

【代碼適配應(yīng)用舉例】

代碼適配沒有跳轉(zhuǎn)適配那么多方法，它的實施方法是：原PC站CMS系統(tǒng)升級改造，當(dāng)用戶訪問一條URL時，后臺程序判斷UA，根據(jù)不同UA返回不同的HTML代碼和樣式。此方法無延遲、移動站點維護(hù)成本較低，但局限性也很大：首先你要有開發(fā)能力，其次你的CMS系統(tǒng)能讓你開發(fā)，第三是此類站點不能完全靜態(tài)化。代碼適配非常適合社區(qū)論壇和用戶交互式站點

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

【自適應(yīng)應(yīng)用舉例】
自適應(yīng)是呼聲最高的一個方式，H5越來越普及，自適應(yīng)的站點和頁面也越來越多，甭管是國外的谷歌還是國內(nèi)的百度都承認(rèn)未來站點屬于H5的自適應(yīng)。自適應(yīng)頁面由H5+CSS3+JS判讀不同屏幕寬度展示不同樣式的頁面，PC和移動頁面url和源代碼都相同。之前他有很多名字：頁面自適應(yīng)、響應(yīng)式、H5頁面、寬度變化頁面等，之后我們統(tǒng)一為自適應(yīng)。同樣自適應(yīng)也有自己的優(yōu)缺點：一次編碼多平臺共用，維護(hù)成本低，設(shè)備展示效果一致，用戶地體驗好；但也有缺點，復(fù)雜頁面在做自適應(yīng)時，受手機(jī)屏幕限制很難排版，若隱藏部分內(nèi)容相比獨(dú)立移動手機(jī)站頁面體積大、加載速度和數(shù)據(jù)流量也更大。此類非常適合如知乎、36KR、新聞媒體內(nèi)容頁等功能相對單一的頁面和站點。

四、怎么做好百度移動適配？
鑒于移動化大潮的洶涌和H5頁的炫麗普及，百度針對PC頁與H5頁的跳轉(zhuǎn)適配方式推出了最優(yōu)方案：在pc版網(wǎng)頁上，添加指向?qū)?yīng)移動版網(wǎng)址的特殊鏈接rel="alternate"標(biāo)記，這有助于百度發(fā)現(xiàn)網(wǎng)站的移動版網(wǎng)頁所在的位置；同時在移動版網(wǎng)頁上，添加指向?qū)?yīng)pc版網(wǎng)址的鏈接rel="canonical"標(biāo)記。

例如：
pc版網(wǎng)址：http://www.v-zz.com/wz/zsx.html
移動版網(wǎng)址：http://m.v-zz.com/list.php?tid=19
那么此示例中的注釋如下所示：
在pc版網(wǎng)頁(http://www.v-zz.com/wz/zsx.html) 上，添加：
在移動版網(wǎng)頁(http://m.v-zz.com/list.php?tid=19) 上，所需的注釋應(yīng)為：

強(qiáng)調(diào)：之前的Meta標(biāo)記（mobile agent）會繼續(xù)沿用，但我們推薦使用HTMAL5語言制作的移動頁面使用最新方案進(jìn)行跳轉(zhuǎn)適配，其它如xml語言的移動頁跳轉(zhuǎn)適配，需要繼續(xù)使用之前的meta標(biāo)記方式——

文章名稱：建網(wǎng)站必備知識：網(wǎng)站百度移動適配的方法與代碼
瀏覽地址：http://muchs.cn/news/240121.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、ChatGPT、企業(yè)建站、網(wǎng)頁設(shè)計公司、品牌網(wǎng)站設(shè)計、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)