HTML文档中元数据的最佳实践是什么?

85
我正在开发一个规模较大、访问量高且面向公众的Web应用程序。应用程序的成功运行对业务非常重要,因此有许多MI工具针对它运行。
其中一个MI工具基本上查看每个页面请求发送到浏览器的html(我已经大大简化了它,但为了这个问题,它是一个对html进行一些分析的工具)。
为了使这个MI工具获取所需的数据,我们将元数据放在head元素中。目前,我们将其作为html注释来处理:
<!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验证器带来了问题。它无法验证,因为我使用的元名称未被识别。我会收到错误消息“元素meta上的属性名称的值details不正确:关键字details未注册。”,并建议我在WHATWG wiki上注册这些名称值。
虽然我可以这样做,但感觉不太对。我的一些元标记是“通用的”(例如error和emailAddress),因此我可能可以找到已经注册的名称值并使用它们。但是,它们中的大多数都是行业/组织特定的。如果我注册一个名为subsessionid或partyId的公共名称值,那么这就有些不妥,因为这些名称值是特定于我的组织和应用程序的。
因此,问题是 - 在这种情况下,什么被视为最佳实践?我应该将它们留作HTML注释吗?我应该像上面那样使用元标记,并不担心w3c验证失败吗? (尽管对组织越来越重要)我应该尝试在WHATWG wiki上注册我的元名称值,但知道它们不是非常通用吗?还是有其他解决方案?
感谢您的想法,谢谢
Nathan
编辑以显示最终解决方案:
我要采用的完整答案如下。它基于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"
    />
    ...

这个验证通过,所以所有的框都被勾选了 :)


8
根据http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#custom-data-attribute中的规定,data属性不能包含任何大写字母。而你的属性中有大写字母。并非我个人有意见。 - Greg Maletic
4个回答

52

W3C验证是没有意义的。HTML!= XML,所以没有模式可以进行验证。如果您添加了一个未注册名称的meta元素,那么没有浏览器会因此而失败。如果您真的很担心,可以使用meta元素上的data属性,例如:

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

至少这样你就知道没有未来的规范会赋予你的数据含义。

更多信息请阅读:http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#custom-data-attribute


谢谢Rich - 我会选择你回答的一个小变体(我马上会把它发表为答案),但是我已经把你的回答标记为被接受的答案,因为正是你指引了我正确的方向 :) - Nathan Russell
我的最终答案已经作为对原问题的编辑发布。谢谢。 - Nathan Russell

45

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

对于通常不是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>

使用微数据

你可以创建一个词汇表,但是这在本地使用时不是必需的

<!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元素可用于数据块。您可以选择适合您需求的任何格式。以下是纯文本示例:

<!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>

3
在尝试使用<meta itemprop="key" content="value" />方法时,请不要忘记在head标签中设置itemscope。否则,w3c验证器会出现“已指定itemprop属性,但元素不是任何项的属性”的验证失败信息。我花了一些时间才明白这个问题! - Louis Somers
将数据-*属性放在<head>元素中是最干净的解决方案。 - Velojet
2
只是提醒一下:使用<script>标签非常容易受到XSS攻击。即使您验证了数据,它也会打开一个攻击向量。通常,您需要对数据进行编码,此时最好使用元标记。 - Downgoat
8
由于字符集必须在文档的前512个字节内,我建议不要在头部使用data-属性。 - Lucas Basquerotto

4
如果您尝试使用"data-"格式为它们添加自定义属性,例如"data-type"或"data-name",并省略真实名称属性,或将其全部设置为"abstract"或其他内容(我不确定验证器是否会为重复的元数据名称产生问题),会发生什么呢?
<meta data-name="details" content="52:AS6[rxSdsMd4RgYXJgeabsRAVBZ:0406139009]" />

所以你可以参考那个data-name来处理你的元数据... http://html5doctor.com/html5-custom-data-attributes/

-1

从技术上讲,任何一种选项都可以实现,但解决方案可能取决于您的组织对页面验证的看法。

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

对于我的组织而言,页面验证是技术可访问性的一部分,被认为非常重要。任何会阻止页面验证的操作都是不允许的。

我不会尝试注册新的元数据名称和值,因为这些是特定于您的组织而不是公共使用的。

如果HTML注释已经适用于您的组织,我可能会将此信息留作HTML注释。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接