HTML meta 标签看这篇就够了

时间 2020-03-23

标签 html meta 标签看这够了栏目 HTML 繁體版

原文原文链接

引言

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

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

下面就说说 meta 的经常使用用法。java

header 头

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

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

好比有 index.html 文件，编码格式为 GBK：web

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

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

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-origin 与 origin-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 禁止搜索引擎使用开放目录上的信息，使用网站页面的现有信息。

最后两个在国内使用的很少。

HTML meta 标签看这篇就够了

引言

header 头

referrer 信息

IE 渲染模式

视窗设置

电话检测

The Open Graph Protocol（开放图谱协议）

robots SEO

公众号

广告

HTML meta 标签 看这篇就够了

引言

header 头

referrer 信息

IE 渲染模式

视窗设置

电话检测

The Open Graph Protocol（开放图谱协议）

robots SEO

公众号

广告

HTML meta 标签看这篇就够了