当前位置 : 主页 > SEO实战 > 正文

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

原创

重庆seo2016-12-30 00:06:00阅读()seo优化站内优化手机端A+ / A-

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

移动适配于SEO优化

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

移动端适配相关部署

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

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

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

<meta http-equiv="keywords" content="关键字1,关键字2,关键字3">
<meta http-equiv="description" content="重庆SEO吖七的博客">

       网站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">
.div{width:100%;height:auto;margin:0 auto;}
</style>

③行内样式

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

       移动端和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>下,不然加载时间就长了。

    扩展阅读

    本文地址:https://www.vi586.com/case/348.html
    版权声明:原创文章,版权归重庆SEO吖七所有,欢迎分享本文,支持原创,转载请保留出处

    赞(7)