简介

元数据就是描述数据的数据， <meta>标签是为一个文档在<head>标签中添加元数据的方式。

<meta>中的内容不会显示在页面上，常用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将告诉浏览器如何布局或重载页面，以及被搜索引擎和其它网络服务所使用。

淘宝网首页的meta标签：

1
2
3
4
5
6
7
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="spm-id" content="a21bo">
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！">
<meta name="aplus-xplug" content="NONE">
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">

属性

charset属性

charset声明当前文档所使用的字符编码，但该声明可以被任何一个元素的 lang 特性的值覆盖。

标准不要求必须使用某些特定的字符编码，但建议使用UTF-8，不正确的使用方式可能会导致网站的安全问题

1
<meta charset="UTF-8">

name属性

name属性主要用于描述网页，比如网页的关键词，叙述等。与之对应的属性值为content，content中的内容是对name填入类型的具体描述，便于搜索引擎抓取。

如果设置了itemprop, http-equiv或charset，就不能在设置这个属性了

1
<meta name="参数" content="具体的描述">

其中name属性共有以下几种参数：

  • author

    这个文档的作者名称，可以用自由的格式去定义

    1
    <meta name="author" content="tfcx-th">

  • keywords

    用于告诉搜索引擎网页的关键字，关键字用逗号分隔

    1
    <meta name="keyword" content="淘宝,网上购物,...,店铺">

  • description

    其中包含页面内容的简短和精确的描述。 一些浏览器将其用作书签页面的默认描述

    1
    <meta name="description" content="淘宝网...享受网上购物乐趣">

  • robots

    robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow,默认是all

    1. none: 搜索引擎将忽略此网页，等价于noindex，nofollow。
    2. noindex: 搜索引擎不索引此网页。
    3. nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
    4. all: 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。
    5. index: 搜索引擎索引此网页。
    6. follow: 搜索引擎继续通过此网页的链接索引搜索其它的网页。

  • generator

    包含生成页面的软件的标识符

  • referrer

    控制所有从该文档发出的HTTP请求中HTTP Referer首部的内容，可取的值参考

value 解释
no-referrer 不要发送 HTTP Referer 首部。
origin 发送当前文档的 origin。
no-referrer-when-downgrade 当目的地是先验安全的(https->https)则发送 origin 作为 referrer ，但是当目的地是较不安全的 (https->http)时则不发送 referrer 。这个是默认的行为
origin-when-crossorigin 在同源请求下，发送完整的URL (不含查询参数) ，其他情况下则仅发送当前文档的 origin
unsafe-URL 在同源请求下，发送完整的URL (不含查询参数)

  • renderer

    用于指定双核浏览器默认以何种方式渲染页面

    1
    2
    3
    <meta name="renderer" content="webkit">        //默认webkit内核
    <meta name="renderer" content="ie-comp">       //默认IE兼容模式
    <meta name="renderer" content="ie-stand">      //默认IE标准模式

  • copyright

    用于标注版权信息

  • viewport

    提供有关视口初始大小的提示，仅供移动设备使用

value 可能值 描述
width 一个正整数或者字符串device-width 以pixels为单位，定义viewport的宽度
height 一个正整数或者字符串device-height 以pixels为单位，定义viewport的高度
initial-scale 一个0.0到10.0之间的正数 定义设备宽度（纵向模式下的设备宽度或横向模式下的设备高度）与视口大小之间的缩放比率
maximum-scale 一个0.0到10.0之间的正数 定义缩放的最大值；它必须大于或等于minimum-scale的值，不然会导致不确定的行为发生
minimum-scale 一个0.0到10.0之间的正数 定义缩放的最小值；它必须小于或等于maximum-scale的值，不然会导致不确定的行为发生
user-scalable 一个布尔值（yes或者no） 如果设置为no，用户将不能放大或缩小网页。默认值为yes

http-equiv属性

所有允许的值都是特定http头的名称

1
<meta http-equiv="参数" content="具体的描述">

  • content-security-policy 内容安全策略

    它允许页面作者定义当前页的内容策略。 内容策略主要指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。

  • X-UA-Compatible

    用于告知浏览器以何种版本来渲染页面。（一般都设置为最新模式，在各大框架中这个设置也很常见。）

    1
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

  • content-type使用charset代替，content-language使用lang代替