Itemprop Attribute: Definition, Usage, and Examples

The itemprop attribute is an HTML global attribute used to assign specific properties to items within a Microdata structure. It works as a name-value pair where the attribute defines the name and the element's content or specific attributes define the value. By using itemprop, you provide search engines with a clear context for your content, such as identifying which part of a page is a product name, a movie director, or a publication date.

Entity Tracking

• Itemprop: An HTML attribute used to assign a property name to an element’s value within a Microdata item.
• Microdata: A specification for embedding machine-readable data in HTML documents using simple attributes.
• Itemscope: An attribute that indicates the HTML within a specific tag is about a particular item.
• Itemtype: A URL that specifies the category of an item, usually from a vocabulary like Schema.org.
• Schema.org: A shared vocabulary used by Google, Microsoft, Yandex, and Yahoo! to understand web content.
• Typed Item: A Microdata item where the property name is a valid URL referring to a vocabulary definition.
• Top-level Microdata Item: An item defined with itemscope that is not a property of another item.

What is Itemprop?

The itemprop attribute identifies a property of an item. In Microdata, an "item" consists of a group of these properties. Every HTML element can carry an itemprop attribute, and its value is typically a string or a URL.

When you use itemprop, you turn raw HTML into structured data. For example, a simple <h1> tag containing "Avatar" tells a browser how to style the text, but adding itemprop="name" tells a search engine that "Avatar" is the specific name of the item being discussed.

Why Itemprop matters

• Improved search engine understanding. It helps search engines distinguish between different meanings of the same word, such as identifying "Avatar" as a movie title rather than a profile picture.
• Enhanced search results. Using this attribute contributes to rich snippets and shared vocabularies used by Google, Microsoft, Yandex, and Yahoo!.
• Social network optimization. Historically, social networks like Google+ utilized these tags to display richer information like titles and thumbnails during sharing.
• Machine readability. It allows crawlers to extract specific data points like IDs, dates, and durations without relying on complex text parsing.

How Itemprop works

The value of an itemprop is determined by the element it is placed on:

1. Standard elements: For <span> or <div>, the value is the text inside the tag.
2. Links and media: For <a>, <img>, or <video>, the value is the URL found in the href or src attribute.
3. Dates and times: For <time>, the value is the machine-readable string in the datetime attribute.
4. Hidden data: For <meta>, the value is the content of the content attribute.
5. Numeric data: For <meter> or <data>, the value is taken from the value attribute.

If an element with itemprop also has an itemscope attribute, the value of that property becomes a nested item itself.

Best practices

• Use the time element for dates. This prevents ambiguity for machines. A date like "04/01/11" is unclear, but using <time itemprop="startDate" datetime="2011-04-01"> makes it certain.
• Use meta for invisible data. If information like a currency or a rating value is implied or shown via an image, use the <meta> tag with a content attribute to provide search engines the exact value.
• Check your work. Always use the rich snippets testing tool provided by Google to verify your markup.
• Keep properties visible. As a general rule, only mark up content that is visible to people visiting the page, rather than hiding data in invisible divs.

Common mistakes

• Mistake: Using periods or colons in proprietary property names. Fix: Ensure non-URL property names contain no . or : characters, as these are reserved for URLs and future extensions.
• Mistake: Putting spaces in a single property name. Fix: Names must not contain spaces. If you include spaces, the browser will interpret them as multiple separate property names for that single element.
• Mistake: Using the wrong attribute for URLs. Fix: When a property value is a URL, use elements like <a>, <link>, or <img> so the crawler can correctly identify the href or src as the value.

Examples

Describing a Movie

In this scenario, itemprop identifies the name, director, and genre of a film within a specific scope.

<div itemscope itemtype="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>
    Director: <span itemprop="director">James Cameron</span>
  </span>
  <span itemprop="genre">Science fiction</span>
</div>

Nesting Items

Here, the movie director is defined as their own "item" with their own properties (name and birth date).

<div itemscope itemtype="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <div itemprop="director" itemscope itemtype="http://schema.org/Person">
    Director: <span itemprop="name">James Cameron</span> 
    (born <time itemprop="birthDate" datetime="1954-08-16">August 16, 1954</time>)
  </div>
</div>

FAQ

Can one element have multiple itemprops? Yes. You can specify multiple properties by separating them with spaces, such as itemprop="favorite-color favorite-fruit". This assigns the same value to both names.

What happens if I use the same itemprop name twice in one item? The item will simply have multiple properties with the same name. If an ice cream item has two <li> tags with itemprop="flavor", the resulting data reflects two separate flavor values for that one item.

Does itemprop affect how my page looks? No. There is no relationship between Microdata and the document's visual layout. You can even use <meta> tags to provide structured data that doesn't appear in the visible text at all.

What characters are forbidden in property names? For proprietary names (those not using a full URL), you cannot use spaces, colons (:), or periods (.).

How are URLs handled as values? If you place itemprop on an <a> or <img> tag, the value is the absolute URL parsed from the href or src attribute.