今天下面要講的是針對(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)。
搜索引擎會(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)化》
一般由于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">
為了解決網(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)設(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;" >
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ě)法。
適配只針對(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)" />
通過(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)系我們的在線客服幫你處理。
以上就是手機(jī)網(wǎng)站移動(dòng)端適配設(shè)置如何SEO優(yōu)化的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)和解決疑問(wèn)有所幫助,也希望大家多多支持武林網(wǎng)。新聞熱點(diǎn)
疑難解答
圖片精選