Skip to content
html.sh

itemprop - Microdata Property Name

The itemprop Attribute

Section titled “The itemprop Attribute”
Global Attribute HTML5

The itemprop attribute defines a property name for a Microdata item, allowing you to add structured, machine-readable data to your HTML. It works in conjunction with itemscope and itemtype to create semantic metadata that search engines and other applications can understand.

Quick Example

Section titled “Quick Example”
Result

Syntax

Section titled “Syntax”
<element itemprop="property-name">Value</element>


<!-- Multiple properties -->
<element itemprop="prop1 prop2">Value</element>


<!-- With nested item -->
<div itemprop="property" itemscope itemtype="...">
  <!-- Nested item properties -->
</div>

How Values are Extracted

Section titled “How Values are Extracted”

The value of an itemprop depends on the element it’s placed on. Different HTML elements contribute their values in different ways:

For most elements, the property value is the text content:

<span itemprop="name">John Doe</span>
<!-- Value: "John Doe" -->


<div itemprop="description">
  A detailed description of the product.
</div>
<!-- Value: "A detailed description of the product." -->

Value Extraction Rules

Section titled “Value Extraction Rules”
ElementValue SourceExample
<meta>content attribute<meta itemprop="price" content="19.99">
<audio>, <embed>, <iframe>, <img>, <source>, <track>, <video>src attribute<img src="logo.png" itemprop="logo">
<a>, <area>, <link>href attribute<a href="/" itemprop="url">Home</a>
<object>data attribute<object data="file.pdf" itemprop="document">
<data>value attribute<data value="5" itemprop="rating">5 stars</data>
<meter>value attribute<meter value="0.6" itemprop="score">
<time>datetime attribute (if present)<time datetime="2025-01-15" itemprop="date">
Other elementsText content<span itemprop="name">Product Name</span>

Common Properties and Examples

Section titled “Common Properties and Examples”

Person Information

Section titled “Person Information”
Result

Product Information

Section titled “Product Information”
Result

Article Metadata

Section titled “Article Metadata”
Result

Organization with Address

Section titled “Organization with Address”
Result

Multiple Properties

Section titled “Multiple Properties”

You can assign multiple property names to a single element by separating them with spaces:

Result

Nested Items as Property Values

Section titled “Nested Items as Property Values”

A property value can itself be another Microdata item, creating nested structures:

Result

Common Property Names by Schema Type

Section titled “Common Property Names by Schema Type”

Person Properties

Section titled “Person Properties”
<div itemscope itemtype="https://schema.org/Person">
  <span itemprop="name">Full Name</span>
  <span itemprop="givenName">First Name</span>
  <span itemprop="familyName">Last Name</span>
  <span itemprop="additionalName">Middle Name</span>
  <span itemprop="honorificPrefix">Dr.</span>
  <span itemprop="honorificSuffix">PhD</span>
  <span itemprop="email">[email protected]</span>
  <span itemprop="telephone">+1-555-1234</span>
  <span itemprop="jobTitle">Software Engineer</span>
  <span itemprop="worksFor">Company Name</span>
  <img itemprop="image" src="photo.jpg">
  <a itemprop="url" href="https://example.com">Website</a>
</div>

Product Properties

Section titled “Product Properties”
<div itemscope itemtype="https://schema.org/Product">
  <span itemprop="name">Product Name</span>
  <span itemprop="brand">Brand Name</span>
  <span itemprop="model">Model Number</span>
  <span itemprop="description">Product description</span>
  <img itemprop="image" src="product.jpg">
  <span itemprop="sku">SKU-12345</span>
  <span itemprop="gtin">GTIN code</span>


  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">99.99</span>
    <span itemprop="priceCurrency">USD</span>
    <link itemprop="availability" href="https://schema.org/InStock">
  </div>


  <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
    <span itemprop="ratingValue">4.5</span>
    <span itemprop="reviewCount">127</span>
  </div>
</div>

Article Properties

Section titled “Article Properties”
<article itemscope itemtype="https://schema.org/Article">
  <h1 itemprop="headline">Article Title</h1>
  <span itemprop="description">Article summary</span>
  <img itemprop="image" src="featured.jpg">
  <time itemprop="datePublished" datetime="2025-01-15">Jan 15, 2025</time>
  <time itemprop="dateModified" datetime="2025-01-20">Jan 20, 2025</time>


  <div itemprop="author" itemscope itemtype="https://schema.org/Person">
    <span itemprop="name">Author Name</span>
  </div>


  <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
    <span itemprop="name">Publisher Name</span>
    <img itemprop="logo" src="logo.png">
  </div>


  <span itemprop="articleBody">Article content...</span>
  <span itemprop="wordCount">1500</span>
</article>

Event Properties

Section titled “Event Properties”
<div itemscope itemtype="https://schema.org/Event">
  <span itemprop="name">Event Name</span>
  <span itemprop="description">Event description</span>
  <img itemprop="image" src="event.jpg">
  <time itemprop="startDate" datetime="2025-06-15T19:00">June 15, 2025 7:00 PM</time>
  <time itemprop="endDate" datetime="2025-06-15T22:00">10:00 PM</time>


  <div itemprop="location" itemscope itemtype="https://schema.org/Place">
    <span itemprop="name">Venue Name</span>
    <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
      <span itemprop="streetAddress">123 Main St</span>
      <span itemprop="addressLocality">City</span>
      <span itemprop="addressRegion">State</span>
      <span itemprop="postalCode">12345</span>
    </div>
  </div>


  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">25.00</span>
    <span itemprop="priceCurrency">USD</span>
    <link itemprop="availability" href="https://schema.org/InStock">
  </div>
</div>

Best Practices

Section titled “Best Practices”

Use Standard Vocabularies

Section titled “Use Standard Vocabularies”

Always use established vocabularies like Schema.org for maximum compatibility:

<!-- Good - Standard Schema.org type -->
<div itemscope itemtype="https://schema.org/Person">
  <span itemprop="name">John Doe</span>
</div>


<!-- Avoid - Custom types are less useful -->
<div itemscope itemtype="http://mysite.com/custom-person">
  <span itemprop="fullname">John Doe</span>
</div>

Property Names Must Match Type

Section titled “Property Names Must Match Type”

Ensure property names are valid for the item type being used:

<!-- Correct - 'name' is valid for Person -->
<div itemscope itemtype="https://schema.org/Person">
  <span itemprop="name">Jane Doe</span>
  <span itemprop="email">[email protected]</span>
</div>


<!-- Wrong - 'price' is not valid for Person -->
<div itemscope itemtype="https://schema.org/Person">
  <span itemprop="price">Invalid</span>
</div>

Use Appropriate HTML Elements

Section titled “Use Appropriate HTML Elements”

Choose elements that semantically match the content:

<!-- Good - Semantic HTML -->
<div itemscope itemtype="https://schema.org/Article">
  <h1 itemprop="headline">Article Title</h1>
  <time itemprop="datePublished" datetime="2025-01-15">Jan 15, 2025</time>
  <img itemprop="image" src="image.jpg" alt="Article image">
</div>


<!-- Less ideal - Using spans for everything -->
<div itemscope itemtype="https://schema.org/Article">
  <span itemprop="headline">Article Title</span>
  <span itemprop="datePublished">Jan 15, 2025</span>
  <span itemprop="image">image.jpg</span>
</div>

Invisible Metadata with meta

Section titled “Invisible Metadata with meta”

Use <meta> for data that shouldn’t be visible:

<div itemscope itemtype="https://schema.org/Product">
  <h2 itemprop="name">Premium Headphones</h2>


  <!-- Hidden structured data -->
  <meta itemprop="sku" content="HDN-123">
  <meta itemprop="productID" content="12345">
  <meta itemprop="gtin" content="00012345678905">


  <div>Price: <span itemprop="price">$299.99</span></div>
</div>

Testing Your Microdata

Section titled “Testing Your Microdata”

Google Rich Results Test

Section titled “Google Rich Results Test”

Test your structured data to see if it’s eligible for rich results in Google Search:

  1. Visit Google Rich Results Test
  2. Enter your URL or paste your HTML code
  3. Review any errors or warnings
  4. Preview how your content might appear in search results

Schema.org Validator

Section titled “Schema.org Validator”

Validate your Microdata markup:

  1. Visit Schema Markup Validator
  2. Enter your URL or paste your HTML
  3. Check for syntax errors and schema compliance

Browser Support

Section titled “Browser Support”

The itemprop attribute is supported by all modern browsers. While browsers don’t render Microdata differently, they make it available through the DOM API, and search engines use it for rich snippets.

BrowserSupport
ChromeYes (Full support)
FirefoxYes (Full support)
SafariYes (Full support)
EdgeYes (Full support)
OperaYes (Full support)

JavaScript API

Section titled “JavaScript API”

Access Microdata through the DOM:

<div id="person" itemscope itemtype="https://schema.org/Person">
  <span itemprop="name">John Doe</span>
  <span itemprop="email">[email protected]</span>
</div>


<script>
  const person = document.getElementById('person');


  // Get all properties
  const properties = person.properties;


  // Access specific property
  const nameProperty = person.properties.namedItem('name');
  console.log(nameProperty.itemValue); // "John Doe"


  // Get all items in document
  const allItems = document.getItems();


  // Get items of specific type
  const people = document.getItems('https://schema.org/Person');
</script>
Section titled “Related Attributes”

itemscope

Creates a new Microdata item. Must be used with itemprop to define properties. Learn more

itemtype

Specifies the vocabulary URL for a Microdata item, defining what properties are valid. Learn more

itemid

Provides a global identifier for a Microdata item, useful for referencing the same entity across pages. Learn more

itemref

References properties that are not descendants of the element with itemscope, allowing non-nested properties. Learn more

Common Use Cases

Section titled “Common Use Cases”

SEO and Rich Snippets

Section titled “SEO and Rich Snippets”

Microdata helps search engines understand your content and display rich snippets:

<!-- Recipe markup for rich results -->
<div itemscope itemtype="https://schema.org/Recipe">
  <h2 itemprop="name">Chocolate Chip Cookies</h2>
  <img itemprop="image" src="cookies.jpg" alt="Cookies">


  <div>
    <span itemprop="author">Chef Maria</span>
  </div>


  <div>
    Prep time: <time itemprop="prepTime" datetime="PT15M">15 minutes</time>
    Cook time: <time itemprop="cookTime" datetime="PT10M">10 minutes</time>
  </div>


  <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
    Rating: <span itemprop="ratingValue">4.8</span>
    (<span itemprop="reviewCount">203</span> reviews)
  </div>


  <div>
    <h3>Ingredients:</h3>
    <span itemprop="recipeIngredient">2 cups flour</span>
    <span itemprop="recipeIngredient">1 cup sugar</span>
    <span itemprop="recipeIngredient">2 cups chocolate chips</span>
  </div>


  <div itemprop="recipeInstructions">
    Mix ingredients, bake at 350°F for 10 minutes.
  </div>
</div>

Local Business Information

Section titled “Local Business Information”
<div itemscope itemtype="https://schema.org/LocalBusiness">
  <h2 itemprop="name">Joe's Coffee Shop</h2>


  <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
    <span itemprop="streetAddress">456 Main Street</span>
    <span itemprop="addressLocality">Portland</span>
    <span itemprop="addressRegion">OR</span>
    <span itemprop="postalCode">97204</span>
  </div>


  <div>
    Phone: <span itemprop="telephone">(503) 555-0123</span>
  </div>


  <div>
    <time itemprop="openingHours" datetime="Mo-Fr 07:00-19:00">
      Mon-Fri: 7am-7pm
    </time>
  </div>


  <div itemprop="geo" itemscope itemtype="https://schema.org/GeoCoordinates">
    <meta itemprop="latitude" content="45.5231">
    <meta itemprop="longitude" content="-122.6765">
  </div>
</div>

Product with Reviews

Section titled “Product with Reviews”
<div itemscope itemtype="https://schema.org/Product">
  <h2 itemprop="name">Laptop Pro 15</h2>
  <img itemprop="image" src="laptop.jpg" alt="Laptop">


  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">1299.99</span>
    <span itemprop="priceCurrency" content="USD">$</span>
    <link itemprop="availability" href="https://schema.org/InStock">
    In Stock
  </div>


  <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
    Average rating: <span itemprop="ratingValue">4.7</span> out of
    <span itemprop="bestRating">5</span>
    based on <span itemprop="reviewCount">89</span> reviews
  </div>
</div>

Specifications

Section titled “Specifications”