How do I have an itemprop nested in one itemscope

2020-02-06 10:19发布

问题:

TL;DR --> I want an itemprop nested in one itemscope to actually be applied to a different itemscope. How do I do that?

Here's a a gist of the code I have (I've removed classes and other extraneous elements on the page to focus on what's important):

<!-- CODE I HAD -->

<div itemscope itemtype="http://schema.org/Product">
  <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    <span itemprop="ratingValue">79</span>
    <h1 itemprop="name">Someproductsoandso</h1>
    <span itemprop="reviewCount">830</span>
  </div>
</div>

<!-- CODE I NOW HAVE -->

<div itemscope itemtype="http://schema.org/Product" itemref="productMicrodata">
  <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    <span itemprop="ratingValue">79</span>
    <h1 itemprop="name" id="productMicrodata">Someproductsoandso</h1>
    <span itemprop="reviewCount">830</span>
  </div>
</div>

Basically, I have a product itemscope with a child aggregateRating. Inside that aggregateRating scope I have things like the "ratingValue" and "reviewCount" that I want attached to that, but there's also a "name" value that I want attached to the Product (not the aggregateRating, which also can have a "name" value).

With the first chunk of code I used, google said that my product was missing a name, because the name was being applied to the aggregateRating; with the 2nd, the name is now being applied to both the aggregateRating and the Product. That's not the worst thing, but I'd like it just attached to the aggregateRating; do you know how to solve this without mucking up the current markup organization?

回答1:

Assuming you mean you want it only attached to the Product, as per your penultimate paragraph, and not only attached the aggregateRating as per per your last paragraph, then the best I can come up is

<div itemscope itemtype="http://schema.org/Product" itemref="productMicrodata">
  <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    <span itemprop="ratingValue">79</span>
    <h1 itemscope><span itemprop="name" id="productMicrodata">Someproductsoandso</span></h1>
    <span itemprop="reviewCount">830</span>
  </div>
</div>

The itemscope on the h1 hides the h1's children from the aggregateRating item, so the name property will only be attached to the Product item via the productMicrodata itemref. It does however, create a third item which has no type.