最前端

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 标签总共支持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，因此像 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: 定义文档的自动刷新策略。

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

规定要使用的预定义的样式表。它的值必须与某个 link 或 style 标签的 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

slurp 与 robots 含义是相同的，但仅用于 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 yes 或 no 是否允许用户缩放页面，默认为 yes

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

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

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

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

# content

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

# 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 -->
上次更新: 2024/4/15 02:28:03