html 文档中元数据的最佳实践？答案

【问题标题】：Best practice for meta data in a html document?html 文档中元数据的最佳实践？
【发布时间】：2012-05-19 00:16:44
【问题描述】：

我从事大规模、大容量、面向公众的 Web 应用程序。应用程序的成功运行对业务非常重要，因此有许多 MI 工具可以针对它运行。

其中一个 MI 工具本质上是查看为每个页面请求发送到浏览器的 html（我已经对其进行了相当多的简化，但就这个问题而言，它是一个对html)

为了让这个 MI 工具获取它需要的数据，我们将元数据放在 head 元素中。目前我们以 html cmets 的形式进行：

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" class="">
<head>
    <!-- details = 52:AS6[rxSdsMd4RgYXJgeabsRAVBZ:0406139009] -->
    <!-- policy id = 1234567890 -->
    <!-- party id = 0987654321 -->
    <!-- email address = user@email.com -->
    <!-- error = 49 -->
    <!-- subsessionid = bffd5bc0-a03e-42e5-a531-50529dae57e3-->
    ...

并且该工具只需使用正则表达式查找给定的元数据注释

由于此数据是元数据，我想将其更改为 html 元标记，因为它在语义上感觉正确。像这样的：

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" class="">
<head>
    <meta name="details" content="52:AS6[rxSdsMd4RgYXJgeabsRAVBZ:0406139009]" />
    <meta name="policyId" content="1234567890" />
    <meta name="partyId" content="0987654321" />
    <meta name="emailAddress" content="user@email.com" />
    <meta name="error" content="49" />
    <meta name="subsessionid" content="bffd5bc0-a03e-42e5-a531-50529dae57e3" />
    ...

这感觉更语义化，我可以让 MI 工具使用它没有问题 - 只是更改正则表达式的情况。然而，它现在给我带来了 w3c 验证器的问题。它不会验证，因为我使用的元名称未被识别。我收到错误“元素元上属性名称的错误值详细信息：未注册关键字详细信息。”它建议我在 WHATWG wiki 上注册这些名称值。

虽然我可以这样做，但感觉不对。我的一些元标记是“通用的”（例如错误和电子邮件地址），所以我可能会找到一个已经注册的名称值并使用它。但是，它们中的大多数是特定于行业/组织的。注册一个名为 subsessionid 或 partyId 的公共名称值感觉不对，因为它们是特定于我的组织和应用程序的。

所以，问题是 - 在这种情况下，什么是最佳实践？我应该将它们保留为 html cmets 吗？我应该像上面那样使用元标记而不担心 w3c 验证失败吗？（尽管这对组织来说越来越重要）我是否应该尝试在 WHATWG wiki 上注册我的元名称值，但知道它们不是很通用？还是有其他解决方案？

欣赏你的想法，干杯

内森

编辑显示最终解决方案：

我要回答的完整答案如下。它基于 Rich Bradshaws 的回答，所以他的回答是被接受的，但为了完整性，我要这样做：

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" class="">
<head>
    <meta name="application-name" content="Our app name" 
        data-details="52:AS6[rxSdsMd4RgYXJgeabsRAVBZ:0406139009]" 
        data-policyId="1234567890"
        data-partyId="0987654321"
        data-emailAddress="user@email.com"
        data-error="49"
        data-subsessionid="bffd5bc0-a03e-42e5-a531-50529dae57e3"
    />
    ...

这验证了，所以所有的方框都打勾了:)

【问题讨论】：

根据whatwg.org/specs/web-apps/current-work/multipage/… 的规范，data- 属性不允许有任何大写字符。你的。并不是说我个人对此感到冒犯。

标签： html meta-tags w3c-validation

【解决方案1】：

W3C 验证毫无意义。 HTML != XML，所以没有任何模式来验证它。没有浏览器会阻塞，因为您添加了一个未注册名称的元元素。如果您真的很担心，可以在元元素上使用 data 属性，例如：

<meta data-details="52:AS6[rxSdsMd4RgYXJgeabsRAVBZ:0406139009]" data-policyId="0123456789" />

至少你知道未来的规范不会赋予你的数据意义。

【讨论】：

谢谢 Rich - 我将对您的答案稍作改动（我稍后会将其作为答案发布），但我已将您的答案标记为已接受的答案是你给我指明了正确的方向:)
我的最终答案作为对我原始问题的编辑发布。谢谢

【解决方案2】：

虽然您的示例可能有效，但请注意关键字 application-name 仅适用于 Web 应用程序。

对于不是网络应用程序的普通网页，或者如果不提供application-name，请参阅一些替代方案：

在`head` 中使用`data-*` 属性

不需要meta 元素。

<!DOCTYPE html>
<html>
<head
    data-details="52:AS6[rxSdsMd4RgYXJgeabsRAVBZ:0406139009]" 
    data-policyId="1234567890"
    data-partyId="0987654321"
    data-emailAddress="user@email.com"
    data-error="49"
    data-subsessionid="bffd5bc0-a03e-42e5-a531-50529dae57e3">
</head>

使用微数据

您可以创建一个词汇表，但那是not required for local use。

<!DOCTYPE html>
<html>
<head itemscope>
  <meta itemprop="details" content="52:AS6[rxSdsMd4RgYXJgeabsRAVBZ:0406139009]" />
  <meta itemprop="policyId" content="1234567890" />
  <meta itemprop="partyId" content="0987654321" />
  <link itemprop="emailAddress" href="mailto:user@email.com" /> <!-- or use a meta element if you don’t want to provide a full URI with "mailto:" scheme -->
  <meta itemprop="error" content="49" />
  <meta itemprop="subsessionid" content="bffd5bc0-a03e-42e5-a531-50529dae57e3" />
</head>

使用`script` 中的数据

script 元素 can be used for data blocks。您可以选择适合您需要的任何格式。纯文本示例：

<!DOCTYPE html>
<html>
<head>
  <script type="text/plain">
    details = 52:AS6[rxSdsMd4RgYXJgeabsRAVBZ:0406139009]
    policyId = 1234567890
    partyId = 0987654321
    emailAddress = user@email.com
    error = 49
    subsessionid = bffd5bc0-a03e-42e5-a531-50529dae57e3
  </script>
</head>

【讨论】：

在尝试<meta itemprop="key" content="value" />方法时，不要忘记在head标签中设置itemscope。否则，它在 w3c 验证器上的验证失败，说明“指定了 itemprop 属性，但该元素不是任何项目的属性。”。我花了一些时间才弄清楚这一点！
将 data-* 属性放在元素中是最干净的解决方案
就像一个注释：使用<script>标签很容易受到XSS的攻击。即使您验证数据，它也会打开一个攻击向量。通常，您需要对数据进行编码，此时最好使用元标记
我建议不要在头部使用data- 属性，因为the charset must be within the first 512 bytes of the document。

【解决方案3】：

如果您尝试使用 data- 格式向它们添加自定义属性，例如 data-type 或 data-name 并省略 real name 属性，或者可能将其全部设置为“abstract”或其他东西（我不知道如果验证器会给出重复元名称的问题）：

<meta data-name="details" content="52:AS6[rxSdsMd4RgYXJgeabsRAVBZ:0406139009]" />

所以您可以参考该数据名称来处理您的元数据...

http://html5doctor.com/html5-custom-data-attributes/

【讨论】：

【解决方案4】：

这两种方法在技术上都可行，但解决方案可能取决于您的组织对页面验证的看法。

如您所说，将信息添加到自定义元数据标签将使您的标记无效。

对于我的组织，页面验证是技术可访问性的一部分，被认为非常重要。不允许做任何会阻止页面验证的事情。

我不会尝试注册新的元数据名称和值，因为它们是特定于您的组织而不是供公众使用的。

如果这已经为您的组织工作，我可能会将这些信息保留为 HTML cmets。

【讨论】：

在head 中使用data-* 属性

使用微数据

使用script 中的数据

在`head` 中使用`data-*` 属性

使用`script` 中的数据