How to Markup Blogs with Microdata

This tutorial was made for Blogspot blogs, but you should be just fine following along and getting your blog marked up if you aren't using Blogger.


In your template, find the element that wraps your post content. To find it faster, do a search for <data:post.title/>. It might be an article or div element with the class post hentry. We need to tell search engines that this is a blog post using microdata.

<article itemscope='' itemtype=''>

The itemtype attribute value I'm using is for regular blog posts. If your blog is made up mostly of different types of articles, such as news articles or any other kind, I think you should use the generic itemtype attribute value for articles:

<article itemscope='' itemtype=''>


The next thing we markup is the post title. I have applied two attribute values, name and headline, to my title element because they both apply, but you can just use name.

<h1 itemprop='name headline'>


Next up is the body of the post. In your template, search for the div element that is wrapped around <data:post.body/>. Add itemprop='articleBody' to it; like this:

<div class='entry-content post-body' itemprop='articleBody'>


<p itemprop="description">Cats were made for memes like women were made for men.</p>

This lets you use any paragraph in your article as the description that appears when users share your content with the Google+ button.


<img itemprop="image" alt="Hersheys milk chocolate bar and milkshake combo" src="the-goods.png" title="Oh, my taste buds!"/>

This lets you use any image in your article as the image that appears when users share your content with the Google+ button.


Find the code used to display the post's author: <>. I tell search engines who is the author by adding rel='author' to the author profile link.

<a expr:href='data:post.authorProfileUrl' rel='author'>

It's not microdata, but you can use it in place of it and everything will be fine. If you prefer to use microdata, here is what you do:

<span itemprop='author' itemscope='' itemtype=''>
  <a expr:href='post.authorProfileUrl' itemprop='url'>
    <span itemprop='name'>

Keywords and Tags

Find the code that renders the post's labels(tags/keywords). We are going to wrap each label within span tags that will have itemprop='keywords'. Depending on your template, there might be two conditions in which a label is printed.

<b:loop values='data:post.labels' var='label'>
  <b:if cond='data:label.isLast != "true"'>
    <a class='tag' expr:href='data:label.url'>
      <span itemprop='keywords'>
    <a class='tag' expr:href='data:label.url'>
      <span itemprop='keywords'>

The first condition checks to see if the label it is printing is not the last one. If it isn't, then that label will have a comma to separate it from the rest. If your template has that condition, you need to add the span tags twice exactly like it did.


I'll be updating this post as I understand more about's microdata. I don't like the lack of examples and vague explanations for using it.

I have a few things to say about improving and would have mentioned it all right here, but I think that it is best that I tell them about it instead. If you understand this and would like to add to this post, I'm all ears.


14 thoughts on "How to Markup Blogs with Microdata"

    1. Amit Mb 3/25/2012

      You got a new subscriber. Great to see some unique content being published here unlike thousands of fluffy blogs out there...

  1. alejandro villamarin 12/19/2012


    Great post, but I can't seem to be able to apply it to my Blogger template. I can't find or any of the tags you mention in my template. For instance header title section in my template is something like:

    Group description="Post Title" selector=", h4, a">
    Variable name="post.title.font" description="Font" type="font"
    default="normal bold 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 22px Droid Sans"/>
    Variable name="post.title.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#990000"/>

    Any idea how to include meta descriptors in this kind of tags?


    1. Shawn R. Post author 12/20/2012

      1. Some of your tags are different from mine. Your blog uses the h3 tags for it's post titles and div tags to wrap it's posts. All the tags I'm talking about are located in the body section of your template, not in the head section.

      What you showed me are the skin tags—the ones that control the look of the post title. Your post title tag should look something like: <h3 class='post-title entry-title'>.

      Try taking pieces of the examples when you are searching, like search for the class: "post-title entry-title" or "entry-title" and find the match that's within the <h3> tag, then simply add the microdata.

      2. You want to know how to use itemprop="description", right? Normally, you'd add it to a paragraph element somewhere in the body of your post, but Blogger doesn't use them and even if you added one, it would be removed when you switch from HTML view, so you'll have to wrap the paragraph you want to use with <span itemprop="description"></span>.

      I'll add it in the tutorial later.

  2. alejandro villamarin 1/02/2013

    Okie dokie, makes sense. I think I'll swap to another template that uses same tags as yours, overall is cleaner. Something like this one: Thanks for the help Shawn, this is a great article!

  3. Satya Prakash 3/14/2013


    I am reading about MicroData and got your post. Good one as it seems when I read few paragraphs from top.
    When I see your output on richSnippet tool of Google then I found that "url" is not correct. Date is coming in the place of that.

    1. Shawn Post author 3/14/2013

      Nothing seems to be wrong. Before, it would show the link, but now it shows hypertext. Their snippet tools isn't perfect—as far as I can see.

  4. The Sane 12/09/2013

    Man Thanks a bunch for the post... Will definetly try this out when i get out of this furnace and in ease... !! !


Leave a reply