终极讲解移动端适配设置与SEO优化

       重庆网站建设中同时拥有PC端和移动端几乎成为标配，主域名做PC端，二级域名做移动端，不建议用二级目录做移动端。移动设备的访问量与日俱增，移动端SEO优化的重要内容：用户体验、页面权重。

       所谓的移动适配针对访问者和蜘蛛：网站根据访问者的客户端信息，判断是否用JS跳转到移动端；对蜘蛛就用<meta>或<link>声明。完整的移动适配是PC和移动端的URL一一对应。下面是秀站网秀站网总结的最全的移动适配部署。

移动端适配相关部署

移动端Title、Description、Keywords(TDK)设置

       搜索引擎会首先抓取页面<title>标签里面的内容，也是网站展示在搜索引擎里面的主要内容。移动端和PC端的<title>可以一致，最好加上“移动端”以示区别。

       对用户使用搜索引擎，页面主标题、描述的与用户使用的关键词匹配程度高，一般会获得较多流量，参考文章《SEO优化网站建设入门基础标签<meta>用法》

<meta http-equiv="keywords" content="关键字1,关键字2,关键字3">
<meta http-equiv="description" content="秀站网秀站网的博客">

       网站Title、Description、Keywords(TDK)，搜索引擎对Keywords的权重可以忽略，由于在移动端展示时，标题和描述字数和PC端有一定区别，参考文章《怎么写好新站网站标题和描述》。

移动端<link>绝对路径

       PC和移动端采用不同的CSS样式表，另外由于两套模板需共用网站根目录下的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"声明

       为了解决网站由于URL链接不一样，但网页内容一样，避免百度重复收录的问题。

       比如：PC端与移动端对应URL分别为

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

       在移动端</head>之前，增加如下代码：

<!--百度移动申明-->
<link rel="canonical" href="http://www.vi586.com/seo/" />

       里面的链接是告诉搜索引擎，这个链接是规范、正确、希望百度收录且参与排名的链接（网页权威链接）。

需要用rel="canonical"声明的情况：

①网站进行了改版，将旧的内容搬到新的URL，但没有做301重定向；

②某些CMS栏目或内容的静态链接和动态链接内容相同，而且没有做301重定向；

③移动端和PC端虽然模板不一样，但是主要内容一样，避免分散权重。

移动端<meta>声明

       不同的移动设备上浏览页面有可能出现横向滚动条。增加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规则http-equiv="mobile-agent"能够兼容并继续生效，已标注过的无需修改。

       橙色部分为移动端对应URL页面；format有几种属性：wml、xhtml、html5，根据实际情况选用。

       在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库，执行顺序也是从上至下，要注意顺序。

通用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>下，不然加载时间就长了。