重慶網(wǎng)站建設中同時擁有PC端和移動端幾乎成為標配,主域名做PC端,二級域名做移動端,不建議用二級目錄做移動端。移動設備的訪問量與日俱增,移動端SEO優(yōu)化的重要內容:用戶體驗、頁面權重。
所謂的移動適配針對訪問者和蜘蛛:網(wǎng)站根據(jù)訪問者的客戶端信息,判斷是否用JS跳轉到移動端;對蜘蛛就用<meta>或<link>聲明。完整的移動適配是PC和移動端的URL一一對應。下面是秀站網(wǎng)秀站網(wǎng)總結的最全的移動適配部署。
移動端適配相關部署
移動端Title、Description、Keywords(TDK)設置
搜索引擎會首先抓取頁面<title>標簽里面的內容,也是網(wǎng)站展示在搜索引擎里面的主要內容。移動端和PC端的<title>可以一致,最好加上“移動端”以示區(qū)別。
對用戶使用搜索引擎,頁面主標題、描述的與用戶使用的關鍵詞匹配程度高,一般會獲得較多流量,參考文章《SEO優(yōu)化網(wǎng)站建設入門基礎標簽<meta>用法》
<meta http-equiv="keywords" content="關鍵字1,關鍵字2,關鍵字3"> <meta http-equiv="description" content="秀站網(wǎng)秀站網(wǎng)的博客">
網(wǎng)站Title、Description、Keywords(TDK),搜索引擎對Keywords的權重可以忽略,由于在移動端展示時,標題和描述字數(shù)和PC端有一定區(qū)別,參考文章《怎么寫好新站網(wǎng)站標題和描述》。
移動端<link>絕對路徑
PC和移動端采用不同的CSS樣式表,另外由于兩套模板需共用網(wǎng)站根目錄下的favicon.ico圖標等,采用絕對路徑保證正常調用。
<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">
移動端rel="canonical"聲明
為了解決網(wǎng)站由于URL鏈接不一樣,但網(wǎng)頁內容一樣,避免百度重復收錄的問題。
比如:PC端與移動端對應URL分別為
http://www.vi586.com/seo/ http://wap.vi586.com/seo/
在移動端</head>之前,增加如下代碼:
<!--百度移動申明-->
<link rel="canonical" href="http://www.vi586.com/seo/" />
里面的鏈接是告訴搜索引擎,這個鏈接是規(guī)范、正確、希望百度收錄且參與排名的鏈接(網(wǎng)頁權威鏈接)。
需要用rel="canonical"聲明的情況:
①網(wǎng)站進行了改版,將舊的內容搬到新的URL,但沒有做301重定向;
②某些CMS欄目或內容的靜態(tài)鏈接和動態(tài)鏈接內容相同,而且沒有做301重定向;
③移動端和PC端雖然模板不一樣,但是主要內容一樣,避免分散權重。
移動端<meta>聲明
不同的移動設備上瀏覽頁面有可能出現(xiàn)橫向滾動條。增加viewport屬性作用是當前viewport的寬度等于設備的寬度,同時不允許用戶手動縮放。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1;" >
移動端<style>樣式
CSS樣式有三種寫法:
①外部引用
<link rel="stylesheet" type="text/css" href="http://www.vi586.com/css/basic.css" media="screen" >
②頁面內
<style type="text/css"> .p{width:100%;height:auto;margin:0 auto;} </style>
③行內樣式
<p class="p" style="background:#c00;border:1px solid #ccc;">行內樣式寫法</p>
移動端和PC端建議首頁采用②頁面內寫法,其他采用①外部引用寫法,為了讓HTML主體部分代碼簡潔,盡量不采用③行內樣式寫法。
移動端適配PC端相關部署
PC端<meta><link>聲明
適配只針對存在對應關系的頁面,無對應關系的PC頁面無需任何操作。
<meta name="mobile-agent" content="format=xhtml;url=http://wap.vi586.com/seo/">
name="mobile-agent"為更新后的meta聲明,建議使用。原有meta規(guī)則http-equiv="mobile-agent"能夠兼容并繼續(xù)生效,已標注過的無需修改。
橙色部分為移動端對應URL頁面;format有幾種屬性:wml、xhtml、html5,根據(jù)實際情況選用。
在PC端</head>之前,增加如下代碼:
<!--百度移動適配META申明--> <meta name="mobile-agent" content="format=xhtml;url=http://wap.vi586.com/seo/" /> <!--谷歌、雅虎等移動申明--> <link href="http://wap.vi586.com/seo/" rel="alternate" media="only screen and (max-width: 640px)" />
PC端<script>識別訪問設備JS跳轉
腳本標簽,有兩種用法:
①引用
<script type="text/javascript" src="http://www.vi586.com/js/jquery1.42.min.js"></script>
②代碼塊
<script type="text/javascript"> /*代碼塊*/ </script>
一般頭部引用Jquery庫,執(zhí)行順序也是從上至下,要注意順序。
通用JS跳轉到移動端代碼
橙色部分是要跳轉的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/是對應的移動版URL,使用的時候注意順序。建議放在<title>下,不然加載時間就長了。