html文档中元数据的最佳做法?


75

我在大规模,大量,面向公众的Web应用程序上工作。应用程序的成功运行对业务非常重要,因此有许多与此相对应的MI工具。

这些MI工具之一实质上是针对每个页面请求查看发送到浏览器的html(我已经对其进行了很多简化,但是出于这个问题的目的,它是一种对html进行分析的工具)

为了使该MI工具获取所需的数据,我们将meta数据放在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 meta标签,因为它在语义上感觉正确。像这样:

<!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上注册这些名称值。

虽然我可以这样做,但感觉并不正确。我的一些元标记是“通用的”(例如error和emailAddress),因此我可能可以找到一个已经注册的名称值并使用它。但是,大多数都是特定于行业/组织的。注册名为subsessionid或partyId的公共名称值是错误的,因为这些特定于我的组织和应用程序。

因此,问题是-在这种情况下,什么是最佳做法?我应该将它们保留为html注释吗?我应该像上面那样使用元标记,而不用担心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"
    />
    ...

这可以验证,因此所有方框均打勾:)


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

Answers:


44

W3C验证是没有意义的。HTML!= XML,因此没有任何架构可对其进行验证。没有浏览器会阻塞,因为您添加了一个具有未注册名称的meta元素。如果您真的很担心,可以在meta元素上使用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


谢谢Rich,我将对您的答案进行一些细微的改动(我稍后将其发布为答案),但是我已将您的答案标记为可接受的答案,因为正是您的答案在正确的方向:)
内森·罗素

我的最终答案是对原始问题的修改。谢谢
内森·罗素

36

尽管您的示例可能会起作用,但请注意,关键字application-name仅适用于Web应用程序

对于不是Web应用程序的常规网页,或者如果没有application-name给出,请参见一些替代方法:

在中使用data-*属性head

不需要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" />方法时,请不要忘记itemscope在head标签中进行设置。否则,它在w3c验证程序上的验证失败,说明“已指定itemprop属性,但该元素不是任何项目的属性。”。花了我一些时间弄清楚那个!
路易萨默斯2014年

将data- *属性放在<head>元素中是最干净的解决方案
Velojet

2
只需注意:使用<script>标记非常容易受到XSS的攻击。即使您验证数据,它也会打开攻击媒介。通常,您需要对数据进行编码,这时最好使用meta标签
Downgoat

3
我建议不要data-使用头部的属性,因为字符集必须位于文档的前512个字节之内
卢卡斯·巴斯奎罗托

2

如果您尝试使用数据格式向其添加自定义属性,例如数据类型或数据名称,并省略实名属性,或者将其全部设置为“抽象”或类似的东西(验证者将给重复的元名称带来问题):

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

因此,您可以引用该数据名称来处理您的元数据...

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


0

尽管解决方案可能取决于您的组织对页面验证的感觉,但从技术上讲,这两种方法都可以。

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

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

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

如果该信息已经为您的组织所用,那么我可能会将这些信息保留为HTML注释。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.