h1、h2、h3 围绕微数据标记

Question

我正在尝试向页面添加微数据标记（使用 Schema.org）。目前，代码如下所示：

<div itemscope itemtype="http://schema.org/Product">
    <div class="primary">
        <div itemprop="brand" itemscope itemtype="http://schema.org/Brand">
            <span itemprop="name">Acme Co</span>
        </div>
        <h4 itemprop="name">Blue Widget</h4>
    </div>
</div>

但是，我想做的是将 h4 从 "Blue Widget" 更改为 "Acme Co Blue Widget"。我已经将公司名称封装在 Brand 类型中，因此我不想在页面上重复它。这是我的想法。

可能的解决方案

<div itemscope itemtype="http://schema.org/Product">
    <h4 class="primary">
        <span itemprop="brand" itemscope itemtype="http://schema.org/Brand">
            <span itemprop="name">Acme Co</span>
        </span>
        <span itemprop="name">Blue Widget</span>
    </h4>
</div>

这不是 Microdata/Schema.org 标记是否有效的问题（我可以测试），而是 header 是否会按我希望的那样被浏览器读取 - "Acme Co Blue Widget"？我不确定正在发生的所有 Schema.org 事情。

Answer 1

是的，没关系。

heading elements h1-h6 can contain phrasing content（其中包括span）。由于 span 元素没有意义，这些 h4 在语义上是等价的：

<h4>Foobar</h4>

<h4><span>Fo<span>o</span>bar</span></h4>

微数据属性不会改变 HTML 语义。

您的解决方案的替代方案是使用 meta 元素（但如果您对自己的解决方案满意，则无需使用此替代方案）：

<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="brand" itemscope itemtype="http://schema.org/Brand">
    <meta itemprop="name" content="Acme Co" />
  </span>
  <h4 itemprop="name" class="primary">Acme Co Blue Widget</h4>
</div>

h1、h2、h3 围绕微数据标记

h1, h2, h3 around Microdata markup

html

schema.org

microdata

html-heading