请选择 进入手机版 | 继续访问电脑版

巅峰霸主

 找回密码
 立即注册

QQ登录

只需一步,快速开始

[技术分享] 百度移动适配移动站和PC站及自适应需要添加的meta标签代码

  [复制链接] [添加相关主题]
烈火大地 发表于 2019-7-10 10:38:54 | 显示全部楼层 |阅读模式
阿里云服务器2折起!

游客只能显示部分内容,请登录后查看帖子完整内容!!!注册完全免费。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
百度移动适配除了在百度站长后台提交适配规则,我们还需要在网站的每个页面上添加相关适配meta代码,百度站长后台提交适配规则可能生效会慢一些,为了能更好的适配成功,百度也支持在网站的模板中添加meta代码来引导蜘蛛识别该网页是移动页面还是PC页面,并且是否需要转码等,所以在移动适配的过程中我们最好要做好移动适配跳转。
1,跳转适配
  跳转适配主要是针对PC和移动有独立的页面且网址不一样的情况,在此配置中,每个pc版网址都具有一个对应的不同网址,用于提供针对移动设备进行优化的内容。为了帮助我们的算法了解单独的移动版网址,我们建议您使用以下注释:
在pc版网页上,添加指向对应移动版网址的特殊链接 rel="alternate" 标记。这有助于发现网站的移动版网页所在的位置。
在移动版网页上,添加指向对应pc版网址的链接 rel="canonical" 标记。

例如,假设pc版网址为http://www.example.com/page-1,且对应的移动版网址为 http://m.example.com/page-1,那么此示例中的注释如下所示:

在pc版网页(http://www.example.com/page-1) 上,添加:
  
  1. <link rel="alternate" media="only screen and (max-width: 640px)"     href="http://m.example.com/page-1" >
复制代码


而在移动版网页(http://m.example.com/page-1) 上,所需的注释应为:
  
  1. <link rel="canonical"href="http://www.example.com/page-1" >
复制代码


2,代码适配

  为了使百度能够知道当您的页面发生变化时,同时需要用其他的ua重新抓取一遍,请您添加Vary HTTP标头。Vary HTTP 标头具有以下两个非常重要且实用的作用:
  a)        它会向 ISP 和其他位置使用的缓存服务器表明:在决定是否通过缓存来提供网页时它们应考虑用户代理。如果您没有使用 Vary HTTP 标头,缓存可能会错误地向移动设备用户提供pc版 HTML 网页的缓存(反之亦然)。
  b)        它有助于 百度spdier 更快速地发现针对移动设备进行优化的内容,这是因为我们在抓取针对移动内容进行过优化的网址时,会将有效的 Vary HTTP 标头作为抓取信号之一,我们会提高用其他ua抓取此网页的优先级。

示例:
012571433221866.jpg

  并且在pc的响应的head中添加
  
  1. <meta name="applicable-device" content="pc">
复制代码

  在移动的响应的head中添加
  
  1. <meta name="applicable-device" content="mobile">
复制代码


3,自适应
  自适应设计有其一般原则:在head添加以下代码并且使用<picture>元素处理自适应图片:
  
  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制代码


自适应页面还应该在head中标识:
  
  1. <meta name="applicable-device"content="pc,mobile">
复制代码

  表示页面同时适合在移动设备和PC上进行浏览。



关于移动配置,百度不建议的做法
  1,单一域名下请使用同一种配置方式(跳转适配、代码适配、自适应),例如,不要把移动站的页面作为pc站网址中的一个子目录来配置。

  2,如果使用跳转适配的方式,请不要使用JS对ua进行适配跳转。这种方式存在两个缺点:
  a)        对用户:会加大由重定向的客户端造成的延迟;这是因为客户端需要先下载网页,接着解析并执行 JavaScript,然后才能触发重定向。301或302则不会有这个延迟。
  b)        对搜索:爬虫也需要使用支持JS渲染的爬虫,才能发现此重定向。


                               
登录/注册后可看大图



百度移动适配实战

1.跳转适配,当前应该说99%都是网址跳转适配,有单独的手机和PC页面且网址不一样时,写法如下。
PC和移动网址不一样的跳转适配,我们通常这样写meta标签,如下,在PC页面的meta中添加如下代码,举例:
移动网址:http://m.example.com/293.html
PC网址:http://www.example.com/293.html

那么在PC端页面(http://www.example.com/293.html)添加如下meta标签:
  1. <meta name="applicable-device" content="pc" /> <!--说明该页面只适合于在PC上浏览-->
  2. <meta http-equiv="Cache-Control" content="no-transform" /> <!--禁止转码-->
  3. <meta http-equiv="mobile-agent" content="format=html5; url=http://m.example.com/293.html" /> <!--老版百度适配,也适用于神马-->
  4. <meta http-equiv="mobile-agent" content="format=xhtml; url=http://m.example.com/293.html" /> <!--老版百度适配,也适用于神马-->
  5. <link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/293.html" /><!--如果是手机访问就跳转到移动网址页面,alternate标签是百度特有-->
复制代码
在移动端页面(http://m.example.com/293.html)需要添加以下meta标签代码:
  1. <meta name="applicable-device" content="mobile" /> <!--说明本页面是手机移动页面-->
  2. <link rel="canonical" href="http://www.example.com/293.html" /> <!--不论PC还是移动访问都把PC端的网址作为最重要的,跳转需要单独写哦,注意canonical标签是权威的意思。-->
复制代码

2.自适应移动适配,自适应也就是说PC和移动的网址是一样的,通过过户使用的设备来选择如何显示页面内容,比如某张图片使用PC浏览器访问就显示,使用手机访问则隐藏,但是不论是手机还是PC访问,这个网址的页面源代码都是完全一样的,此时我们只需要添加适配meta为:
  1. <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--可不加-->
  2. <meta name="applicable-device"content="pc,mobile">
复制代码
viewport这个标签可以不加,但是为了保险起见建议加上,原因是viewport是自适应页面的象征性规则,html5的标志性移动支持。
做好以上的工作算是可以告诉蜘蛛我们的网站页面哪些是PC哪些是移动页面,哪个是权威的;万里长征第一步而已,针对移动和PC网址不一样的情况,要想完美的适配,还需要在百度站长后台提交适配规则双管齐下才是最好的。






上一篇:百度对应自适应和代码适配及跳转适配的定义和说明
下一篇:临时关闭网站不影响SEO优化不掉排名和收录的方法
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|巅峰霸主 ( 京ICP备12023415号-2 )

声明:本站的任何信息和内容仅代表作者的立场和观点,与巅峰霸主网无关。

禁止在巅峰霸主网发布任何与《中华人民共和国法律》相抵触的言论!

GMT+8, 2019-11-12 22:13 , Processed in 0.095289 second(s), 28 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表