How to add Microdata to markup structured data for blogs

Microdata is a set of schema rules which can directly be added to HTML code and in turn helps search engines analyze and interpret your blog's content more effectively. This also helps search engines to display more meaningful search results(rich snippets) such as blogger name, product ratings, video info directly in the search results. Just search 'veg pizza' on Google and see what rich snippets means, following is one such search result:

How to add Microdata to markup structured data for blogs1

So, what is Schema ?

A direct quote from schema.org
Schema.org provides a collection of shared vocabularies webmasters can use to mark up their pages in ways that can be understood by the major search engines: Google, Microsoft, Yandex and Yahoo!
Simply put - Schema is a set of rules in the form of HTML markup which are being collaboratively defined by search engine giants so that they can be standardized. There is a separate set of Schema definition for Articles, Products, Person, Movie and many others. Check out schema.org for more details. Let us quickly check out a simple schema for a blog / article:

<article itemscope itemtype="http://schema.org/Article" class="article_content">
<h1 itemprop="name" class="article_title">Article Title Goes here</h1>
<p itemprop="description">A long but short description goes here ....</p>
<span itemprop="datePublished" content="2014-12-30"> 30 December, 2014 </span>
- authored by <h4><a rel="author" href="/member/profile/1/pankaj-pal">
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Pankaj Pal</span>
</span>
</a></h4>
<a itemprop="url" href="/articles/view/71/Special-variables-in-Perl-with-examples">Read full article </a>
</article>

The highlighted snippet in the above HTML code is the markup we are interested in. Although self-explanatory, few schema attributes need explanation:

  • itemscope: used with container HTML element which contains all the information related to that entity - in our case it is the HTML element - <article>
  • itemtype: defines the type of an item in the form of a url, e.g. http://schema.org/Article defines the specific schema and its properties for Articles.
  • itemprop: used to markup a particular property of an item. e.g. itemprop="name" marks the name of the article, itemprop="datePublished" marks the date when the article was published. Generally the value for itemprop will be picked up according to the HTML element, e.g. value of href if used with <a> element, value of src if used with '<img>' element. However, at times itemprop attributes may require value e.g. itemprop="datePublished" requires the date in a specific format and needs to be provided with content attribute within the same HTML element.
Note: We can have nested items too, e.g. in above example item - Article contains yet another item - Person which is nothing but the item that is used to denote the author of this article.

How to markup structured data using Microdata ?

Now, that we have a basic understanding of the Article schema, the most important step - How to add this Microdata to your blog or article. There are two ways to do it:
What I would suggest is to do a mix of both. Google has a cool tool that speeds up this process and we are going to use. Assuming that I want to markup structured data for my article on Perl Special Variables , this is what I get if I go here and type the url of my article and select Articles from the given set of choices.

How to add Microdata to markup structured data for blogs2

Click on 'Start Tagging' and you will be presented with a screen shot of your webpage and a list of structured data attributes for Article. Now, all you got to do is to just select the proper text from your webpage screen shot and choose the proper attribute. Check out the following image where I am setting the 'name' attribute of my article.

How to add Microdata to markup structured data for blogs3


Once you are done with all the attributes, click on red 'CREATE HTML' button visible on the top-right corner. This will give you the modified HTML code as shown below. All you need to do is to use this code as a reference and modify your actual website accordingly.

How to add Microdata to markup structured data for blogs4

Once you have the basic markup done, you can have a look at Schema definition http://schema.org/Article and add any additional attributes. Mostly the markup generated via the markup helper tool should be sufficient, but just in case you want to do something extra compared to your competitors, you should have a look at the complete list of attributes from schema.org.

Validate your structured data markup using Microdata

Once all the structured data has been tagged via Microdata, its time to validate your hard work. Go to Structured Data Testing Tool and type in your article's url. If everything went well, you should see some structured data in the output - something like this:

How to add Microdata to markup structured data for blogs5

Go a step further with specific Microdata schema

Article is a generic item, you can experiment more by choosing a specific type:
Thats it !! All that remains now is to give some time to search engine crawlers and check out your structured data being listed as rich snippet in search results. Be sure to check out the Schema from time to time and experiment with your Microdata accordingly. Hope this gets you going, please revert back with your suggestions and feedback.

comments powered by Disqus