[重要]关于pc站与移动网站的几种适配优化设置方法

作者:SEO手册 阅读量:

由于智能手机的全面普及,现在几乎是人人一部,因而移动端流量显得特别的庞大,而pc端流量渐渐没落,行业之间pc端相差移动的流量可能达到10倍甚至20被的差距,因此移动端的流量我们是不能忽视的。在SEO中亦是如此,目前都是以移动流量为主,pc为辅的时代了。

由于搜索引擎蜘蛛程序以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手册小编建议各位站长一定要注意本文这个优化细节点,不要觉得麻烦就不去操作。

版权声明:

1、本文由作者-SEO手册原创发布,保留著作所有权,转载请注明来源,否则谢绝转载;

2、非原创内容会有明确作者及来源标注,我们尊重大家的原创,如有侵权请联系站长处理。