重慶網(wǎng)站建設(shè)中同時(shí)擁有PC端和移動(dòng)端幾乎成為標(biāo)配，主域名做PC端，二級(jí)域名做移動(dòng)端，不建議用二級(jí)目錄做移動(dòng)端。移動(dòng)設(shè)備的訪問量與日俱增，移動(dòng)端SEO優(yōu)化的重要內(nèi)容：用戶體驗(yàn)、頁(yè)面權(quán)重。

       所謂的移動(dòng)適配針對(duì)訪問者和蜘蛛：網(wǎng)站根據(jù)訪問者的客戶端信息，判斷是否用JS跳轉(zhuǎn)到移動(dòng)端；對(duì)蜘蛛就用<meta>或<link>聲明。完整的移動(dòng)適配是PC和移動(dòng)端的URL一一對(duì)應(yīng)。下面是秀站網(wǎng)秀站網(wǎng)總結(jié)的最全的移動(dòng)適配部署。

移動(dòng)端適配相關(guān)部署

移動(dòng)端Title、Description、Keywords(TDK)設(shè)置

       搜索引擎會(huì)首先抓取頁(yè)面<title>標(biāo)簽里面的內(nèi)容，也是網(wǎng)站展示在搜索引擎里面的主要內(nèi)容。移動(dòng)端和PC端的<title>可以一致，最好加上“移動(dòng)端”以示區(qū)別。

       對(duì)用戶使用搜索引擎，頁(yè)面主標(biāo)題、描述的與用戶使用的關(guān)鍵詞匹配程度高，一般會(huì)獲得較多流量，參考文章《SEO優(yōu)化網(wǎng)站建設(shè)入門基礎(chǔ)標(biāo)簽<meta>用法》

<meta http-equiv="keywords" content="關(guān)鍵字1,關(guān)鍵字2,關(guān)鍵字3">
<meta http-equiv="description" content="秀站網(wǎng)秀站網(wǎng)的博客">

       網(wǎng)站Title、Description、Keywords(TDK)，搜索引擎對(duì)Keywords的權(quán)重可以忽略，由于在移動(dòng)端展示時(shí)，標(biāo)題和描述字?jǐn)?shù)和PC端有一定區(qū)別，參考文章《怎么寫好新站網(wǎng)站標(biāo)題和描述》。

移動(dòng)端<link>絕對(duì)路徑

       PC和移動(dòng)端采用不同的CSS樣式表，另外由于兩套模板需共用網(wǎng)站根目錄下的favicon.ico圖標(biāo)等，采用絕對(duì)路徑保證正常調(diào)用。

<link rel="stylesheet" type="text/css" href="http://www.vi586.com/css/basic.css" media="screen" >
<link rel="shortcut icon" type="image/ico" href="http://www.vi586.com/favicon.ico">

移動(dòng)端rel="canonical"聲明

       為了解決網(wǎng)站由于URL鏈接不一樣，但網(wǎng)頁(yè)內(nèi)容一樣，避免百度重復(fù)收錄的問題。

       比如：PC端與移動(dòng)端對(duì)應(yīng)URL分別為

http://www.vi586.com/seo/ 
http://wap.vi586.com/seo/

       在移動(dòng)端</head>之前，增加如下代碼：

<!--百度移動(dòng)申明-->
<link rel="canonical" href="http://www.vi586.com/seo/" />

       里面的鏈接是告訴搜索引擎，這個(gè)鏈接是規(guī)范、正確、希望百度收錄且參與排名的鏈接（網(wǎng)頁(yè)權(quán)威鏈接）。

需要用rel="canonical"聲明的情況：

①網(wǎng)站進(jìn)行了改版，將舊的內(nèi)容搬到新的URL，但沒有做301重定向；

②某些CMS欄目或內(nèi)容的靜態(tài)鏈接和動(dòng)態(tài)鏈接內(nèi)容相同，而且沒有做301重定向；

③移動(dòng)端和PC端雖然模板不一樣，但是主要內(nèi)容一樣，避免分散權(quán)重。

移動(dòng)端<meta>聲明

       不同的移動(dòng)設(shè)備上瀏覽頁(yè)面有可能出現(xiàn)橫向滾動(dòng)條。增加viewport屬性作用是當(dāng)前viewport的寬度等于設(shè)備的寬度，同時(shí)不允許用戶手動(dòng)縮放。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1;" >

移動(dòng)端<style>樣式

       CSS樣式有三種寫法：

①外部引用

<link rel="stylesheet" type="text/css" href="http://www.vi586.com/css/basic.css" media="screen" >

②頁(yè)面內(nèi)

<style type="text/css">
.p{width:100%;height:auto;margin:0 auto;}
</style>

③行內(nèi)樣式

<p class="p" style="background:#c00;border:1px solid #ccc;">行內(nèi)樣式寫法</p>

       移動(dòng)端和PC端建議首頁(yè)采用②頁(yè)面內(nèi)寫法，其他采用①外部引用寫法，為了讓HTML主體部分代碼簡(jiǎn)潔，盡量不采用③行內(nèi)樣式寫法。

移動(dòng)端適配PC端相關(guān)部署

PC端<meta><link>聲明

       適配只針對(duì)存在對(duì)應(yīng)關(guān)系的頁(yè)面，無對(duì)應(yīng)關(guān)系的PC頁(yè)面無需任何操作。

<meta name="mobile-agent" content="format=xhtml;url=http://wap.vi586.com/seo/">

       name="mobile-agent"為更新后的meta聲明，建議使用。原有meta規(guī)則http-equiv="mobile-agent"能夠兼容并繼續(xù)生效，已標(biāo)注過的無需修改。

       橙色部分為移動(dòng)端對(duì)應(yīng)URL頁(yè)面；format有幾種屬性：wml、xhtml、html5，根據(jù)實(shí)際情況選用。

       在PC端</head>之前，增加如下代碼：

<!--百度移動(dòng)適配META申明-->
<meta name="mobile-agent" content="format=xhtml;url=http://wap.vi586.com/seo/" />
<!--谷歌、雅虎等移動(dòng)申明-->
<link href="http://wap.vi586.com/seo/" rel="alternate" media="only screen and (max-width: 640px)" />

PC端<script>識(shí)別訪問設(shè)備JS跳轉(zhuǎn)

       腳本標(biāo)簽，有兩種用法：

①引用

<script type="text/javascript" src="http://www.vi586.com/js/jquery1.42.min.js"></script>

②代碼塊

<script type="text/javascript">
/*代碼塊*/
</script>

       一般頭部引用Jquery庫(kù)，執(zhí)行順序也是從上至下，要注意順序。

通用JS跳轉(zhuǎn)到移動(dòng)端代碼

       橙色部分是要跳轉(zhuǎn)的URL地址。把代碼塊腳本放在<title>之前。

<script type="text/javascript">if(window.location.toString().indexOf('pref=padindex') != -1){}else{if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(window.location.href.indexOf("?mobile")<0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){window.location.href="http://wap.vi586.com/seo/";}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}</script>

siteapp的uaredirect.js

<script src="http://siteapp.baidu.com/static/webappservice/uaredirect.js" type="text/javascript"></script>
<script type="text/javascript">uaredirect("http://wap.vi586.com/seo/","http://www.vi586.com/seo/");</script>

       注意：http://www.vi586.com/seo/是PC版URL，http://wap.vi586.com/seo/是對(duì)應(yīng)的移動(dòng)版URL，使用的時(shí)候注意順序。建議放在<title>下，不然加載時(shí)間就長(zhǎng)了。