HTML Best Practices: Schema.org Markup

Schema.org is the result of collaboration between Google, Bing, Yandex, and Yahoo! to provide the information their search engines need to understand content and provide the best search results possible. Adding Schema markup to your HTML provides search engines with structured data they can use to improve the way pages display in search results.

For example, if you’ve ever searched for a restaurant and found that it had star reviews in its search results, this is a product of Schema.org and rich snippets.

Schema.org markup is intended to tell the search engines what your data means, not just what it says.

To this end, we use Schema.org markup where relevant and reasonable to ensure that our clients have the best search visibility that we can provide.

Schema markup should be validated against the Google Structured Data Testing Tool.

Examples

Bad:

<div>
  <div>
    <span>The Catcher in the Rye</span> (
    <a href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye">wikipedia</a>)
  </div>
  <span>4 stars</span>
  <b>"A good read."</b>
  <span>
    <span>Bob Smith</span>
  </span>
  <span>Catcher in the Rye is a fun book. It's a good book to read.</span>
</div>

Good:

<div itemscope itemtype="http://schema.org/Review">
  <div itemprop="itemReviewed" itemscope itemtype="http://schema.org/Book">
    <span itemprop="name">The Catcher in the Rye</span> (
    <a itemprop="sameAs" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye">wikipedia</a>)
  </div>
  <span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
    <span itemprop="ratingValue">4</span>
  </span> stars -
  <strong>"<span itemprop="name">A good read.</span>"</strong>
  <span itemprop="author" itemscope itemtype="http://schema.org/Person">
    <span itemprop="name">Bob Smith</span>
  </span>
  <span itemprop="reviewBody">Catcher in the Rye is a fun book. It's a good book to read.</span>
</div>