Pro CSS3 Animation, Apress, 2013
Massive Head Canon
The New Defaults
CSSslidyFor understandable reasons, people tend to get very confused by the new technologies used to add metadata to HTML5 pages: should you use microdata, microformats, metatags or RDFa? Right now, the best answer is “all four”, but that usually just adds to the confusion.
With a few caveats and reservations, it is possible to categorize the best use of each format:
If you are displaying contact, address, resume or event information, use microformats, which have better (and wider) support for such data.
If you’re tying your pages into Facebook’s Open Graph, wish to embed Dublin Core information in an HTML5 page, or are attempting to plot the relationships between pages, use RDFa.
For everything else, use microdata.
A Brief Overview
Adding microdata to web pages allows search engines to better understand and categorize your content while associating it with related data such as thumbnail images, author and summary information. Sometimes this information will be immediately visible to the user, while other microdata will be used to enhance search listings and sharing on social networks while otherwise being invisible to the reader.
There are a few things to remember about microdata schemas:
Looking at the possibilities of a microdata schema such as BlogPosting can be somewhat overwhelming. It’s important to understand that you don’t have to use every last microdata property on every page.While there are a few required properties in each schema, most are optional, and can be added to the page as content grows and changes and you become more familiar with the format.
Content must be inside an appropriate container in order for a microformat schema to work.If you’re using HTML5 well, you’ll usually have these containers already in your markup: blog postings should be wrapped in
<article>tags, for example. On occasion you may need to add<div>and<span>elements, but these should be kept to an absolute minimum: you should use the existing semantic markup as a framework to build on microdata whenever possible.Content that does not appear on the page but needs to appear in microdata is marked up as metatags.Rather confusingly, these metatags are inside the associated content, and appear in the <body>, not the <head>, of the document.
Not every microdata schema is supported yet.You’ll find good search engine response to some (Recipes, BlogPostings) but not others, as Google hasn’t yet integrated them into its search algorthims. This will change over time.
Let’s take a look at a typical blog post that uses HTML5 for basic markup:
- <p>During the faith’s rapid military expansion out of Arabia and Persia th to 12th
Associated with some CSS and rendered on the page, the result will look something like the illustration at the top of the page.
The article already has good semantic structure, with the heading wrapped with a permalink to the article URL. However, we need to make that association concrete for search engines (“this isn’t a random link: this is the URL you should associate with this article”), as well as provide information on who the author is and the date of publication. Right now, that information is obvious to human readers, but not to search engines: the date in the article could be a reference to anything, and the author’s name is simply a string of characters.
Let’s start by creating a context for the microdata by adding itemscope and itemtype attributes to the parent article element:
All the microdata information we add must be within the context of this itemscope, i.e. within the article tag.
There are a few important points to note:
First, URLs we provide in microdata must be absolute, and contain the full URL. This includes the value for the image
srcattribute.Because the short description does not appear on the page itself, I have added it as a metatag.
I’ve only added to the markup in two places: once around the main content of the article itself, to demark the body text, and once around the author’s name. In both cases, this was necessary because no other semantic structure existed immediately around the content with which I could directly hook the
itempropattributes into.
Passing the completed code through Google’s Structured Data Testing Tool (formerly Rich Snippets) shows just how much more information and context microdata provides.
There is much more that we could do here, but I would suggest that this is the minimum amount of microdata that should be added to a typical blog post.