云上小悟
首页   关于   小悟志   栏目   标签   文章   归档   友链   联系

   云上小悟  +  

HTTP报文头中Vary:User-Agent的作用和配置

网站建设 / by: 麦新杰 / 发布:2015年10月13日 / 193次阅读 / 2条评论
/ 最后修改时间: 2015-12-18 17:25:28

网站建设 / 2015年10月13日 / 193次阅读 /


HTTP报文头中Vary:User-Agent的作用和配置

百度和Google对于网站采用代码适配(Dynamic Serving)制作的移动版网页,都建议在HTTP报文头中使用Vary:User-Agent字段。本文介绍下麦新杰在这方面的经验和总结。

 

什么是代码适配(Dynamic Serving)?

网站移动版网页有3种方式生成:

1, 跳转适配

跳转适配就是采用跟桌面版(PC端)不一样的URL,服务器检测访问者浏览器发出的请求中的UA(User-Agent),然后使用 HTTP 重定向和 Vary HTTP 标头重定向到相应的页面。

2, 响应式页面布局

这种方式的URL是一样的,服务器也不检查访问者浏览器发出的请求中的UA,服务器针对任何访问者返回的内容都保持一致。

3, 代码适配(Dynamic Serving)

这种方式制作的移动版网页,URL跟桌面版一致,但是服务器返回的内容却不一样。服务器会检查访问者浏览器发出的UA,根据不同的UA,返回不同的网页内容,但是URL一样。

响应式页面布局的方式看起来是最简单的,但是要求HTML5代码要写的很漂亮,而且浏览器还要兼容,这个难度对麦新杰来说比较大,响应式布局的网站对于低版本的浏览器的支持也很差。跳转适配需要不一样的URL,比较麻烦。对于WordPress网站来说,也许代码适配是难易程度适中的一个选择。

 

代码适配配置Vary:User-Agent字段对搜索引擎很友好

代码适配(Dynamic Serving)意味着你的网站服务器要根据UA来返回不同版本的内容,比如移动版网页,跟桌面版布局不一样。这就需要在HTTP报文头中配置Vary:User-Agent字段。百度和Google都建议这么做,这样它们的爬虫就能够专门去识别移动版网页的内容。这样做对搜索引擎是非常友好的,有利于排名。

配置Vary:User-Agent字段,让服务器可以根据UA动态响应不同内容

配置Vary:User-Agent字段,让服务器可以根据UA动态响应不同内容

代码适配(Dynamic Serving)配置Vary:User-Agent字段是移动SEO必须要做的功课。

麦新杰觉得代码适配的方法带来的一个好处是保持了URL的一致性。

URL不变,服务器根据不同UA返回不同内容

URL不变,服务器根据不同UA返回不同内容

 

网络缓存带来的问题

现在大多数网站都是用CDN网络来加速网络,实际上就是缓存。CDN网络中的服务器将你的网站页面做个缓存,有访问来的时候,就不到服务器去请求了,CDN网络中的服务器直接就响应了用户的请求。

但是,这里有个问题,在我们的网站每个页面都有两个版本的情况下,CDN网络如何知道缓存那个版本呢?它是无法预测用户是来自移动端,还是来自PC端的。

这个问题的现状是:如果网站使用了Vary:User-Agent字段,CDN网络有可能不会缓存网站的页面。这根CDN网络内部具体实现有关系。

总之,使用Vary:User-Agent字段,不会给用户添乱,最多就是CDN网络不加速了。

 

如何配置Vary:User-Agent字段

注意,如果你的网站是响应式的布局,就不需要配置Vary:User-Agent字段!

1, 在Apache中配置Vary:User-Agent字段

将下面这句话加入网站根目录的.htaccess文件中,或者加入Apache的主配置文件httpd.conf:

 

2, 在WordPress中配置Vary:User-Agent字段

将下面这段代码加入主题的functions.php文件:

 

这段代码的意思就是在wp_headers过滤器中,给发送出去的HTTP报文头增加Vary:User-Agent字段。这个方法比较简单,适合不能自己编辑网站.htaccess文件或者httpd.conf文件的虚拟主机场景。

3, 使用php代码配置Vary:User-Agent字段

将下面代码加入网站代码合适位置:

 

对于WordPress网站,这段代码可以加到在header.php文件中的合适位置。

用php代码的好处是:我们可以区别对待不同的页面,也许你的网站不是所有的页面,都需要设置Vary:User-Agent字段,比如可能你的网站有部分页面是简单的响应式布局。

4, 在Nginx中配置Vary:User-Agent字段

需要Nginx安装ngx_headers_more模块,具体配置如下:

 

最后,如何检查上面的配置是否生效?

麦新杰在这个问题上遇到一个坑,请参考HTTP状态查询遇到的“坑”这篇文章,里面详细说明了如何通过Google浏览器就可以查看HTTP的状态,即可以检查你的Vary:User-Agent配置是否成功。

本文固定链接:http://www.maixj.net/wangzhan/http-vary-user-agent-9017
amazon海外购

“HTTP报文头中Vary:User-Agent的作用和配置”有2条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

  • 外贸SOHO  says:

    这是技术大拿了,来学习,不用端茶打水~   [ 回复 ]

    • 麦新杰  says:

      谈不上大拿,学一点就总结一点。相互学习,欢迎常来。   [ 回复 ]


前一篇:
后一篇:

麦新杰的云上小悟独立博客网站文章内容,除非特别注明,全部都是原创,如需转载,请先阅读版权声明!原创文章更具个性,有些文字虽略显随意,但不影响个人思想表达。部分文章是我自己的笔记,为自己记录,总结和收藏,同时也分享给您!这是本博建设的出发点,希望您喜欢并得到您的支持!喝杯茶,慢慢阅读...

©Copyright 麦新杰 SINCE 2014 云上小悟独立博客版权所有  备案号:苏ICP备14045477号-1  

本站360安全检测  Valid CSS!