Even more schema.org markup examples

In my last post, I introduced the basics for OpenGraph and Schema.org markup. In this post I’m going to look at more examples of content types.

Some background on Schema.org markup

Schema.org markup lets you specify objects to let search engines (and social networks) have a more accurate way of rendering content and is Google’s preferred way of marking up objects on the web.  I speak a little more to this topic in my last post, Schema.org, Open Graph, and making links to your site from Social look pretty. When you markup your content, the markup specifies things that the page contains.

Why these matter

First and foremost, using this markup will ensure that search engines can understand the intent of your pages. There are more interesting potential applications too. For one, social networks could potentially do “the right thing” with your content. For example, if a user embedded a link to a cool event and the event included markup, the social network could potentially recognize that the linked content is an event and could create the event link automatically for the user. Google+ just recently introduced a new API, History, which lets you specify various things that people encounter and do on the web. This API is powered by schema markup and could eventually give users a rich experience of content that they view. For example, a site that tracks music plays could have played music aggregated to history and this could then be combined with content tracks from another, separate, service and displayed on a common dashboard in Google+.

Examples

**Note: I have no idea as to whether these are currently or ever will be supported in Google services, however, doing “the right thing™” now will make your sites behave their best should any of these types get supported in the future.

The following markup shows how to author an event in schema.org markup:

<html itemscope itemtype="http://schema.org/Event">
  <head>
    <meta itemprop="name" content="Gus Class">
    <meta itemprop="description" content="Gus is turning a year older">
    <meta itemprop="image" content="http://gusclass.com/square_profile.png">
    <meta itemprop="startDate" content="20130524">
    <meta itemprop="endDate" content="20130525">
  </head>
  <body>
  </body>
</html>

The following markup shows how to define a person:

<html itemscope itemtype="http://schema.org/Person">
  <head>
    <title>Gus is a person</title>
  </head>
  <body>
Name:<div itemprop="name">Gus Class</div>
    Description: <section itemprop="description">
      Gus Class is an awesome human.
    </section>
  </body>
</html>

A music example:

<html itemscope itemtype="http://schema.org/MediaObject">
  <head>
    <meta itemprop="name" content="Spoons">
    <meta itemprop="description" content="An example of how audio shows up">
    <meta itemprop="image" content="http://wheresgus.com/schema/Spoons.jpeg">
    <meta itemprop="audio" content="http://wheresgus.com/schema/Spoons.mp3">
  </head>
  <body></body>
</html>

Video

<html itemscope itemtype="http://schema.org/VideoObject">
  <head>
    <meta itemprop="name" content="Just a test video object...">
    <meta itemprop="description" content="Just testing the way that video objects appear in content...">
    <meta itemprop="url" url="http://gusclass.com/video/metro_overview.mp4">
  </head>
  <body></body>
</html>

An article:

<html itemscope itemtype="http://schema.org/Article">
  <head>
    <meta itemprop="name" content="Just a test article...">
    <meta itemprop="description" content="Just testing the way that articles appear in content...">
    <meta itemprop="image" content="http://wheresgus.com/schema/article.png">
    <meta itemprop="url" content="http://wheresgus.com/schema/article.html">
    <meta itemprop="author" content="Gus Class">
    <meta itemprop="contentRating" content="MPAA G">
    <meta itemprop="copyrightYear" content="2012">
    <meta itemprop="dateCreated" content="20120703">
    <meta itemprop="datePublished" content="20120703">
  </head>

  <body>
    <p>Note how this content is now ignored because schema markup is specified.</p>
  </body>
</html>

Blogs

<html itemscope itemtype="http://schema.org/Blog">
  <head>
    <meta itemprop="name" content="Help I'm Trapped in a Code Factory!">
    <meta itemprop="description" content="A blog about tech, code, and social media.">
    <meta itemprop="image" content="http://gusclass.com/square_profile.png">
    <meta itemprop="author" content="Gus Class">
  </head>
  <body></body>
</html>

There are plenty more “things” that can be marked up, learn more from http://schema.org.

See Also