今天下面要講的是針對(duì)有PC站和移動(dòng)站點(diǎn)的，而且PC站和移動(dòng)站存在頁(yè)面對(duì)應(yīng)關(guān)系的為最佳。這樣的移動(dòng)適配主要針對(duì)蜘蛛，對(duì)優(yōu)化有很大的好處。判斷是否用JS跳轉(zhuǎn)到移動(dòng)端；對(duì)蜘蛛就用<meta>或<link>聲明。完整的移動(dòng)適配是PC和移動(dòng)端的URL一一對(duì)應(yī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ì)獲得較多流量。

<meta http-equiv="keywords" content="關(guān)鍵字1,關(guān)鍵字2,關(guān)鍵字3"><meta http-equiv="description" content="商業(yè)源碼,網(wǎng)站源碼,網(wǎng)站模板,優(yōu)秀的建站資源盡在361源碼網(wǎng)(m.survivalescaperooms.com)">

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

移動(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://m.survivalescaperooms.com/mbzjskin/css/styles.css" media="screen" ><link rel="shortcut icon" type="image/ico" href="http://m.survivalescaperooms.com/mbzjskin//favicon.ico">

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

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

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

http://m.survivalescaperooms.com/code/ http://m.vevb.com/code/

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

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

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

需要用rel="canonical"聲明的情況：
 ①網(wǎng)站進(jìn)行了改版，將舊的內(nèi)容搬到新的URL，但沒(méi)有做301重定向；
 ②某些CMS欄目或內(nèi)容的靜態(tài)鏈接和動(dòng)態(tài)鏈接內(nèi)容相同，而且沒(méi)有做301重定向；
 ③移動(dòng)端和PC端雖然模板不一樣，但是主要內(nèi)容一樣，避免分散權(quán)重。

移動(dòng)端聲明

    不同的移動(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樣式有三種寫(xiě)法：
 ①外部引用

<link rel="stylesheet" type="text/css" href="http://m.survivalescaperooms.com/mbzjskin/css/styles.css" media="screen" >

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

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

 ③行內(nèi)樣式

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

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

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

PC端聲明

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

<meta name="mobile-agent" content="format=xhtml;url=http://m.vevb.com/code/">

name="mobile-agent"為更新后的meta聲明，建議使用。原有meta規(guī)則http-equiv="mobile-agent"能夠兼容并繼續(xù)生效，已標(biāo)注過(guò)的無(wú)需修改。
橙色部分為移動(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://m.vevb.com/code/" /><!--谷歌、雅虎等移動(dòng)申明--><link href="http://m.vevb.com/code/" rel="alternate" media="only screen and (max-width: 640px)" />

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

通過(guò)JS識(shí)別設(shè)備跳轉(zhuǎn)，這邊361源碼就不累述了，早上關(guān)于這個(gè)問(wèn)題已經(jīng)專(zhuān)門(mén)講解過(guò)了，參看文章《JS代碼判斷客戶端是手機(jī)訪問(wèn)還是PC電腦訪問(wèn)》。

最好稍微總結(jié)一下：如果你不想自己動(dòng)手設(shè)置或者不太會(huì)設(shè)置處理，可以聯(lián)系我們的在線客服幫你處理。