1

I am adding Microdata on a site, and wondering on which level the itemprop property should appear.

For example, I have the following markup:

<div itemscope itemtype="http://schema.org/Article">
    <div class="author">
        <a href="http://www.author.com">Author's Name</a>
    </div>
</div>

Where should itemprop go, in the a element directly or it is possible to add it to <div class="author"> and it would be parsed correctly?

Can I have the following:

<div itemscope itemtype="http://schema.org/Article">
    <div class="author" itemprop="author">
        <a href="http://www.author.com">Author's Name</a>
    </div>
</div>

instead of

<div itemscope itemtype="http://schema.org/Article">
    <div class="author">
        <a href="http://www.author.com" itemprop="author">Author's Name</a>
    </div>
</div>

In other words, does the itemprop property have to be defined on the element directly (such as an a or img tag) or it's possible to define it on a wrapper div with the content actually being in a child element?

unor
  • 92,415
  • 26
  • 211
  • 360
p4sh4
  • 3,292
  • 1
  • 20
  • 33

1 Answers1

1

It depends on the property (what value it should have).

An itemprop on an element with href or src attribute (e.g., a or img) creates a URI value: it takes the value of the href/src attribute, not the element’s content.

  • Here the author property has the string value "Author's Name":

    <div itemprop="author">
    <a href="http://example.com/">Author's Name</a>
</div>

  • Here the author property has the URI value "http://example.com/":

    <div>
    <a href="http://example.com/" itemprop="author">Author's Name</a>
</div>

There are some more exceptions, like the meter element or the time element. You can refer to a summary in my answer about datatypes in Microdata.

Leaving these exceptions aside, if the value should be a string, and you have, let’s say, only div elements, it doesn’t matter on which element you specify the itemprop, so these three snippets all have the string "bar" as value for the foo property:

<div itemprop="foo">
  bar
</div>

<div itemprop="foo">
  <div>
    bar
  </div>
</div>

<div itemprop="foo">
  <div>
    <div>
      bar
    </div>
  </div>
</div>
Community
  • 1
  • 1
unor
  • 92,415
  • 26
  • 211
  • 360
  • Thanks! What if it the contents of a `div` with `itemprop` is an `img`? Would a [ImageObject](http://schema.org/ImageObject) be created then? – p4sh4 Jul 28 '15 at 03:11
  • @p4sh4: Do you mean `
    `? No, because `div` is an element that creates a string value: it looks for its element content (and the element content of all children). Because `img` is empty (i.e., it has no element content), the property `foo` would have no content. ··· Also note that Microdata never automatically creates items from a vocabulary (like Schema.org). Microdata is just a syntax that can be used with many different vocabularies (it just cares about strings, URIs and datetimes). You’d have to use `itemtype` for getting an `ImageObject`.     – unor Jul 28 '15 at 09:03
  • Yes. In fact, I was asking about Schema.org, someone edited my post to be about Microdata, that's strange... So, do you mean that in case of Schema.org, it would automatically create an ImageObject item "from a vocabulary" (not sure what that means), as opposed to Microdata? – p4sh4 Jul 28 '15 at 09:22
  • @p4sh4: The edit was mine ;) and I think it was correct (I rolled your edit back): You seem to ask how Microdata works. Schema.org is a vocabulary (with types like `Person` and properties like `name`), Microdata is a syntax (with HTML5 attributes like `itemprop`, `itemtype` etc.). You can use the vocabulary Schema.org, for example, with the syntaxes JSON-LD or RDFa instead of Microdata. So these (vocabulary vs. syntax) are two different things. – unor Jul 28 '15 at 09:26
  • Ah, got it! It was a bit confusing... Thanks! – p4sh4 Jul 28 '15 at 10:03