HTML meta标签

453 阅读4分钟

元数据(Metadata)

元数据(Metadata),简单来说就是描述数据的数据。例如,一个 HTML 文件是一种数据,但 HTML 文件也能在 <head> 元素中包含描述该文档的元数据,比如该文档的作者和概要。MDN

HTML <meta>标签(元素)

HTML <meta> 元素表示那些不能由其它 HTML 元相关元素(<base><link><script><style><title>)之一表示的任何元数据信息。元数据不会显示在客户端,但是会被浏览器解析。

HTML <meta>标签的作用

  • 搜索引擎优化(SEO)
  • 定义页面使用语言
  • 自动刷新并指向新页面
  • 实现网页转化时的动态效果
  • 控制页面缓存
  • 网页定级评价
  • 控制网页显示的窗口等

HTML <meta>标签在 HTML4.01 与 HTML5 之间的差异

在 HTML5 中,有一个新的属性 charset ,它使字符集的定义更加简洁:

  • HTML4.01:<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  • HTML5:<meta charset="UTF-8">

HTML <meta> 标签属性

属性描述
charsetcharacter_set定义文档的字符集(如:UTF-8、ISO-8859-1)
contenttext定义与 name 或 http-equiv 属性相关的元信息
nameapplication-name、author、description、generator、keywords ...定义一个 HTML 文档的描述、关键词、作者
http-equivcontent-security-policy、content-type、default-style、x-ua-compatible、refresh ...把 content 属性关联到 HTTP 头部
schemeformat/URIHTML5不支持。定义用于翻译 content 属性值的格式

说明content属性是与 namehttp-equiv属性一起使用的, namehttp-equiv 定义属性名,content 定义属性值。

HTML <meta> name 属性

HTML 规范定义了以下标准元数据名称

  • application-name: 网页中所运行的应该程序的名称
  • author:文档作者的名称
  • description:一段简短而精确的、对页面内容的描述。一些浏览器,比如 Firefox 和 Opera,将其用作书签的默认描述。
  • generator:生成此页面的软件的标识符(identifier)。
  • keywords:与页面内容相关的关键词,使用逗号分隔。
  • referrer:控制由当前文档发出的请求的 HTTP Referer 请求头。

CSS 颜色调整规范定义了以下元数据名称

  • color-scheme:指定与当前文档兼容的一种或多种配色方案。

CSS 设备适配规范定义了以下元数据名称

  • viewport:为视口的初始大小提供指示。目前仅用于移动设备。

其他元数据名称

  • creator:当前文档的创建者。
  • googlebotrobots 的替代名称,只被 Googlebot(Google 的网页爬虫/索引搜寻器)使用。
  • publisher:当前文档的发布者/出版者。
  • robots:爬虫、协作搜寻器,或者“机器人”,对此页面的处理行为,或者说,应当遵守的规则。

HTML <meta> http-equiv 属性

http-equiv属性定义了一个编译器指令。这个属性叫做 http-equiv 是因为所有允许的值都是特定 HTTP 头部的名称,如下:

  • content-security-policy: 它允许页面作者定义当前页的内容策略。内容策略主要指定允许的服务器源和脚本端点,这有助于防止跨站点脚本攻击。
  • content-type:规定文档的字符编码。如果使用这个属性,其值必须是"text/html; charset=utf-8"。
  • default-style:设置默认CSS样式表的名称。
  • x-ua-compatible:如果指定,则 content 属性必须具有值 "IE=edge"。用户代理必须忽略此指示。
  • refresh:定义重新载入页面的时间间隔(秒)或是重定向到指定链接的时间间隔。

其他元数据名称

没在 MDN 看到有说明,不知道是否还有效...

  • expires:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。
  • Pragma:是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出。
  • set-cookie: 设置cookie。如果网页过期,那么存盘的cookie将被删除。
  • Window-target:显示窗口的设定。强制页面在当前窗口以独立页面显示,用来防止别人在框架里调用自己的页面。
  • Pics-label: 网页等级评定。
  • Page_Enter:设定进入页面时的特殊效果
  • Page_Exit:设定离开页面时的特殊效果

示例:

<!-- 强制浏览器的渲染方式,默认使用chrome来渲染,然后再按照IE该浏览器的最新版本来渲染 -->
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />