iHiD

Want your blog posts to look a little bit special in Google search results? Maybe something like this?

Hello, schema.org!

Google has supported rich snippets for a while now and have recently partnered with Microsoft and Yahoo to create schema.org, a method of providing rich markup that search engines understand. Best of all, it's really simple to use.

It took me less than 10 minutes to get this blog marked up and looking great. Here's my HTML before...

<div id="blog_post">
    <h2>Post Title</h2>
    <div>Written by Jeremy Walker on Tuesday May 17th 2011</div>
    <div>Content...</div>
</div>

Schema.org has markup for lots of different types of pages. We are specifically interesting in the BlogPosting schema. We'll tell the search engines that this is the schema we're using by adding itemtype and itemscope attributes to our blog post element:

<div id="blog_post" itemscope="" itemtype="schema.org/BlogPosting">
<!-- -->
</div>

Next, we add itemprop attributes for the title and content. We'll use both the name and headline property for the header, and the articleBody property for the content:

<div id="blog_post" itemscope="" itemtype="schema.org/BlogPosting">
    <h2 itemprop="name headline">Post Title</h2>
    <!-- -->
    <div itemprop="articleBody">Content...</div>
</div>

The last bit is slightly trickier but the most powerful. We want to specify the author and the date. This gives us a nice photo and the "written 1 day ago". Google has a good page on how to add author information to search results. There are two steps involved. Firstly, add an itemprop of author, with it's own itemtype and itemscope. This creates a new scope for the author. We then add a new span with the itemprop of name. In here we add a link to the the author's Google+ profile, with an attribute of rel="author" and a itemprop of url.

For the date, we use the HTML5 time tag with a itemprop of datePublished and a datetime attribute.

The final HTML looks like this...

<div id="blog_post" itemscope="" itemtype="schema.org/BlogPosting">
    <h2 itemprop="name headline">Post Title</h2>
    <div>
        Written by
        <span itemprop="author" itemscope="" itemtype="schema.org/Person">
            <span itemprop="name">
                <a class="https://plus.google.com/111007558771439626078" itemprop="url" rel="author">Jeremy Walker</a>
            </span>
        </span>
        on
        <time datetime="2011-05-17T22:00" itemprop="datePublished">Tuesday May 17th 2011</time>
    </div>
    <div itemprop="articleBody">Content...</div>
</div>

Use Google's testing tool to make sure your markup's correct and push your changes live. Give Google a chance to re-browse your page and update their index, and over the next few days you should start to see some nice new search results.