HTML meta 标签 看这篇就够了 |
您所在的位置:网站首页 › meta用法 › HTML meta 标签 看这篇就够了 |
引言
元素提供有关页面的元信息,放在文档的头部,不包含内容,属性定义了与文档相关的键值对,不会显示在页面上,但对于机器是可读的。 通常情况下,meta 元素被用于规定页面的描述、关键字、文档的作者、最后修改时间等,也会包含 header 头中的一部分信息。 下面就说说 meta 的常用用法。 header 头最常见的一个 meta 标签可能就是了,读者可能会有疑问了,这里的 charset 和 header 头中的有什么关系?类似的还有很多,比如设置缓存、cookie等,当然除了 charset 之外的很少用到,有些也已经慢慢移除了,比如当使用Set-Cookie的时候,chrome 会给出警告信息。 经过试验,发现,当 meta 和 header 头中同时设置一个内容的时候,header 头中的会覆盖 meta 中的信息优先使用。 比如有 index.html 文件,编码格式为 GBK: 中文乱码吗直接拖到浏览器打开,会乱码,通过服务器访问,并设置 header 头信息 res.setHeader('Content-Type', 'text/html; '),正常显示。 referrer 信息在谷歌首页源码中发现了,这个 meta 是用来设置 Referrer Policy 的,设置是否带 referer、什么情况带 referer,怎么带 referer。 referrer 有如下取值 no-referrer 请求的时候,不带 referer 请求头 no-referrer-when-downgrade 这个是默认策略,整个 URL(origin、path、queryString) 都会作为 referrer 发送,但当安全协议降级,比如从 https -> http 的时候,不会发送。 origin 只发送 URL 中的 origin 信息,比如网址为https://example.com/page.html,请求头中为referer: https://example.com/。 origin-when-cross-origin 同源请求,发送整个 URL,跨域时候和 origin 的情况一样。 same-origin 仅同源情况发送 referer strict-origin 类似 origin,但协议不能降级,比如从http://a.com请求http://b.com或者https://...会携带 referer。 strict-origin-when-cross-origin 与 origin-when-cross-origin 类似,但协议不能降级。 unsafe-url 任何情况都发送完整的 URL。 这个测试也很简单,在本地启动一个服务器,然后请求下面的网页,让网页里面去请求内容,查看请求头即可,比如这里,页面加载后悔请求 a.png 这张图片,设置不同的 referrer 属性,携带的 referer 头信息不一样。 tips,有没有发现,在 meta 标签中使用的是referrer,http 请求头里面用的是 referer?后者不是个单词,当时在制定 RFC 的时候,拼写错了,发现的时候已经晚了,已经被大量使用,因此 HTTP 标准决定继续使用这个错误拼写,一直沿用到现在。所以在使用的时候也要注意,拼写有的时候是正确的,有的时候是错误的。 IE 渲染模式上面这个也是碰到比较多的一个 meta 标签了,天猫、淘宝、京东、百度首页源码都有类似的标签(部分没有,chrome=1)。 这个 meta 标签是用来设置浏览器的兼容性模式的,是 IE8 新加的一个属性,对于 < IE8 的浏览器是不识别的,也是 IE 内核特有的属性,其他内核浏览器不认识。 content 中的内容IE=edge,chrome=1,其中IE=edge告诉浏览器,以当前浏览器最高版本 IE 来进行渲染;chrome=1告诉浏览器,如果安装了 Google Chrome Frame插件(GCF),则保持 IE 外观的模式下,使用 chrome 内核进行渲染,这里注意,该插件支持 IE6 ~ IE9,这里读者朋友可能会有疑惑了,不是 < IE8 的浏览器不支持当前小节的属性吗,那怎么使用呢?其实也很简单,在网址前面加上gcf:即可,比如gcf:https://baidu.com。 除此之外还有一个用于设置360浏览器渲染模式的设置,常用来启用360浏览器、QQ浏览器的极速模式(Chrome 内核),类似的还有一个,让其他双核浏览器切换为极速模式。 视窗设置上面的标签一般在移动端中使用,width=device-width 设置网页的宽度(viewport)和设备的宽度一样,这样横向就不会出现滚动条,用户浏览体验会大幅提升;后面的几个设置不允许用户手动缩放。 电话检测下面是天猫首页的设置,用来禁止自动识别电话、日期、地址,电话可能大家都遇到过,ios 上面,自动将一串数字加了链接,点击会进行拨号,加入下面第一个禁止即可。 The Open Graph Protocol(开放图谱协议)在天猫首页的源码中发现了下面的内容: 这种好像比较少见,但隐隐觉得肯定有用,查了下,果然,他叫 Open Graph Protocol,是 Facebook 制订的一个社交网络分享协议,有了上面的内容,分享之后会带上更多的信息、展示图片等,让分享的内容更吸引人。打开facebook,然后发布,输入链接,有property="og:..."属性的话,会自动生成类似下面的内容: 天猫 京东 可以看到,如果没有设置 Open Graph Protocol 的话,facebook会自动获取标题和 meta 中的 description 信息展示,也没有图片展示。其实这个就像微信分享时候自定义的标题、链接、图片等一样,不过这个是不需要调用js,直接分享即可被Facebook等网站识别。可以从这里查看网站对 Open Graph Protocol 的支持情况。 robots SEO在 google 的首页源码中发现了标签,根据 robots 猜测跟搜索引擎爬取机器人有关。查阅资料后,果然,跟搜索引擎爬虫有关,用来做SEO用的。 meta robots 可以取如下的值 index 允许将该网页录入搜索引擎索引。 follow 允许搜索引擎抓取当前页面上所有的链接。 noindex 禁止将该网页录入搜索引擎索引。 nofollow 禁止搜索引擎抓取当前页面上的链接。 noarchive 在搜索结果中不保存当前页面的快照 all 相当于index, follow,此值是默认值。 noodp 不使用开放目录中的网页摘要描述。 noydir 不使用雅虎分类目录中的网页摘要。 最后两个可能不是很好理解,noodp 是 NO Open Directory Project 的缩写,noydir 是 NO Yahoo Directory 的缩写。他两是类似的,都是可以让大家录入网站、摘要,记录网站的信息,两个区别:前者是开放的,大家都可以维护,后者是提交之后审核生效,可以看这里。 有些网站会设置开放目录中的信息,导致搜索引擎展示开放目录中设置的信息,和网站的现有信息不匹配,通过 noodp、noydir 禁止搜索引擎使用开放目录上的信息,使用网站页面的现有信息。 最后两个在国内使用的不多。 公众号 广告西安菊场大量招聘java、python开发工程师,云计算部门,负责openstack、桌面云等相关工作 手机(微信):17089797386 邮箱:[email protected] |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |