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
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
I see you mark html, so this is the whole page including the head. Within schema.org I see that mostly the div tag is marked. Is it possible to mark other tags like the paragrapgh tag.
This brings me to an idea, what if the markup information is on a separete sheet like we do with css. The itemtype will be on the page with an id, lle the itemprops on a separate sheet
Data annotations as a separate tags is one way of thinking about them – and yes, you can annotate paragraph tags with schema. I think of the annotations as a way to point an imaginary reader to the important sections of a site while also telling them more about what the sections represent.
Hello,
can you tell me what is the difference between using schema markup in head and body?
Both are valid, the decision to place schema in one place or the other is entirely stylistic.
I hope you understand me, for example,
when you show “Event” you put schema between head tags, but when you define a person you put schema between body tags.
What is the differebce?
The schema is microdata that can appear in any part of the page. So there really isn’t a difference, some schema is better specified in metatags in the head; other schema is better specified inline with the HTML.
Really nicely put together, as a complete total novice, I have found it a little difficult to grasp some of the concepts. The examples have certainly made it simpler and much easier to follow,
Thank You very Much
Patrick