Structured Data markup on blogger website with Google logo

On January 15, 2015 Google updated the Structured Data testing tool to help webmasters to fix and improved their website markup. Google also said on their site that having Structured Data on your website helps your articles/posts appear on search result. So today I would like to teach you on how to put a complete Structured Data markup on your blogger website.

You need to check first your website here to see if your website already had a Structured Data markup.

Reminder: You should backup first your template before making any changes.

To put a Structured Data markup, we should edit our template.
Go to your blogger dashboard->>Template->>Edit HTML.

Adding root class name hentry

In order for us to implement the complete Structured Data hatom on our blogger website the first thing we need to do is to implement first the root class name hentry on our template. Do the things below to add it.

Find this code <div class='post'>, just add hentry after the text post. After that it will look something like this <div class='post hentry'>. In some cases you will find multiple <div class='post'> on your blogger template, just do the same thing, add hentry to all <div class='post'> codes.

Adding an entry-title

Find this code class='post-title. Similar we did on top, just add entry-title after the text title. Now it will look like this class='post-title entry-title'. The same on top you will find two or more class='post-title on your template just do the same thing we did.

Adding an entry-content

Find this code <div class='post-body then add entry-content right after the text body. Again you will find it multiple times so just do what we did previously.

Fixing errors on updated and author

Fixing Updated: To fix error on updated find first this code <data:post.timestamp/>. Just before that code you will find span class if none just copy the codes below for your refference.
<span class='updated'><data:post.timestamp/></span>
The important keyword on top codes is the updated. It will tell to Google crawler the date you update your post. You may also tell to Google crawler when you published your blog posts. Below is the complete codes for these.
<span class='updated'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></span>
Fixing Author: Find this code class='post-author, after the text author you must insert this text "vcard". After that it will look some thing like this class="post-author vcard". After that find this code <data:post.author/> then replace it with the codes given below.
<span class='fn author'><data:post.author/></span>
I know sometimes you can’t find the codes you need to edit because you have a different template. You are free to ask help on comment box, but make it sure you will add nofollow attribute if ever you need to put a link.

2 comments:

  1. i cant find <div class='post' on my blog template please help

    ReplyDelete

NOTE - Every input is always appreciated. However, comments are always reviewed and it may take some time to appear. Always keep in mind URL without nofollow tag will consider a spam.