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

我工作在一个大规模,高容量,面向公众的网络应用程序。应用程序的成功操作对业务非常重要,因此有许多 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 上属性名称的错误值详细信息: 没有注册关键字详细信息。”它建议我在 WHATWG 维基上注册这些名称值。

虽然我可以这样做,但感觉不对。我的一些 meta 标记是“通用的”(比如 error 和 emailAddress) ,所以我可能会找到一个已经注册的名称值并使用它。不过,大部分都是针对特定行业/组织的。注册一个名为 subsessionid 或 partyId 的公共名称值是错误的,因为它们是特定于我的组织和应用程序的。

所以,问题是,在这种情况下,什么是最佳实践?我应该把它们作为 html 注释吗?我是否应该像上面那样使用 meta 标记,而不用担心 w3c 验证失败?(尽管这对组织来说越来越重要)我是否应该尝试在 WHATWG wiki 上注册我的元名值,但是我知道它们并不是非常通用的?还有别的办法吗?

谢谢你的关心,干杯

内森


为展示最终解决方案而编辑:

我要给出的完整答案如下。这是基于 Rich Bradshaw 的答案,所以他的答案是公认的,但是这就是我想要的完整性:

<!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"
/>
...

这是有效的,所以所有的选项框都打勾了:)

31318 次浏览

从技术上讲,这两种选择都可行,尽管解决方案可以归结为您的组织对页面验证的看法。

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

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

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

我可能会留下这个信息作为 HTML 注释,如果这已经为您的组织工作。

如果你尝试使用 data-format 为它们添加一个自定义属性,比如 data-type 或 data-name,省略实际的 name 属性,或者将它们全部设置为“抽象”或者其他什么(我不知道验证器是否会给重复的 meta 名带来问题) :

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

所以你可以引用这个数据名来处理你的元数据。

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

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

<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

虽然您的示例可能有效,但是请注意关键字 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>

使用微数据

你可以创建一个词汇表,但那是 本地使用不需要

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