HTML meta 标签 看这篇就够了

发表于 2020-03-19 17:58:23

引言

<meta> 元素提供有关页面的元信息,放在文档的头部,不包含内容,属性定义了与文档相关的键值对,不会显示在页面上,但对于机器是可读的。

通常情况下,meta 元素被用于规定页面的描述、关键字、文档的作者、最后修改时间等,也会包含 header 头中的一部分信息。

下面就说说 meta 的常用用法。

header 头

最常见的一个 meta 标签可能就是<meta charset="UTF-8">了,读者可能会有疑问了,这里的 charset 和 header 头中的有什么关系?类似的还有很多,比如设置缓存、cookie等,当然除了 charset 之外的很少用到,有些也已经慢慢移除了,比如当使用Set-Cookie的时候,chrome 会给出警告信息。

经过试验,发现,当 meta 和 header 头中同时设置一个内容的时候,header 头中的会覆盖 meta 中的信息优先使用。

比如有 index.html 文件,编码格式为 GBK:

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        中文乱码吗
    </body>
</html>

直接拖到浏览器打开,会乱码,通过服务器访问,并设置 header 头信息 res.setHeader('Content-Type', 'text/html; charset=GBK'),正常显示。

referrer 信息

在谷歌首页源码中发现了<meta content="origin" name="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-originorigin-when-cross-origin 类似,但协议不能降级。

unsafe-url 任何情况都发送完整的 URL。

这个测试也很简单,在本地启动一个服务器,然后请求下面的网页,让网页里面去请求内容,查看请求头即可,比如这里,页面加载后悔请求 a.png 这张图片,设置不同的 referrer 属性,携带的 referer 头信息不一样。

<html>
    <head>
        <meta charset="UTF-8">
        <meta content="origin" name="referrer">
    </head>
    <body>
        <img src="a.png">
    </body>
</html>
tips,有没有发现,在 meta 标签中使用的是referrer,http 请求头里面用的是 referer?后者不是个单词,当时在制定 RFC 的时候,拼写错了,发现的时候已经晚了,已经被大量使用,因此 HTTP 标准决定继续使用这个错误拼写,一直沿用到现在。所以在使用的时候也要注意,拼写有的时候是正确的,有的时候是错误的。

IE 渲染模式

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

上面这个也是碰到比较多的一个 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浏览器渲染模式的设置,常用<meta name="renderer" content="webkit">来启用360浏览器、QQ浏览器的极速模式(Chrome 内核),类似的还有一个<meta name="force-rendering" content="webkit"/>,让其他双核浏览器切换为极速模式。

视窗设置

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

上面的标签一般在移动端中使用,width=device-width 设置网页的宽度(viewport)和设备的宽度一样,这样横向就不会出现滚动条,用户浏览体验会大幅提升;后面的几个设置不允许用户手动缩放。

电话检测

<meta name="format-detection" ...>

下面是天猫首页的设置,用来禁止自动识别电话、日期、地址,电话可能大家都遇到过,ios 上面,自动将一串数字加了链接,点击会进行拨号,加入下面第一个禁止即可。

<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="address=no">

The Open Graph Protocol(开放图谱协议)

在天猫首页的源码中发现了下面的内容:

<meta property="og:title" content="天猫">
<meta property="og:type" content="website">
<meta property="og:url" content=" https://www.tmall.com/">
<meta property="og:image" content=" https://img.alicdn.com/tfs/TB1MaLKRXXXXXaWXFXXXXXXXXXX-480-260.png">

这种好像比较少见,但隐隐觉得肯定有用,查了下,果然,他叫 Open Graph Protocol,是 Facebook 制订的一个社交网络分享协议,有了上面的内容,分享之后会带上更多的信息、展示图片等,让分享的内容更吸引人。打开facebook,然后发布,输入链接,有property="og:..."属性的话,会自动生成类似下面的内容:

天猫
天猫
京东
京东

可以看到,如果没有设置 Open Graph Protocol 的话,facebook会自动获取标题和 meta 中的 description 信息展示,也没有图片展示。其实这个就像微信分享时候自定义的标题、链接、图片等一样,不过这个是不需要调用js,直接分享即可被Facebook等网站识别。可以从这里查看网站对 Open Graph Protocol 的支持情况。

robots SEO

在 google 的首页源码中发现了<meta content="noodp" name="robots">标签,根据 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
邮箱:ritoyan@163.com

添加邮件订阅

接受新文章推送

Avatar of Author

JellyBool

记录工作和生活 Kebox.cn