樟树代码建站:关于移动网页的不同适配的问题

南昌莫非网络科技公司
2019-09-16
来源:南昌莫非网络科技公司

樟树代码建站:关于移动网页的不同适配的问题

今天来谈谈几种不同的移动网页适配方式分别有哪些需要注意的点,希望能帮到对这方面知识有需求的朋友。


1、跳转适配


1)meta标注,生效速度第二快的方法。在页面head中增加一行meta标注,来告知百度前页面对应的移动版页面的URL是什么以及采用的声明语言,格式如下


使用format可以告知百度指定移动页面采用的是什么语言(现在一般都是用HTML5) .URL的值为对应版本页面的URL地址,如果网页有多个版本,此标注也可以写多行。


2)提交适配关系,生效速度最快的方法。在百度站长平台的“移动适配”工具中主动提交适配关系,站长平台支持规则适配和URL适配。对于PC版和移动版URL有一定应关系的站点可以采用规则适配;如果较难使用正则表达式匹配两版URL之间的的对应关系,则可以使用"URL适配”。通过此工具,百度可以较快地发现网站的移动适配关系,从而加快适配处理的速度。这也是移动适配生效的最快方式。具体工具的使用,参见百度站长平台的官方工具介绍文档。建议大家在设计移动站点URL时,尽可能地保证移动内容在和PC内容一一对应的同时, URL也可以有一定规则的一一对应。深圳网站制作公司


3)另外建议大家在PC版网页上,添加指向对应移动版网址的特殊链接rel="alternate"标记,这有助于百度发现网站的移动版网页;在移动版网页上,添加指向对应PC版网址的链接rel="canonical"标记。


4)自主适配,生效速度最慢的方法。使用301或302跳转,不要使用JS判断UA再跳转由于客户端会先加载网页然后再解析Js,所以如果使用JS判断UA,用户则会感觉较强的顿挫感;同样蜘蛛需要渲染JS之后才能获取信息,也会加大搜索引擎蜘蛛的抓取难度。深圳网站制作公司


建议大家把以上工作全部做好,以促进适配关系的快速、稳定生效。不过切记适配关系的一致性,不要有冲突,且多个版本网页中的主体内容要一致,否则可能会造成适配失败。


5)在页面head中使用meta标签声明当前页面是PC页还是移动页。


如果是PC页则使用


如果是移动页则使用


2. 代码适配


1)为了使百度能够知道当页面发生变化时,同时需要用其他的UA重新抓取一遍,需要添加Vary HTTP标头,如"Vary: Accept-Encoding, User-Agent" . Vary HTTP标头具有以下两个非常重要且实用的作用。


它会向ISP和其他位置使用的缓存服务器表明:在决定是否通过缓存来提供网页时它们应考虑用户代理。如果没有使用Vary HTTP标头,缓存可能会错误地向移动设备用户提供PC版HTML网页的缓存(反之亦然)


它有助于百度Spider更快速地发现针对移动设备进行优化的内容,这是因为百度在抓取针对移动内容进行过优化的网址时,会将有效的Vary HTTP标头作为抓取信号之一,百度会提高用其他UA抓取此网页的优先级。


2)在给用户返回的代码中使用meta标注所返回的代码为PC版还是移动版:


如果是PC版则使用<meta name="applicable-device" content="pc""


如果是移动版则使用


3,响应式


1)?在页面head中使用meta标签声明当前页面适合同时在PC和移动设备上浏览:


2)在head中添加以下代码并且使用元素处理自适应图片:


<meta name="viewport" content="width-device-width, initial-scale-1.0"


    技术在于更多的交流,网站建设公司南昌莫非传媒给大家分享,有不对之处欢迎交流指正。


分享