Header_image
Jeremy Walker

Software Developer & Social Entrepreneur

Markup your blog using schema.org

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 class="byline">Written by Jeremy Walker on Tuesday May 17th 2011</div>
    <div class="content">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="http://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="http://schema.org/BlogPosting">
    <h2 itemprop="name headline">Post Title</h2>
    <!-- -->
    <div class="content" 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="http://schema.org/BlogPosting">
    <h2 itemprop="name headline">Post Title</h2>
    <div class="byline">
        Written by
        <span itemprop="author" itemscope="" itemtype="http://schema.org/Person">
            <span itemprop="name">
                <a href="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 class="content" 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.

Share This Post

Comments

73816092d65139d90d277ddaac64f6a6

Londona Gamachex

Great paintings! This is the type of info that are supposed to be shared around the web. Shame on the search engines for not positioning this put up higher! Come on over and consult with my website . Thanks =)

Post a Comment

I'd love to hear your thoughts :)