介绍

<meta> 元素用来表示不能由其它 HTML 元相关（meta-related）元素（(<base>、<link>、<script>、<style> 或 <title>）之一表示的数据信息，元素标签内不包含任何内容。

具有不同属性的多个 <meta> 元素可以在同一页面上使用。<meta> 元素内容不会显示在页面上，但是对于机器是可读的，可用于模拟 HTTP 响应头字段的使用，页面描述、关键字用于搜索引擎优化，或其他 web 服务。

属性

<meta> 标签的属性定义了与文档相关联的名称/值对，元数据总是以名称/值的形式被成对传递的。

对于 HTML 4.01 和 XHTML 1.0，有四个有效的属性：content、http-equiv、name 和 scheme。在 HTML 5 下，现在有五个有效的属性，添加了 charset。http-equiv 用于模拟 HTTP 标题，并用 name 来嵌入元数据。无论哪种情况，语句的值都包含在 content 属性中，除非给出 charset，否则这是唯一必需的属性。

<meta> 标签通常位于 <head> 区域内，但在 HTML5 中不再需要 <head> 标签。

属性 值 描述
charset character_set 规定 HTML 文档的字符编码。
content text 定义与 http-equiv 或 name 属性相关的元信息。
http-equiv content-security-policy
content-type
default-style
refresh		 把 content 属性关联到 HTTP 头部。
name application-name
author
description
generator
keywords
viewport		 把 content 属性关联到一个名称。
scheme format/URI 定义用于翻译 content 属性值的格式。

name 属性

name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。

keywords 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。

类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助：

<meta name="keywords" content="HTML,ASP,PHP,SQL">

如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。

http-equiv 属性

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：

<meta http-equiv="expires" content="31 Dec 2008">

这样发送到浏览器的头部就应该包含：

content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008

当然，只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。

content 属性

content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。

content 属性始终要和 name 属性或 http-equiv 属性一起使用。

scheme 属性

scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义。

HTML 4.01 与 HTML5之间的差异

在 HTML5 中，有一个新的 charset 属性，它使字符集的定义更加容易：

  • HTML 4.01：<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  • HTML5：<meta charset="UTF-8">

示例

  1. 定义创作者和修改信息：
<meta name="author" content="Chris Mills">

<meta name="revised" content="David Yang,8/1/07">
  1. 定义文档关键词和页面描述，用于搜索引擎：
<meta name="description" content="HTML examples">

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
  1. 下面示例演示 3 秒后，重定向到另外一个地址，如果 url 为空则会刷新当前网页：
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
  1. 在文档级别上设置浅色模式与深色模式的工作方式与 CSS color-scheme 属性允许单个元素指定其首选和接受的配色方案相同：
<meta name="color-scheme" content="dark light">
  1. 为当前页面定义内容策略，例如，已经存在的一个网站，用了太多内联代码修复问题，而且想确保资源（如图片、字体、脚本等）只从 https 加载，并且禁止插件：
<meta http-equiv="Content-Security-Policy" content="default-src https: 'unsafe-eval' 'unsafe-inline'; object-src 'none'">
  1. 微前端需要按功能拆分多个子应用，主应用在加载的过程中经常出现加载失败的问题。因为 https 地址中，如果加载了 http 资源，浏览器将认为这是不安全的资源，将会默认阻止。后来在文档中添加了以下 <meta> 标签完美解决：
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  1. 禁止浏览器从本地机的缓存中调阅页面内容，设定后，一旦离开网页就无法从 Cache 中再调出：
<meta http-equiv="Pragma" content="no-cache">
  1. 定义搜索引擎机器人(不包括恶意爬虫)对此页面的处理行为：
<meta name="robots" content="index,follow">
  • index：允许机器人索引此页面（默认）。
  • follow：允许机器人跟随此页面上的链接（默认）。
  • noindex：要求机器人不索引此页面。
  • nofollow：要求机器人不跟随此页面上的链接。
  • all：与 index, follow 相同。
  • none：与 noindex, nofollow 相同。
  • noarchive：要求搜索引擎不缓存页面内容。
  • nocache：noarchive 的替代名称。
  • nosnippet：防止在搜索引擎结果中显示页面的任何描述。
  • noimageindex：要求此页面不显示为图片索引的引用页面。
  1. 典型的移动优化网站会设置 <meta> 标签视口宽度等于屏幕宽度，这样可以避免当视口宽度大于屏幕宽度时，出现横向滚动条：
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta> 标签的 viewport 的属性包括：

  • width：视口的宽度，可以设置为特殊值 device-width，数字（1-10000），或 100vw, 100% 这样的有效值。负值：忽略。
  • height：视口的高度，可以设置为特殊值 device-height，数字（1-10000），或 100vh, 100% 这样的有效值。负值：忽略。
  • initial-scale：控制第一次加载页面时的缩放级别。最小值：0.1。最大值：10。默认值：1。负值：忽略。
  • minimum-scale：控制页面上允许的缩小程度。最小值：0.1。最大值：10。默认值：0.1。负值：忽略。
  • maximum-scale：控制页面上允许的放大程度。最小值：0.1。最大值：10。默认值：10。负值：忽略。
  • user-scalable：控制页面上是否允许放大和缩小操作。有效值：0、1、yes 或 no。默认值：1，与 yes 相同。将该值设置为 0（与否相同），将违反 Web 内容可访问性指南 (WCAG)。

引用资料

  1. meta标签到底是做什么的
  2. HTML <meta> 标签