meta标签使用手册

2024-01-27 22:59| 来源: 网络整理| 查看: 265

目录一、meta标签的含义二、meta使用说明1. charset2. http-equiv(1). content-security-policy(2). content-type(3). default-style(4). x-ua-compatible(5). refresh 3. name(1). application-name(2). author、creator、publisher(3). generator(4). keywords(5). referrer(6). robots(7). viewport 4. content 总结

一、meta标签的含义

是HTML中很常用的标签之一，通常用于描述一些与当前HTML页面有关的元信息。

这里我们先要理解一下什么是元信息。所谓元信息，就是用来描述信息的信息。比如我们通过http发送了一个请求，那么请求主体就是我们的主体信息。而用于描述该信息的那些状态参数，如编码格式、超时时间、消息长度等，就是描述信息用的信息，它们就被称为元信息。

对于一个HTML文档而言也是一样的。用于描述文档的编码格式、关键字、作者等内容的信息，就被称为该文档的元信息，它们由meta标签所定义。元信息不参与渲染，只是一些描述信息。

与元信息对应的是流信息（也就流数据），它是实际需要渲染的网页元素，如body、div、p等元素。在HTML5中，meta标签还可以添加itemprop属性，用于描述用户的某些流内容，此时，它与所描述的流内容一样，也成了流内容。如：

马云

这里的meta标签现在是文档内容的一部分了（这样的数据在HTML5中称为微数据），它不再是元数据，而是流数据。

关于这类用法，本文不会详解，感兴趣的可自行查阅。下面我们就看一下作为元数据使用的标签支持哪些属性。

二、meta使用说明

meta标签总共支持4个全局属性：charset、http-equiv、name和content。

1. charset

charset用于定义文档的编码格式，常见的格式有utf-8、gbk等，如：

中文网页一般多使用utf-8的编码格式。网页的编码格式还有另一种写法：

这是HTTP4.01常见的写法，在HTML5中仍然被支持。

2. http-equiv

在HTML4中，http-equiv支持很多值，它们每个值都对应http响应头的一个字段。服务端会用http-equiv的值来设置响应头（equiv全写是equivalent，含义为“等价”，意指该参数可以等价转化为http响应头字段）。

http-equiv需要结合content属性来使用，以定义一个响应头字段的值。不过在HTML5中，已经不再用这个字段来描述响应头，它所支持的值也缩减为5个（鉴于目前浏览器仍然支持HTML4，因此像expires、cache-control这样被HTML5舍弃的值仍然是有效的）。它的基本语法如下：

HTML5的http-equiv包含以下几个值：

content-security-policy，定义文档的内容安全策略。content-type，定义文档类型，其值必须是"text/html; charset=utf-8"。default-style，设置默认CSS样式表组的名称。x-ua-compatible，兼容性声明，指定所用浏览器的内核，规范要求此时content的值必须包含"IE=edge"。refresh，定义文档的自动刷新策略。 (1). content-security-policy

定义文档的的内容安全策略，主要目的是抵御XSS（cross-site scripting attacks，跨站点脚本攻击）。

此时content的值是用分号隔开的一组需要启用的安全策略及对应的值，如：

这里的content定义了两个安全策略：frame-src和script-src，它们分别定义的是iframe（frame）和script的域地址，如果对应的资源不是来自指定的域，浏览器就会抛出错误，禁止加载这些资源，这样可以有效防止跨站点攻击。

标准定义了约三十个安全策略选项，这里不再一一详述，感兴趣的请参阅mdn开发者文档：Content-Security-Policy。

(2). content-type

在HTML5中被所取代，并且mdn开发者文档中指出，在使用该属性时，对应的值必须是"text/html; charset=utf-8"。

(3). default-style

规定要使用的预定义的样式表。它的值必须与某个link或style标签的title一致，以指定该样式表作为当前文档的默认样式表。如：

(4). x-ua-compatible

指定浏览器所要启用的内核版本。

国内很多浏览器都有多个内核，比如360浏览器的极速模式使用的是谷歌内核，而兼容模式则使用IE内核，另外在兼容模式下，也可以设定不同的IE版本。

下面的标签要求在两种模式下分别启用谷歌和IE的最新版本：

(5). refresh

定义页面的刷新策略。

如果对应的content是一个整数，那么页面会在指定的时间间隔（秒）后重新加载；如果content的值是整数后面跟了;url=xxx，并且这个url是个合法的值，那么浏览器会在指定的秒数后跳转到该地址。如：

3. name

同http-equiv一样，name也需要配合content属性一起使用。与http-equiv不同的是，由name描述的属性与响应头的字段没有对应关系，它们更多的是描述文档本身。

name的常见取值包括：

application-name，定义正运行在该网页上的网络应用名称。author，文档的作者，可以用自由的格式去定义。description，定义页面内容的简短和精确的描述，某些浏览器（如Firefox和Opera）会将其作为书签页的默认描述。generator，生成页面的软件的标识符。keywords，由逗号分隔的页面内容相关的关键词。referrer ，控制所有从该文档发出的 HTTP 请求中HTTP Referer 首部的内容。creator，文档的创建人。googlebot，谷歌专用的爬虫字段。publisher，文档的发布人。robots ，定义搜索引擎或抓取工具的行为。slurp，雅虎专用的抓取工具行为定义。viewport，定义移动端的初始视口大小。

注意，标准没有严格限制name必须取上述值，你可以用它来描述任何你想描述的元信息，比如：

(1). application-name

定义的是当前应用的名称，一般用于帮助浏览器区分不同的网络应用。不同于title，这个属性的值对用户不可见。简单的应用不应该使用这个属性。

(2). author、creator、publisher

分别是当前文档的作者、创建人和发布人，在使用这三个值时，你可以定义多个meta，如：

(3). generator

指明了生成当前页面的软件的标识符，目前暂未用到过，不做详述。

(4). keywords

定义一组与当前网页相关的关键词，主要用于SEO（搜索引擎优化）。它的格式如下：

(5). referrer

控制所有从该文档发出的 HTTP 请求中HTTP Referer 首部的内容。它对应的content值应该是下表中的一个，用于定义不同的行为（表格来自mdn）：

content值作用no-referrer不要发送 HTTP Referer 首部origin发送当前文档的 originno-referrer-when-downgrade当目的地是安全的（https->https），则发送origin作为referrer；如果目的地不安全（https->http），则不发送referrer。这是默认行为。origin-when-crossorigin在同源请求下，发送完整的URL (不含查询参数) 作为referrer；否则仅发送当前文档的 origin作为referrerunsafe-URL在同源请求下，发送完整的URL (不含查询参数)作为referrer；跨域时不发送 (6). robots

该参数定义的是搜索引擎或抓取工具的行为，此时content的应是下列的值（多个值用逗号隔开）：

值说明浏览器支持性index允许搜索引擎对当前页面建立索引ALLnoindex禁止搜索引擎对当前页面建立索引ALLfollow允许搜索引擎爬取当前页面的链接对应的其他页面。比如某个站点的首页包含多个链接，可以链接到站点内的其他页面，这时引擎在爬取首页时，会继续爬取首页指向的那些页面ALLnofollow禁止搜索引擎爬取页面内的链接页面ALLnoodp禁止使用开放式目录（Open Directory Project，详见百度百科 - 开放式目录）Google, Yahoo, Bingnoarchive禁止搜索引擎缓存当前页面的内容Google, Yahoonosnippet禁止搜索引擎在搜索结果页面中保留任何描述Googlenoimageindex禁止搜索引擎将当前页面作为索引图像的引用页Googlenoydir禁止使用雅虎目录，雅虎目录是开放式目录的前驱Yahoonocache等价于noarchive，仅用于BingBing

如希望搜索引擎爬取当前页内包含的链接页面，但不对当前页建立索引：

slurp与robots含义是相同的，但仅用于Slurp – Yahoo Search的抓取工具。

(7). viewport

它提供有关视口初始大小的提示，仅供移动设备使用。此时content的可选值包括：

选项值描述width一个正整数或特殊的字符串‘device-width’值为正整数时，是以像素(px)为单位的页面初始宽度；当为’device-width’时，表示页面初始宽度为设备宽度height一个正整数或者字符串 device-height同上，定义页面初始高度initial-scale一个介于0.0到1.0的正数定义设备宽度与视口宽度的百分比，即视口的缩放比例maximum-scale一个0.0到10.0的正数定义缩放的最大值，当达到这个比值时，用户无法继续放大minimum-scale一个0.0到10.0的正数定义缩放的最小值，当达到这个比值时，用户无法继续缩小。minimum-scale必须小于maximum-scale，否则可能造成无法预知的异常user-scalableyes或no是否允许用户缩放页面，默认为yes

以下是一个移动设备常用的值：

表示初始等于设备宽度，不缩放。

viewport的规范程度虽然不高，但大多数移动浏览器都尊重这一声明，因此具有实际上的统治地位。

4. content

content需要结合http-equiv或name属性使用，上面已经介绍了其用法，这里不再赘述。

总结

meta标签设计的主要目的是让机器（如搜索引擎）更好地理解网页。随着SEO（搜索引擎优化）的盛行，meta的使用也变得越来越重要。此外，HTML5也使用meta描述页面的微数据，meta的价值进一步提高。

【本文地址】

公司简介

联系我们