手机网站移动端适配设置如何SEO优化

今天下面要讲的是针对有PC站和移动站点的，而且PC站和移动站存在页面对应关系的为最佳。这样的移动适配主要针对蜘蛛，对优化有很大的好处。判断是否用JS跳转到移动端；对蜘蛛就用<meta>或<link>声明。完整的移动适配是PC和移动端的URL一一对应。

移动端适配相关部署

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

    搜索引擎会首先抓取页面<title>标签里面的内容，也是网站展示在搜索引擎里面的主要内容。移动端和PC端的<title>可以一致，最好加上“移动端”以示区别。
对用户使用搜索引擎，页面主标题、描述的与用户使用的关键词匹配程度高，一般会获得较多流量。

<meta http-equiv="keywords" content="关键字1,关键字2,关键字3"><meta http-equiv="description" content="商业源码,网站源码,网站模板,优秀的建站资源尽在361源码网(www.vevb.com)">

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

移动端<link>绝对路径

    一般由于PC和移动端采用不同的CSS样式表，另外由于两套模板需共用网站根目录下的favicon.ico图标等，采用绝对路径保证正常调用。

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

移动端rel="canonical"声明

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

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

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

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

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

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

需要用rel="canonical"声明的情况：
 ①网站进行了改版，将旧的内容搬到新的URL，但没有做301重定向；
 ②某些CMS栏目或内容的静态链接和动态链接内容相同，而且没有做301重定向；
 ③移动端和PC端虽然模板不一样，但是主要内容一样，避免分散权重。

移动端声明

    不同的移动设备上浏览页面有可能出现横向滚动条。增加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.vevb.com/mbzjskin/css/styles.css" media="screen" >

 ②页面内

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

 ③行内样式

<div class="div" style="background:#c00;border:1px solid #ccc;">行内样式写法</div>

移动端和PC端建议首页采用②页面内写法，其他采用①外部引用写法，为了让HTML主体部分代码简洁，尽量不采用③行内样式写法。

移动端适配PC端相关部署

PC端声明

适配只针对存在对应关系的页面，无对应关系的PC页面无需任何操作。

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

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://m.vevb.com/code/" /><!--谷歌、雅虎等移动申明--><link href="http://m.vevb.com/code/" rel="alternate" media="only screen and (max-width: 640px)" />

PC端<script>识别访问设备JS跳转

通过JS识别设备跳转，这边361源码就不累述了，早上关于这个问题已经专门讲解过了，参看文章《JS代码判断客户端是手机访问还是PC电脑访问》。

最好稍微总结一下：如果你不想自己动手设置或者不太会设置处理，可以联系我们的在线客服帮你处理。