Monday 19 June 2017

Schema for BlogPosting

Posted By: Om Maurya - 05:51
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