由于智能手机的全面普及,现在几乎是人人一部,因而移动端流量显得特别的庞大,而pc端流量渐渐没落,行业之间pc端相差移动的流量可能达到10倍甚至20被的差距,因此移动端的流量我们是不能忽视的。在SEO中亦是如此,目前都是以移动流量为主,pc为辅的时代了。
由于搜索引擎蜘蛛程序以pc端为主导的,因此我们需要从pc来引导蜘蛛抓取和发现移动网页,这就需要我们做好两端的适配关系,让搜索引擎更好的认识我们的pc站与移动站内容之间的关系,从而给与移动站更好的评价,利于优化排名。
因此我们需要布局我们的pc站与移动站,并清楚的表达两者之间的对应关系。
网站的三种适配方式
目前PC站与移动站比较流行的配置方式有三种,分别为:跳转适配,代码适配,自适应适配。
1、跳转适配:通过网址检测出不同的使用终端/设备,从而提供不同的代码,展示不同的网页。如使用终端是电脑则展示pc站,如使用终端是手机则展示移动站,并使用HTTP重定向和Vary HTTP标头重定向到相应的页面。
2、代码适配:该方法使用相同的网址(不考虑用户所使用的设备),但会根据服务器对用户所用浏览器的了解(ua),针对不同设备类型生成不同版本的 HTML。
3、自适应:pc站与移动站的网页代码是一样的,但css可能使用的是两套,该方法不考虑用户所使用的设备(pc、平板电脑、移动设备),但可以根据使用终端尺寸的不同来展现pc站或移动站。
三种适配方式的区别
跳转适配:pc站与移动站特点是,两端网址不同,html页面也不同,pc一般为www.xx.com,移动一般为m.xx.com。
代码适配:两端网址相同,html页面不同,由于移动端屏幕小,内容板块少,因此部分pc板块会被隐藏。
自适应:两端网址相同,html大致相同,内容及板块基本一致。
PC、移动网址是否一致 | PC、移动网页代码是否一致 | |
跳转适配 | 否 | 否 |
代码适配 | 是 | 否 |
自适应 | 是 | 是 |
pc与移动对应适配的三种配置方式建议
1、跳转适配
跳转适配是通过网址检测出不同的使用终端/设备,从而提供不同的代码,展示不同的网页及url。也就是说每个pc版页面的网址都对应有一个不同的移动网址。
因此为了帮助百度的算法快速了解我们的移动网站,以及快速抓取到移动网页,建议站长使用以下注释:
在pc版网页上,添加指向对应移动版网址的特殊链接rel="alternate" 标记,这有助于发现网站的移动版网页所在的位置。
在移动版网页上,添加指向对应pc版网址的链接rel="canonical" 标记。
例:
pc网址:http://www.xx.com/123.html
对应移动网址:http://m.xx.com/123.html
代码如下:
在pc版当前(http://www.xx.com/123.html)网页上,添加:
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.xx.com/123.html" >
在移动端当前(http://m.xx.com/123.html) 网页上,添加:
<link rel="canonical" href="http://www.xx.com/123.html" >
说明:当前例子可以看出来是文章,我们可在pc和移动网站的内容页模板顶部添加这串代码,采用调用的方式,即可完成所有文章页面的代码添加,其他页面类似。在百度搜索资源平台站点管理左侧,有直接移动适配的功能,大家也可以采用这个方法进行适配。
2、代码适配
代码适配的网站两端的网址是一样的,但移动端与pc端展现的不同版本的html,也就是说css使用的是两套。为了使百度能够知道当您的页面发生变化时,同时需要用其他的ua重新抓取一遍,请您添加Vary HTTP标头。Vary HTTP 标头具有以下两个非常重要且实用的作用:
a) 它会向ISP和其他位置使用的缓存服务器表明:在决定是否通过缓存来提供网页时它们应考虑用户代理。如果您没有使用Vary HTTP标头,缓存可能会错误地向移动设备用户提供pc版HTML网页的缓存(反之亦然)。
b) 它有助于百度spdier更快速地发现针对移动设备进行优化的内容,这是因为我们在抓取针对移动内容进行过优化的网址时,会将有效的Vary HTTP标头作为抓取信号之一,我们会提高用其他ua抓取此网页的优先级。
示例:
在pc网站上所有网页顶部响应的head中添加:
<meta name="applicable-device" content="pc">
在移动站所有网页的顶部响应的head中添加:
<meta name="applicable-device" content="mobile">
3、自适应适配
自适应网站两端网址是一样的,通过判断用户使用终端的屏幕大小而自动适应,使其换个客户端仍然有一个良好的浏览体验,适配比较简单,:
此类站点需要在head添加以下代码并且使用<picture>元素处理自适应图片:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
(目前我发现很多网站并没有这个操作)
在自适应网站的所有页面的head中标识,还应加如下代码提示:
<meta name="applicable-device"content="pc,mobile">
表示页面同时适合在移动设备和PC上进行浏览。
关于移动配置,百度不建议的做法
1,单一域名下请使用同一种配置方式(跳转适配、代码适配、自适应),例如,不要把移动站的页面作为pc站网址中的一个子目录来配置。
2,如果使用跳转适配的方式,请不要使用JS对ua进行适配跳转。这种方式存在两个缺点:
a) 对用户:会加大由重定向的客户端造成的延迟;这是因为客户端需要先下载网页,接着解析并执行 JavaScript,然后才能触发重定向。301或302则不会有这个延迟。
b) 对搜索:爬虫也需要使用支持JS渲染的爬虫,才能发现此重定向。
为了更好的优化移动端网站,适配是一定要做好的,这有助于同步大部分pc与移动端的排名位置,让pc端有排名的词汇在移动端也能得到展现(反之亦然),SEO手册小编建议各位站长一定要注意本文这个优化细节点,不要觉得麻烦就不去操作。