Third-party scripts and page authors can access the
namevalue pairs. This is the real power of Microdata.
To achieve this define each item by means of the
itemtype
attribute. An item in the context of Microdata is the element that has the
itemscope
attribute set. Every element and name-value pair inside that element is part of that item. The value of the
itemtype
attribute, therefore, defines the namespace for that item’s vocabulary.
Example
<aside itemscope itemtype="http://www.data-vocabulary.org/Person">
<h1 itemprop="name">John Peter</h1>
<p><img src="http://www.yourdomain.com/bio-photo.jpg" alt="John Peter" itemprop="photo"></p>
<p><a href="http://www.yourdomain.com" itemprop="url">Author’s website</a></p>
</aside>
We’re using the URL http://www.data-vocabulary.org/, a domain owned by Google. It houses a number of Microdata vocabularies, including Organization,
Person, Review, Breadcrumb, and more.
Using Microdata and Schema.org
To add additional meaning about the content—for example, that the content identifies a person—so. By doing this popular search engines can extrapolate this data.
This can be achieved by specifying an
itemtype
and apply the appropriate property names from the Schema.org vocabulary in addition to using the
itemscope
and
itemprop
attributes.
<section itemscope itemtype="http://schema.org/Person">
<h1 itemprop="name">Tim Berners-Lee</h1>
<img itemprop="image" src="http://www.w3.org/Press/Stock/Berners-Lee/2001-europaeum-eighth.jpg">
<p>
<span itemprop="jobTitle">Director</span>,
<span itemprop="affiliation" itemscope itemtype="http://schema.org/Organization" itemprop="name"><p itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="addressLocality">Cambridge</span>
<span itemprop="addressRegion">MA</span>
</p>
<a itemprop="url" href="http://www.w3.org/People/Berners-Lee/">Web site at W3C</a>
</section>
Explanation
The start of this microdata item is again indicated by the use of itemscope on the section element, but also added to this element is the itemtype attribute. Use item type with a URL in order to identify the item data type. In this case, we’re using the Schema.org structure to identify a person.
Just as with the previous section, the itemprop attribute is applied with property names to give meaning to the content in the markup. By looking at the properties and pairing them with the content, we know that “Tim Berners-Lee” is a person’s name and that his job title is “Director.”
The use of itemprop for both the image and URL properties works a bit differently–the corresponding values in these cases are the src and href attribute values, respectively.
If you’ve worked with microformats in the past, this concept won’t be new to you. A final special case in this example can be seen with the affiliation and address item prop attributes—here, new items are nested inside of the main item. In both cases, the itemprop identifies the property that is directly related to the person item but, within the same tag, also establishes the property as an item itself with the itemscope attribute. Going on step further, itemtype is also applied to indicate the URL that describes the item data type.
While this might seem a bit complicated at first, realize that it’s not much different than combining multiple microformats (like hCard and hCalendar on a resume) or creating an XML object to represent nested data. Whether you’ve worked on project like these before or not, there is an easy way to
check to see that you’re making progress in applying the Schema.org vocabularies. You can use the Google Rich Snippets Testing Tool (available at http://www.google.com/webmasters/tools/richsnippets) to validate that your structured data markup can be parsed.n use the Google Rich Snippets Testing Tool (available at
http://www.google.com/webmasters/tools/richsnippets) to validate that your structured data markup can be parsed.