一、meta标签的含义
二、meta使用说明
- 1. charset
- 2. 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标签的含义

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

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

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

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

<p itemscope><span>马云<meta itemprop content="阿里巴巴前董事长"></span>
</p>

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

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

二、meta使用说明

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

1. charset

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

<meta charset="utf-8">

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

<meta http-equiv="content-type" content="text/html; charset=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舍弃的值仍然是有效的）。它的基本语法如下：

<meta http-equiv="" content="">

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的值是用分号隔开的一组需要启用的安全策略及对应的值，如：

<meta http-equiv="content-security-policy"
content="frame-src https://xxx.xxx.xxx; script-src https://xxx.xxx.xxx">

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

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

(2). content-type

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

(3). default-style

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

<meta http-equiv="default-style" content="preferred stylesheet"><link href='' rel='stylesheet' title='preferred stylesheet'>

(4). x-ua-compatible

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

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

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

<meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">

(5). refresh

定义页面的刷新策略。

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

<!--页面会在20秒后刷新-->
<meta http-equiv="refresh" content="20">
<!--页面会在20秒后跳转到百度-->
<meta http-equiv="refresh" content="20;url=https://www.baidu.com">

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必须取上述值，你可以用它来描述任何你想描述的元信息，比如：

<!-- 一下引自百度 -->
<meta name="theme-color" content="#2932e1">
<meta name="baidu-site-verification" content="15CGsqM7Xb">
<!-- 以下引自淘宝官网 -->
<meta name="spm-id" content="a21bo">
<meta name="aplus-xplug" content="NONE">

(1). application-name

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

(2). author、creator、publisher

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

<meta creator="张三">
<meta creator="李四">

(3). generator

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

(4). keywords

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

<meta name="keywords" content="关键词1, 关键词2">

(5). referrer

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

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

(6). robots

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

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

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

<meta name="robots" content="noindex, follow">

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-scalable	yes或no	是否允许用户缩放页面，默认为yes

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

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

4. content

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

总结

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

meta标签使用手册相关推荐

SEO优化之meta标签
2019独角兽企业重金招聘Python工程师标准>>> meta的标签的使用是我在前端学习中曾经困惑过一段时间的问题.一方面不是很了解meta标签的用途,另一方面是对于meta标签里 ...
【建站系列教程】7、SEO优化之meta标签【最后一篇】
[建站系列教程]7.SEO优化之meta标签[进阶] 写在前面:大家好,我是热爱编程的小泽. [建站系列教程]是我的亲身建站经历写给广大建站同胞们的教学博客. 喜欢的话点个赞吧~ 评论区欢迎交流讨论~ ...
jekyll 博客对搜索引擎的SEO提升方法--head中的meta标签和Jekyll SEO Tag
我用GitHub Pages搭建了jekyll的博客后,想要提升自己博客的SEO,尤其是对搜索引擎:百度.谷歌. head中的meta标签说道提升SEO,必然要提到HTML中的head标签中的met ...
HTML meta标签总结
HTML meta标签总结,HTML5 head meta属性整理-前端开发博客 http://caibaojian.com/mobile-meta.html 转载于:https://www.cnbl ...
html5 meta标签属性整理
html5 meta标签属性整理前言:不知道有没有人觉得,html的meta标签描述的头部信息特别多,有针对的SEO的头部信息,也有针对移动设备的头部信息,今日特地在网上搜集资料自己稍微对其整理一下 ...
移动平台的meta标签-----神奇的功效
对于桌面平台web布局中大家对meta标签再熟悉不过了,它永远位于 head 元素内部,对做SEO的朋友一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究 ...
给html5标签设置手机号码格式化,meta标签name=format-detection属性写法及用法
meta标签中name="format-detection"属性作用是在手机端浏览html网页时,用于识别电话号码.电子邮箱和地图位置的格式! 用法格式: 将代码添加到网页的和之 ...
Asp.net 后台添加CSS、JS、Meta标签
下面是从Asp.net 后台添加CSS.JS.Meta标签的写法,我们这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.U ...
你的网站添加X-UA-Compatible meta标签了吗？
细心的朋友会发现下面的html代码中多了一个<细心的朋友会发现下面的html代码中多了一个<meta http-equiv="X-UA-Compatible" cont ...

meta标签使用手册

目录