在 <body> 中使用 HTML5+Microdata 的 <meta> 标签答案

【问题标题】：Using HTML5+Microdata's <meta> tag in the <body>在 <body> 中使用 HTML5+Microdata 的 <meta> 标签
【发布时间】：2011-09-03 13:25:02
【问题描述】：

我想使用 HTML5+Microdata 的 <meta> 标签使用 Schema.org 指定产品是否“有货”。

我不确定这是否是正确的语法：

<div itemscope itemtype="http://schema.org/Product">
  <h2 itemprop="name">Product Name</h2>
  <dl itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <dt itemprop="price">$1</dt>
    <meta itemprop="availability" itemscope itemtype="http://schema.org/ItemAvailability" itemid="http://schema.org/InStock">
  </dl>
</div>

【问题讨论】：

你在 google 的 Rich Snippet Testing Tool 中查看过它的样子吗？
@Oded 无法检查，因为我的网站没有上传。此外，有时即使语法不正确，工具也会正确提取内容！那么...语法正确吗？
我认为混乱可能源于Google Merchant Center help topic。它显示了这一点：<meta itemprop="availability" itemtype="http://schema.org/ItemAvailability" content="http://schema.org/InStock"/>
@bluescrubbie 我很惊讶谷歌支持这种语法。尽管itemtype 在技术上是一个全局属性，但我从未见过meta 元素在野外使用它。 developer.mozilla.org/en-US/docs/Web/HTML/Element/meta

标签： html meta schema.org microdata

【解决方案1】：

meta 标签不能与这样的 itemscope 一起使用。表达这一点的正确方法是通过使用link 标签的规范引用：

<div itemscope itemtype="http://schema.org/Product">
  <h2 itemprop="name">Product Name</h2>
  <dl itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <dt itemprop="price">$1</dt>
    <link itemprop="availability" href="http://schema.org/InStock">
  </dl>
</div>

【讨论】：

不错的标记。我想阅读更多关于这种实现意义的信息，我不知道它是如何工作的。您或其他阅读本文的人有来源吗？
在 schema.org 的文档中：Enumerations and canonical references: use link with href

【解决方案2】：

我和 OP 做了同样的事情，得到了同样的结果，测试工具的可用性与子项目相关联...我终于能够通过以下方式对其进行正确验证：

<meta itemprop='availability' content='http://schema.org/InStock'>

以下是该优惠的 Google 结构化工具输出：

Item 1
type:   http://schema.org/offer
property:   
price:  Price: $139.00
pricecurrency:  USD
availability:   http://schema.org/InStock

【讨论】：

【解决方案3】：

虽然在body 中使用meta（如果用于微数据！）是allowed，但由于以下几个原因，您的示例不正确：

dl 元素只能包含dt 或dd（和script/template）元素。您必须将meta 放置在dt/dd 内部或dl 外部（但您必须移动itemscope）。
meta 元素必须具有content 属性。
为此使用itemid是不正确的，而且http://schema.org/ItemAvailability不是一个类型，所以使用itemscope+itemtype也不正确。
但是，如果 itemprop 值是 URI，则 must 使用 link 元素而不是 meta 元素。

此外，price 值不应包含货币符号，并且您的 dt 似乎实际上应该是 dd（dt 包含“价格”或其他内容）。

所以你可以使用：

<dl itemprop="offers" itemscope itemtype="http://schema.org/Offer">
  <dt>Price</dt>
  <dd>$<span itemprop="price">1</span> <link itemprop="availability" href="http://schema.org/InStock" /></dd>
</dl>

【讨论】：

是否允许在正文中使用元 - 但这会创建一个隐藏元素，谷歌不喜欢隐藏的东西。最近，我在网站管理员工具中收到一条警报通知，检测到垃圾邮件结构化数据。该网站在它的
schema.org/Article"> 下方有元素 - 实际上它甚至通过了谷歌结构化数据的验证工具——但网站管理员坚持结构化数据中的隐藏内容。我最终不得不删除它。有什么想法吗？
@Sbpro：如果这真的是唯一隐藏的元素，我猜谷歌的网站管理员工具很糟糕。应该使用 meta/link 的原因有很多（甚至 Google 自己的示例也包含这些），inLanguage 案例是一个很好的理由：您不希望“en-US”成为用户-可见的。此外，使用 JSON-LD（Google 推荐使用）everything 无论如何都会被隐藏。该建议的真正含义是：不要通过向搜索引擎显示的用户隐藏内容来欺骗。 -- 自动检测这种不良情况当然不容易，所以他们的工具失败了。
感谢您抽出宝贵时间回复。是的，这是唯一隐藏的元素。我同意有很多理由使用这些元素并提供不一定必须可见的结构化数据。谷歌在这里就像一个强硬的警察。即使在 JSON-LD 文档中，它也会警告提供 html 中不存在的信息。我正在开发一个 CMS 插件来处理微数据 - 搜索和研究最佳实践，但我发现的任何信息都是模糊的。顺便说一句，我已经阅读了很多关于该主题的帖子，它们真的很有帮助。

【解决方案4】：

我在这里做了一个jsfiddle：http://jsfiddle.net/dLryX/，然后将输出（http://jsfiddle.net/dLryX/show/）放入丰富的sn-ps工具中。

回来了：

我相信语法是正确的，警告并不重要，因为它没有属性，因为它是元标记。

【讨论】：

无效，请查看 schema.org 上有关枚举的文档。此外，元标记需要的内容是有效的 HTML。

【解决方案5】：

查看标题下的不可见内容（不确定这是否有帮助）：

Google webmaster tools - About microdata

一般来说，Google 不会显示用户看不到的内容。换句话说，不要以一种方式向用户展示内容，而使用隐藏的文本来分别为搜索引擎和网络应用程序标记信息。您应该标记在用户访问您的网页时实际显示给他们的文本。

本指南有一些例外情况。在某些情况下，为搜索引擎提供更详细的信息可能很有价值，即使您不希望页面的访问者看到这些信息。例如，如果一家餐厅的评分为 8.5，用户（但不是搜索引擎）将假定评分基于 1-10 的等级。在这种情况下，您可以使用 meta 元素来表明这一点，如下所示：

<div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating"> Rating: <span itemprop="value">8.5</span> <meta itemprop="best" content="10" /> </div>

【讨论】：

不是你的错，但在这种情况下，谷歌太无益了哈哈。 “大多数情况下不要这样做，除非有例外，在这种情况下，这样做！”嗯……谢谢。

【解决方案6】：

This is an example 来自 schema.org 的入门指南以支持 @Lawrence 的回答。

但是，我不喜欢在页面正文中使用链接标签。来自MDN：

链接标签只能出现在头元素中；

难道没有更好的方法来使用有效的标记来指定可用性吗？

【讨论】：

link 和 meta 如果用于微数据，则为 allowed in the body。
虽然您的报价在技术上出现在页面上，但您应该在字里行间阅读。请注意顶部的“内容类别：元数据内容。如果存在 itemprop：流内容和短语内容”。由于流和短语内容可以出现在正文中，当且仅当它具有 itemprop 属性时，<link/> 才能出现在正文中。