How to revise markup according to schema.org

Question

I have blog portal and using an already paid theme from themeforest. I am concerning about SEO nowadays and realized schema.org. But i have a confusion about examples and mine markup.

<!--MAIN SECTION-->
 <div class="main post-page">
   <div class="row">
     <!--CONTENT--> 
      <div class="col-md-9 col-sm-12 clearfix">
        <!--POST-->
         <article class="post row mid" itemscope itemtype="http://schema.org/BlogPosting">
          <div class="img col-md-3 col-sm-6 col-xs-12">   
           <img src="example.jpg" itemprop="image" >
            <div class="col-md-8 col-sm-6 col-xs-12">  
              <div class="info">
                <h1>{{$post->title}}</h1>
                  <div class="data">
                    <p class="details"><h4>Author : John Doe</h4></p>
                  </div>
                     <div id="text-post">{{  $post->content()  }}</div> 
               </div>
             <div>
         <!--END POST-->
         <h3>About Author</h3>   
          <article class="row mid member" itemscope itemtype="http://schema.org/Person">
           <img src="/author.jpg" alt="thumbnail" />
            <div class="info">
             <h1>John Doe</h1>
              <p class="text">{{ $post->author->biography  }}</p>
            </div>  
           </article>.....

But when i check the example in google

<div itemscope itemtype="http://data-vocabulary.org/Person"> 
  My name is <span itemprop="name">Bob Smith</span> 
  but people call me <span itemprop="nickname">Smithy</span>. 
  Here is my home page:
  <a href="http://www.example.com" itemprop="url">www.example.com</a>
  I live in Albuquerque, NM and work as an <span itemprop="title">engineer</span>
  at <span itemprop="affiliation">ACME Corp</span>.
</div>

it has a lot of <span>...</span> elements while mine does not have. Do i have to rewrite all my markup again or can i use my markup and add schema.org elements from there.

Thank you.

Answer 1

You should be able to incorporate the various property tags within your markup, such as like this:

<!--MAIN SECTION-->
 <div class="main post-page">
   <div class="row">
     <!--CONTENT--> 
      <div class="col-md-9 col-sm-12 clearfix">
        <!--POST-->
         <article class="post row mid" itemscope itemtype="http://schema.org/BlogPosting">
          <div class="img col-md-3 col-sm-6 col-xs-12">   
           <img src="example.jpg" itemprop="image" />
            <div class="col-md-8 col-sm-6 col-xs-12">  
              <div class="info">
                <h1 itemprop="headline">{{$post->title}}</h1>
                  <div class="data">
                    <p class="details"><h4>Author : John Doe</h4></p>
                  </div>
                     <div id="text-post" itemprop="articleBody">{{  $post->content()  }}</div> 
               </div>
             <div>
         <!--END POST-->
         <h3>About Author</h3>   
          <article class="row mid member" itemprop="author" itemscope itemtype="http://schema.org/Person">
           <itemprop="image" img src="/author.jpg" alt="thumbnail" />
            <div class="info">
             <h1 itemprop="name">John Doe</h1>
              <p class="text" itemprop="description">{{ $post->author->biography  }}</p>
            </div>  
           </article>.....

I'd also recommend including the date within your markup as well.