How to fix Error Missing required field name fn and Hcard

Quite lately I have been using Structured Data Testing Tool to check how Google extracts the structured data from my page. For those who don't know about Structured Data Testing Tool, it is a tool that gives you a preview of how your blog page would look in the Google search results. The important part of Structured Data Testing Tool is that you have to set Google authorship for your blog page by connecting with your Google profile.

After setting up your Google Authorship to your website by either linking your content to your Google Profile Page or by a verified email address , go to Webmaster Tools -> Structured Data Testing Tool ->

http://www.google.com/webmasters/tools/richsnippets?

Now, enter you website or blog URL and click "Preview". You should get something like the below image wherein your Authorship to your webpage has been successfully retrieved.

Google Structured Data Testing Tool

But, some time it happens that you get error messages like the below on your Extracted structured data,

author: 

Error: At least one field must be set for Hcard.
Error: Missing required field "name (fn)". 

(or)
Error: Missing required hCard "author".

How to fix Error Missing required field name fn and Hcard

Follow these two steps and you can get rid of the above errors within minutes.

Step 1:  Go to Blog Layout -> Edit Blog Post -> Post page options -> Tick " Posted by" option along with date and time.

Step 2:  Go to Edit HTML -> Search for "post-header-line-1" using CTRL+F.
Below the  "post-header-line-1" paste this, 

<span class='post-author vcard'>

      <b:if cond='data:top.showAuthor'>

        <data:top.authorLabel/>

             <b:if cond='data:post.authorProfileUrl'>

             <span class='fn'>

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

             <data:post.author/>

             </a>

             </span>

             <b:else/>

             <span class='fn'><data:post.author/></span>

             </b:if>

     </b:if>

</span>

Explanation:

The above code is the Blogger's default code for displaying author name on your Blog posts. When you untick posted by option in step 1 (or) if your code gets messed up while using custom template, then you get erroe message as Missing required field name fn and Hcard. By following both the steps above, the error gets fixed and you get to see your name being displayed under author. 

Final Result:
Now, when checking in Google structural data tools after the above required corrections, you should see a value for fn which is your name under Extracted structured data ,

published:	2014-03-19T17:40:00-07:00
author:
fn: Umamaheswari Anandane

All tutorials blogged here are from personal experiences with 100% success rate. Enjoy!