Meta 标签

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

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

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

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

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

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

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

# 使用说明

meta 标签总共支持4个全局属性:charset, http-equiv, name, content

# 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 中仍然被支持。

# http-equiv

在 HTML4 中,http-equiv 支持很多值,它们每个值都对应 http 响应头的一个字段。服务端会用 http-equiv 的值来设置响应头。

equiv 全写是 equivalent,含义为「等价」,意指该参数可以等价转化为 http 响应头字段

http-equiv 需要结合 content 属性来使用,以定义一个响应头字段的值。不过在 HTML5 中,已经不再用这个字段来描述响应头,它所支持的值也缩减为 5 个(鉴于目前浏览器仍然支持 HTML4,因此像 expirescache-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: 定义文档的自动刷新策略。

# 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-srcscript-src,它们分别定义的是 iframe(frame)和 script 的域地址,如果对应的资源不是来自指定的域,浏览器就会抛出错误,禁止加载这些资源,这样可以有效防止跨站点攻击。

标准定义了约三十个安全策略选项,这里不再一一详述,感兴趣的请参阅 MDN 开发者文档:Content-Security-Policy (opens new window)

# content-type

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

<meta http-equiv='content-type' content="text/html; charset=utf-8">

# default-style

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

<meta http-equiv="default-style" content="preferred stylesheet">

<link href='' rel='stylesheet' title='preferred stylesheet'>

# x-ua-compatible

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

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

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

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

# 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">

# 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">

# application-name

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

# author、creator、publisher

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

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

# generator

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

# keywords

定义一组与当前网页相关的关键词,主要用于SEO(搜索引擎优化)。它的格式如下:

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

# 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;跨域时不发送

# robots

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

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

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

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

# slurp

slurprobots 含义是相同的,但仅用于 Slurp – Yahoo Search 的抓取工具。

# 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 yesno 是否允许用户缩放页面,默认为 yes

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

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

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

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

# content

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

# Meta 实例

<!-- 定义文档的字符编码 -->
<meta charset="utf-8" />

<!-- 强制Chromium内核,作用于360浏览器、QQ浏览器等国产双核浏览器 -->
<meta name="renderer" content="webkit"/>

<!-- 强制Chromium内核,作用于其他双核浏览器 -->
<meta name="force-rendering" content="webkit"/>

<!-- 如果有安装 Google Chrome Frame 插件则强制为Chromium内核,否则强制本机支持的最高版本IE内核,作用于IE浏览器 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>

<!--
    设置视窗大小
    width    设置layout viewport  的宽度,为一个正整数,或字符串"width-device"
    initial-scale    设置页面的初始缩放值,为一个数字,可以带小数
    minimum-scale    允许用户的最小缩放值,为一个数字,可以带小数
    maximum-scale    允许用户的最大缩放值,为一个数字,可以带小数
    shrink-to-fit=no IOS9中要想前面的属性起作用需要加上这个
    height    设置layout viewport  的高度,这个属性对我们并不重要,很少使用
    user-scalable    是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

<!-- 页面描述 -->
<meta name="description" content="不超过150个字符"/>

<!-- 页面关键词 -->
<meta name="keywords" content=""/>

<!-- 网页作者 -->
<meta name="author" content="name, email@gmail.com"/>

<!--
    搜索引擎抓取
    all:文件将被检索,且页面上的链接可以被查询;
    none:文件将不被检索,且页面上的链接不可以被查询;
    index:文件将被检索;
    follow:页面上的链接可以被查询;
    noindex:文件将不被检索;
    nofollow:页面上的链接不可以被查询。
-->
<meta name="robots" content="index,follow"/>

<!-- 忽略页面中的数字识别为电话,忽略email识别-->
<meta name="format-detection" content="telphone=no, email=no"/>


<!-- IOS begin -->
<!-- 添加到主屏后的标题(iOS 6 新增) -->
<meta name="apple-mobile-web-app-title" content="标题">

<!-- 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari (ios7.0版本以后,safari上已看不到效果) -->
<meta name="apple-mobile-web-app-capable" content="yes"/>

<!-- 是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-touch-fullscreen" content="yes"/>

<!-- 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari) -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

<!-- 设置苹果工具栏颜色:默认值为 default(白色),可以定为 black(黑色)和 black-translucent(灰色半透明) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- IOS end -->


<!-- 不让百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />

<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">

<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">

<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">

<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">

<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">

<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">

<!-- UC应用模式 -->
<meta name="browsermode" content="application">

<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">

<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">


<!--
    iOS 图标 begin
    网站添加至 iOS 桌面时的图标
-->
<!-- iPhone 和 iTouch,默认 57x57 像素,必须有 -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="table_ico57.png">

<!-- Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="table_ico72.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="table_ico114.png">

<!-- Retina iPad,144x144 像素,可以没有,但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="table_ico144.png">
<!-- iOS 图标 end -->


<!-- iOS 启动画面 begin -->
<!-- iPad 竖屏 768 x 1004(标准分辨率) -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>

<!-- iPad 横屏 1024x748(标准分辨率) -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>

<!-- iPad 竖屏 1536x2008(Retina) -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>

<!-- iPad 横屏 2048x1496(Retina) -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>

<!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>

<!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>

<!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
<!-- IOS 启动画面 end -->


<!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileColor" content="#000"/>

<!-- Windows 8 磁贴图标 -->
<meta name="msapplication-TileImage" content="icon.png"/>

<!-- 添加 RSS 订阅 -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>


<!-- sns 社交标签 begin -->
<!--
这个标签是一个 Open Graph(OG)标签,最早由 Facebook 提出。此处需注意的是,
meta 标签通常使用 name 属性,但 OG 采用了非标准的 property 属性

Open Graph: https://baike.baidu.com/item/Open%20Graph/309599
-->
<meta property="og:type" content="类型" />
<meta property="og:url" content="URL地址" />
<meta property="og:title" content="标题" />
<meta property="og:image" content="图片" />
<meta property="og:description" content="描述" />
<!-- sns 社交标签 end -->
上次更新: 2022/11/26 10:08:40