在文档结构部分，您了解了几乎总能在 HTML 文档的 <head> 中找到的组件。虽然 <head> 中的所有内容（包括 <title>、<link>、<script>、<style> 和较少使用的 <base>）实际上都是“元数据”，但有一个 <meta> 标记用于无法通过这些其他元素表示的元数据。
规范包括几种元类型，还有许多其他应用程序支持的元类型未包含在任何官方规范中。在本节中，我们将讨论规范中包含的属性和值、一些常见的 meta 名称和内容值，以及一些对于搜索引擎优化、社交媒体发布和用户体验非常有用，但未由 WHATWG 或 W3C 正式定义的元类型。
必需的 <meta> 标记，重新审视
让我们重新审视已介绍的两个必要的 <meta> 标记——字符集声明和 视口 meta 标记——并在此过程中更好地理解 <meta> 标记。
<meta> 元素的 charset 属性的出现方式很独特。最初，字符集元数据编写为 <meta http-equiv="Content-Type" content="text/html; charset=<characterset>" />，但由于许多开发者将 content 属性错误地键入为 content="text/html" charset="<characterset>"，浏览器开始支持 charset 作为属性。现在，它在 HTML Living Standard 中被标准化为 <meta charset="<charset>" />，其中，对于 HTML，<charset> 是不区分大小写的字符串 "utf-8" 。
您可能已经注意到，原始字符集 meta 声明过去常常包含 http-equiv 属性。这是 “http-equivalent” 的缩写，因为 meta 标记基本上是在复制可以在 HTTP 标头中设置的内容。除了 charset 异常之外，WHATWG HTML 规范中定义的所有其他 meta 标记都包含 http-equiv 或 name 属性。
官方定义的 meta 标记
meta 标记主要有两种类型：pragma 指令（带有 http-equiv 属性，就像字符集 meta 标记过去使用的那样）和命名 meta 类型（就像我们在文档结构部分讨论的带有 name 属性的视口 meta 标记）。name 和 http-equiv meta 类型都必须包含 content 属性，该属性定义了列出的元数据类型的内容。
Pragma 指令
http-equiv 属性的值是一个 pragma 指令。这些指令描述了应如何解析页面。当您无法直接设置 HTTP 标头时，受支持的 http-equiv 值允许设置指令。
规范定义了七个 pragma 指令，其中大多数指令都有其他设置方法。例如，虽然您可以包含一个语言指令，如 <meta http-equiv="content-language" content="en-us" />，但我们已经讨论过在 HTML 元素上使用 lang 属性，这才是应该使用的。
最常见的 pragma 指令是 refresh 指令。
<meta http-equiv="refresh" content="60; https://machinelearningworkshop.com/regTimeout" />
虽然您可以设置一个指令以在 content 属性中设置的秒数间隔刷新，甚至重定向到不同的 URL，但这并不可取。在没有用户明确请求的情况下刷新和重定向内容会降低可用性，并对无障碍功能产生负面影响。您是否讨厌当您正在阅读段落中间时页面重置？想象一下，如果患有认知或视力障碍，并且发生这种情况。如果您要设置带有重定向的刷新，请确保用户有足够的时间阅读页面，提供一个加快该过程的链接，并且在适当的情况下，提供一个“停止计时”按钮以防止重定向发生。
我们不会在我们的网站中包含此项，因为除了惹恼访问者之外，没有理由让用户会话超时。
最有用的 pragma 指令是 content-security-policy，它允许为当前文档定义内容策略。内容策略主要指定允许的服务器来源和脚本端点，这有助于防范跨站脚本攻击。
<meta http-equiv="content-security-policy" content="default-src https:" />
如果您无权更改 HTTP 标头（或者如果您有权更改），则此处列出了 content-security-policy 指令的空格分隔内容值。
命名 meta 标记
通常，您会包含命名元数据。包括 name 属性，属性值是元数据的名称。与 pragma 指令一样，content 属性是必需的。
name 属性是元数据的名称。除了 viewport 之外，您可能还需要包括 description 和 theme-color，但不包括 keywords。
关键词
搜索引擎优化骗子滥用 keywords meta 标记，用逗号分隔的垃圾词列表填充它们，而不是相关关键词列表，因此搜索引擎不再认为此元数据有用。无需浪费时间、精力和字节来添加它。
描述
但是，description 值对于 SEO 很有用：description 内容值通常是搜索引擎在搜索结果中页面标题下方显示的内容。一些浏览器（如 Firefox 和 Opera）将其用作书签页面的默认描述。描述应该是页面内容的简短而准确的摘要。
<meta name="description"
content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
如果您不理解我们描述的后半部分，您可能没有看过电影《超级名模》。
Robots
如果您不希望搜索引擎索引您的网站，您可以告知它们。<meta name="robots" content="noindex, nofollow" /> 告诉机器人不要索引该网站，也不要跟踪任何链接。机器人应该听取请求，但没有法律要求它们必须听取请求。您无需包含 <meta name="robots" content="index, follow" /> 来请求索引网站和跟踪链接，因为除非 HTTP 标头另有说明，否则这是默认设置。
<meta name="robots" content="index, follow" />
主题颜色
theme-color 值允许您定义一种颜色来自定义浏览器界面。content 属性上的颜色值将由支持的浏览器和操作系统使用，从而为您提供一个建议的颜色，供支持为标题栏、选项卡栏或其他 Chrome 组件着色的用户代理使用。此 meta 标记对于渐进式 Web 应用尤其有用。但是，如果您包含清单文件（PWA 需要清单文件），则可以在其中包含主题颜色。但是，在 HTML 中定义主题颜色可确保立即找到该颜色，在渲染之前，这可能比等待清单文件更快地进行首次加载。
要将主题颜色设置为我们网站背景颜色的蓝色调，请包含
<meta name="theme-color" content="#226DAA" />
主题颜色 meta 标记可以包含 media 属性，从而可以根据媒体查询设置不同的主题颜色。media 属性只能包含在此 meta 标记中，而在所有其他 meta 标记中均被忽略。
还有其他几个 name meta 值，但我们讨论的那些是最常见的。除了为不同的媒体查询声明不同的 theme-color 值之外，每个 meta 标记仅包含一个。如果您确实需要包含多种类型的 meta 标记来支持旧版浏览器，则旧版值应在新值之后，因为用户代理会读取连续的规则，直到找到匹配项。
Open Graph
Open Graph 和类似的 meta 标记协议可用于控制社交媒体网站（如 Twitter、LinkedIn 和 Facebook）如何显示指向您内容的链接。如果未包含，社交媒体网站将正确抓取您页面的标题和 description meta 标记中的描述，与搜索引擎将呈现的信息相同，但您可以有意设置您希望用户在链接发布到您的网站时看到的内容。
当您在 Facebook 或 Twitter 上发布指向 MachineLearningWorkshop.com 或 web.dev 的链接时，将出现一张带有图像、网站标题和网站描述的卡片。整个卡片是指向您提供的 URL 的超链接。
Open Graph meta 标记各有两个属性：property 属性（而不是 name 属性）以及该属性的内容或值。property 属性未在官方规范中定义，但受到支持 Open Graph 协议的应用程序的广泛支持。创建像 property 这样的“新”属性可确保为协议属性创建的属性值不会与 name 或 http-equiv 属性的未来值冲突。
创建 Facebook 媒体卡片
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
包括要显示的帖子标题。此标题通常显示在图像下方和描述上方。描述应最多包含三句话，总结您的帖子。这将显示在 og:title 中定义的标题之后。提供要显示的横幅图像的绝对 URL，包括 https:// 协议。在 HTML 中包含图像时，始终包含图像的替代文本描述，即使图像将显示在其他位置也是如此。对于 Open Graph 社交媒体卡片，请将 alt 定义为 og:image:alt 属性的内容值。您还可以使用 og:url 包含规范 URL。
这些 meta 标记都在 Open Graph 协议中定义。这些值应该是您希望第三方 Web 应用程序显示的内容。
其他社交媒体有其自己类似的语法，例如 Twitter 卡片标记。这使得可以根据链接出现的位置提供不同的体验，或者通过在 URL 末尾添加参数来启用链接跟踪。
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
在 Twitter 的情况下，为了确保 name 属性的值与未来的规范不冲突，对于 Twitter 卡片数据，所有 name 值都以 twitter: 为前缀，而不是像 Open Graph 中那样使用新的属性（如 property 属性）。
您可以在 Twitter 和 Facebook 上查看您的社交媒体卡片的外观。
您可以为不同的社交媒体网站或不同的链接参数设置不同的卡片图像、标题和描述。例如，https://perfmattersconf.com 根据 URL 的参数为 og:image、og:title 和 og:description 设置不同的值。
如果您在 Twitter 的 Card Validator 中输入 https://perfmattersconf.com?name=erica 和 https://perfmattersconf.com?name=melanie，您将看到这两张不同的卡片；即使它们都链接到同一个会议主页，我们也提供了不同的内容。
其他有用的 meta 信息
如果有人将您的网站添加为书签，将其添加到他们的主屏幕，或者如果您的网站是渐进式 Web 应用程序，或者以其他方式脱机工作或不显示浏览器 Chrome 功能，您可以为移动设备的主屏幕提供应用程序图标。
您可以使用 <link> 标记链接到您想要使用的启动图像。以下是包含一些图像的示例，带有媒体查询
<link rel="apple-touch-startup-image" href="icons/ios-portrait.png" media="orientation: portrait" />
<link rel="apple-touch-startup-image" href="icons/ios-landscape.png" media="orientation: landscape" />
如果您的网站或应用程序具有 Web 应用程序功能，这意味着该网站可以依靠自身运行，并且 UI 最少（例如没有后退按钮），您可以使用 meta 标记来告知浏览器。
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
仅当您的应用确实具有应用功能时才包含这些。如果您的网站不是，您将为您最热心的支持者（那些将您的网站添加到其主屏幕的人）带来非常糟糕的用户体验。您将失去他们的喜爱！
如果有人要将您的图标保存到他们的小型设备的主屏幕，您需要为操作系统提供一个短名称，该名称不会占用小型设备主屏幕上的太多空间。您可以通过包含 meta 标记或使用 Web 清单文件来做到这一点。以下演示了 meta 标记方法
<meta name="apple-mobile-web-app-title" content="MLW" />
<meta name="application-name" content="MLW" />
您已经介绍了几个 meta 标记，所有这些标记都会使您的标头更长。如果您确实要创建一个具有 Web 应用程序功能、离线友好的渐进式 Web 应用程序，则可以更简单明了地在 Web 清单文件中包含 short_name: MLW，而不是包含这两个额外的 meta 标记。
清单文件可以防止标头中充斥着 <link> 和 <meta> 标记。我们可以创建一个清单文件，通常称为 manifest.webmanifest 或 manifest.json。然后，我们使用方便的 <link> 标记，并将 rel 属性设置为 manifest，将 href 属性设置为清单文件的 URL
<link rel="manifest" href="/mlw.webmanifest" />
本系列侧重于 HTML，但您可以查看 web.dev 上关于渐进式 Web 应用程序的课程或 MDN 的 Web 应用程序清单文档。
您的 HTML 现在看起来像这样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<meta name="description" content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
<link rel="stylesheet" src="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
<link rel="manifest" href="/mlwmanifest.json" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
它很长，但完成了。
现在您的 <head> 基本上完成了，您可以深入研究一些语义化 HTML。
检查您的理解情况
测试您对元数据的了解
refresh pragma 指令。
Open Graph meta 标记。