关于小悟志网站地图归档友情链接联系Feed

云上小悟 + 

首页 » InfoTech »

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

InfoTech
2015年10月13日 / 1,389次阅读
标签:TCPIP

拍拍贷

文章《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:

Header append Vary User-Agent

 

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

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

function add_vary_header($headers) {
    $headers['Vary'] = 'User-Agent';
    return $headers;
}
add_filter('wp_headers', 'add_vary_header');

 

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

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

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

<?php header("Vary: User-Agent, Accept"); ?>

 

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

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

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

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

more_set_headers -s 200 "Vary: " "Accept-Encoding, User-Agent";

 

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

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

本文链接:http://www.maixj.net/ict/http-vary-user-agent-9017
云上小悟 麦新杰(QQ:1093023102)

相关文章

评论是美德

《HTTP报文头中Vary:User-Agent的作用和配置》有3条评论

无力满足评论实名制,评论对非实名注册用户关闭,有事QQ:1093023102.

  • 响应式的布局对CDN友好,网站维护也简单了一些。 [ ]

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

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


前一篇:
后一篇:

栏目精选


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

网站二维码
拍拍贷
go to top