Google introduced the +1 button to the whole world on March 28th 2011 and today we can see it almost everywhere in the internet.
Even bloggers that are using Blogger have +1 buttons on their blogs but unfortunately many didn’t know how to make +1-friendly annotations or markups on their blogs. Correct +1 annotations and markups are important because they can help visitors properly populate their +Snippet previews and of course share our URLs with the right kind of information. If you are wondering what +Snippet is all about, it is what visitors and their friends see after they had shared our blogs or any one of our blog posts through Google+.
According to Google, their +Snippets grab details about the target URLs from one of the following ways:
- Schema.org microdata markups
- Open Graph protocol markups
- Meta ‘title’ and ‘description’ tags
- Wild guess – Believe me, you don’t want to know this!
For bloggers that using Blogger and have the habit to manually populate their meta tags with tricks such as the one shown down below, their +Snippets would look pretty nice on Google+. But what if you have hundreds and thousands of blog posts? Would you be willing to manually describe each meta tag, one by one?
<b:if cond='data:blog.url == "http://wtf.blogspot.com/2011/08/blabla.html"'>
<meta content='wtf, wtf' name='keywords'/>
<meta content='wtf wtf wtf' name='description'/>
</b:if>
Some smart (but clueless) bloggers had also placed Open Graph protocol markups on their blogs but by placing Open Graph metatags within the <body> and </body> section, they unknowingly put their blogs in jeopardy!
To be honest, so far I haven’t seen any good, practical examples of Schema.org microdata usages on blogs powered by Blogger. Today, I’m going to show you some examples that you can use on your Blogger-powered blog but before we do that, let’s see how Google’s +Snippet ‘handles’ some popular Blogger-powered blogs.
+Snippets of popular Blogger-powered blogs
Let’s take a look Amanda’s incredibly popular bloggerbuster blog. What happens after somebody shares her blog via Google+?
As you can see from the above screenshot, her blog’s +Snippet looks pretty nice. +Snippet is able to properly describe her blog but unfortunately Amanda’s thumbnail is just too small. It doesn’t look great at all! Wouldn’t you agree?
Now, what happens after someone shares one of her blog posts via Google+?
OMG! Everything is messed up! I can see that +Snippet has grabbed, combined her blog post’s title, posting date and label as part of the target URL’s description. Even the total of comments her blog post’s had garnered is there in the description! This is bad, really, really bad.
What have I learned after observing the above +Snippet examples?
Simple! I had no choice but to annotate some elements in my Blogger template with Schema.org microdata markups!
I don’t want people to see ‘garbage’ (like the ones you see in Amanda’s example) when they share my blog posts in Google+. Right now, I strongly feel that the perfect description that I should give to +Snippet are short snippets of my blog posts. No dates! No labels and certainly no comment numbers! Just plain snippets!
I also have to force +Snippet to grab the description of my blog when somebody shares my blog in Google+. In another word, people would immediately know what my blog is all about when they stumble upon it in Google+.
I also have to make sure that +Snippet grabs the ‘right’ image when somebody shares my blog in Google+. I do not have the ‘right’ image right now but I know that I have to create some kind of a logo (125x125), put it somewhere on my blog and mark it up with some Schema.org microdata.
Now that I know what I want, here is your chance to learn how to markup your Blogger blog with Schema.org microdata.
How to markup Blogger blogs with Schema.org microdata
In order to let search engines know that my home page URL leads them to a Blogger blog, I have to annotate the first element (right after <body>) in my Blogger template with Schema.org microdata markups (colored in red). To be safe, I also apply some Blogger conditional tags to the same element. Here’s one example.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='tab' itemscope='' itemtype='http://schema.org/Blog'>
</div>
<b:else/>
<div id='tab'>
</div>
</b:if>
In order to force +Snippet to grab the description of my blog when somebody shares my blog in Google+, I have to rely upon some Blogger conditional tags and markup my blog’s description with Schema.org microdata. An example is shown down below, pay attention to the Schema.org microdata markups, purposely colored in red.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<p class='description'><span itemprop='description'><data:description/></span></p>
<b:else/>
<p class='description'><span><data:description/></span></p>
</b:if>
In order to force +Snippet to use my blog’s logo when somebody shares my blog in Google+, I also have to rely upon some clever use of Blogger conditional tags and of course mark it up with Schema.org microdata. Here’s the example.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<p align='center'><img alt='HomeBiss logo' border='0' itemprop='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ5kOgU_UIpO44inxYKGYN7331Xx4pbfzgoGW8vICUZ4UrBjaz1StmEyOl_T_lrMjXXwbn5rgShypDVwdjtN3M51TA7mVxZzuDLJPa4lFByFmfZX8oNMPIcMR8Uwt0poZ7j2eh9V1M4Jw/s125/HB-logo.jpg' title='HomeBiss logo' width='75'/></p>
<b:else/>
<p align='center'><img alt='HomeBiss logo' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ5kOgU_UIpO44inxYKGYN7331Xx4pbfzgoGW8vICUZ4UrBjaz1StmEyOl_T_lrMjXXwbn5rgShypDVwdjtN3M51TA7mVxZzuDLJPa4lFByFmfZX8oNMPIcMR8Uwt0poZ7j2eh9V1M4Jw/s125/HB-logo.jpg' title='HomeBiss logo' width='75'/></p>
</b:if>
In order to let search engines know that my blog posts are indeed blog posts, I have to annotate the element that wraps or contains my individual blog post with Schema.org microdata markups. Mine is an HTML <div> tag and I think this is consistent with other Blogger-powered blogs too. Here’s what I had done to mine.
<div id='main-wrapper' itemscope='' itemtype='http://schema.org/BlogPosting'>
In order to force +Snippet to grab snippets of my blog posts whenever somebody shares one of my blog posts in Google+, I also have no other choice but to rely upon Blogger conditional tags once again. The example is shown down below and don’t forget to take a look at my Schema.org microdata markups.
<b:if cond='data:blog.pageType != "item"'>
<span><p><data:post.snippet/></p></span>
<b:else/>
<span><p itemprop='description'><data:post.snippet/></p></span>
<b:if>
What happens after I markup some elements in my Blogger template with Schema.org microdata?
Here is what people would see if they want to share my blog in Google+.
Here is what people would see if they want to share any one of my blog posts in Google+.
Nice, isn’t it!? Just the way I want it to be! :)
Conclusion
It is entirely possible to markup Blogger blogs with Schema.org microdata. It is also entirely possible to give +Snippet the right kind of information and that will help bloggers that are using Blogger look so much better in Google+.
The examples that I have shown you just now are just the tip of the iceberg. We have so much more to explore and I strongly encourage bloggers to study every single documentation Schema.org has on their website. Don’t forget that Schema.org is an initiative put together by today’s top search engines!
RSS
25 comments:
how to set it up in template?
hihihi
ty, your article so usefully?
nice to meet you ☺
Beben,
It's nice to meet you too. :)
I can help a little bit but first you must give me a few things to start with:
1. The URL of your blog and
2. What do you hope to accomplish with Schema.org's microdata markups?
Once you give me the answers, I can start looking for some solutions for you. :)
Beben,
I have updated this post with a few more information. Hope it is now much more useful to you. :)
1. How to insert the code microdata snippet into the blog? (where exact location of the coded)
2. Any sepcial order to do share on google+
here my screenshot pos side on google+, after i share my post there
http://i44.tinypic.com/2lcshhy.png
zzz -__________-"
Beben,
Nobody could say for certain where you should put your Schema.org microdata markups since each blog is unique. I can only provide you with some examples but at the end of the day , it is you that have to make the decisions.
Based from what I have seen from your screenshot, I can say that your blog is not +Snippet-friendly. You have no choice but to markup some elements in your blog with Schema.org microdata. I would like to help you but I need to have a look at your full blog template. Can you send it to me?
wek's not +Snippet-friendly
hmmm...ic ic ic...
but i'm tested in snippet test, is good :D
learn harder :)
ty ty ty ☺
Beben,
If you are hesitant of sending a copy of your Blogger template to me, then wait for my next post. I'm going to share some tips with everybody. Stay tuned! :)
i'm reading here...
https://developers.google.com/+/plugins/+1button/
but not understand...wkwkwkkwk
Hi Homebiss,
I must congratulate you for such a useful solution to the snippets display problem. I was eagerly searching for a solution when I happened to land at your blog.
I skipped the markup code for homepage because it is working fine by default however I added the markup schema.org code for blog posts just above data:post.body
Everything is working fine except for the thumbnail image. The image that is being fectched is the header background for all posts and I tried hard to solve it but failed each time. Would highly appreciate if you could guide me on how to do solve the image issue now. :)
Would be a pleasure to receive a guest post from you on this topic. I am sure everyone will find your tutorial helpful :)
Mohammad,
Thank you for visiting. :)
I have looked into your problems and feel that there are several possible solutions that you can use to solve your problems. I have mentioned one in my latest post. Please check it out.
Thank you for your guest blogging offer. I will contact you one day to get more details about the offer. :)
As a web-site possessor I believe the content material here is rattling magnificent , appreciate it for your hard work. You should keep it up forever! Best of luck.
Website Design NY,
Thank you for your compliments. :)
I think schema.org should have better documentations. I am having trouble understanding what to use and what to do.
Hm...should I use Article or BlogPosting or what? That is the least of my concerns because it looks like it really doesn't matter.
Until they explain themselves better, I'll stick to the next thing on the list.
Shawn,
Thanks for visiting. Yes, I tend to agree with you but search engines such Google, Yahoo and Bing are constantly updating Schema.org. It will only get better and better.
If your site is a clear cut blog (Blogger, WordPress etc), BlogPosting is the declaration that you should apply on your blog posts.
web design Fresno,
Thank you! :)
great site.
can't we add star rating using Schema.org microdata?
Great post, but you would want to change itemscope="" to itemscope="itemscope". That is because some browsers only look at the presence or absence of an attribute (resulting in itemscope="" meaning "true") while others (especially any that use XPath) look at the value of the attribute (resulting in "false"). See www.html-5.com/definitions/#boolean-attribute
Rob,
Thanks for the tip! :)
I will look into it when I have the time. Thanks again.
I`am looking for some simpler example on how to implement them. Any suggestion ? The one I used ca not produced any different in search result. Please kindly review my snippet data.
hey plz help me also , i am not getting where to insert these things....
Hi nice post. I'm still trying to get a hang on this... Perhaps you could help me. I was wondering if there is a way I could create a snippet that shows a list of items from one of my blog posts?
This is the clearest article about schema.org and blog! Congrats! :)
This is fantastic and very helpful. Can I ask a question, though? I need to know where to put all this code.
Say, I want to achieve all of the points you made above. (It might help if you numbered them, actually.) I want to force +Snippet to grab the description of my blog, and force +Snippet to use my blog’s logo when somebody shares my blog in Google+, and let search engines know that my blog posts are indeed blog posts, and force +Snippet to grab snippets of my blog posts whenever somebody shares one of my blog posts in Google+.
Can you tell us where to put that code? I know everyone's template is different. I use one of the Awesome, Inc templates, on Blogger.
My question is, do you stack this code one on top of the other? Is there a code that we look for and then insert the lines of code you've provided? I don't mean to ask dumb questions, but I have been trying to make this work since March. MARCH. It is August now. I can't believe that Google tutorial didn't mention how crucial markup is. They all mention Google authorship and linking to your Google+ page, but that's it! Other articles make it seem like markup is optional! It has not been for me.
Thank you in advance for your help. My url is www.thecitydweller.me. I have been able to try out two of your suggestions above.
~Beth
Very helpful post! It's been difficult finding information on schema.org markup for Blogger.
Post a Comment