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 you less than 20 minutes to get your blog Post marked up and looking great. Here's your HTML code before... Marking ..up..
<div id="blog_post">
<h2>your Post Title</h2>
<div class="byline">
Written by Om sir on Tuesday May 17th 2011(AUTHOR NAME & date of published )
</div>
<div class="content">
your post articles 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://linkedin.com/in/ommaurya" itemprop="url" rel="author">Om Maurya</a> </span> </span> on <time datetime="2011-05-17T22:00" itemprop="datePublished">Tuesday May 17th 2011</time> </div>
<div class="content" itemprop="articleBody">write your Content...here
</div> </div>
and see this Below example too:
Following is Guidance about how to Markup your Blog post using Microdata format of Schema.org :
Html code guidance with Microdata Schema markup :
<div class="post" itemscope itemType="http://schema.org/BlogPosting">
<h2 class="post-title" itemprop="headline">
Post title goes here
</h2>
<div class="introduction" itemprop="description">
Write Short description about your post in one single sentence
</div>
<div class="date-header">
<meta itemprop="datePublished" content="2011-06-02T16:00Z"/>
Write date and time here for example given below:
6/02/2011 10:00:00 AM
</div>
<div class="post-body" itemprop="articleBody">
Write your post content here
</div>
<div class="post-author" itemprop="author">
<span itemprop="author" itemscope="" itemtype="http://schema.org/Person">
<span itemprop="name">
<a href="https://linkedin.com/in/ommaurya" itemprop="url" rel="author">Om Maurya</a>
</span>
</span>
</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.
0 comments:
Post a Comment