microdata markup suggestions for Melvin’s TheEmoLab Blogger-powered blog

In the last few weeks, I have been documenting personal successes and failures in annotating my blog with microdata markups. I believe I have achieved plenty but I’m not yet ready to share everything here on this blog due to certain unmentionable reasons.

Some visitors to this blog had taken notice of my experimentations and one of them had even asked me to look into his Blogger template and make some microdata markup suggestions to improve the appearance of his blog on Google+.

That one person is also a blogger and his name is Melvin Corney. He is the blogger behind TheEmoLab and his blog was launched in May 14th 2010. On November 12th 2011, he left a comment on one of my blog posts:

I have little knowledge of this can i also send my template to you and can you tell me where and how to place the tags so that google+ and searches grab the right content thanks in advanced.

I told him yes and that also means that I have to find the time to help him despite my busy schedule. Alright, before I do that, let’s see how his blog appears in +Snippet.

Irrelevant thumbnails in +Snippet (Google+)

As you can see from the above screenshot, Melvin’s blog appeared pretty nice on +Snippet and I believe it will look pretty good in Google+ too. +Snippet nicely grabbed the logo of his blog after receiving the heads up from Melvin’s Open Graph protocol meta tag (as shown down below).

<meta content='' property='og:image'/>

+Snippet also nicely described Melvin’s blog, obviously after reading Melvin’s HTML meta tag description (as shown down below).

<meta content='Source For Almost Every Hack. Get awesome computer tips and tricks, How To tutorials, and best hacking tutorials.' name='Description'/>

So far, so good! But I believe all hell breaks loose after somebody shared either one of his blog posts in Google+. As you can see from the following screenshot, +Snippet ‘fails’ to provide a good description for his blog post and it also fails to identify the image that has been embedded with Melvin’s blog post as the best, related thumbnail image. Instead of the one that has been embedded in the blog post, +Snippet keeps on using the logo of Melvin’s blog and that is not at all related with the blog post that is about to be shared on Google+.

If you are also facing the same problem like what Melvin is facing here today, please do not get angry with +Snippet. :)

Alright, let’s see if I have any suggestions for Melvin. microdata markup suggestions for Melvin’s TheEmoLab blog

IMPORTANT: Please make backup copies of your Blogger template before proceeding!

I would suggest Melvin to wrap his Open Graph protocol og:image tag with the following Blogger conditional tags. This is to make sure that +Snippet will use his blog’s logo only when somebody wants to share his blog (home page) in Google+. By applying such conditional tags, the logo will also appear not only as the first thumbnail but also the best, related thumbnail image for his blog.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='' property='og:image'/>

After taking a closer look at Melvin’s Blogger template, I also discovered that there are two images that have been embedded and tagged with HTML img tags before the Blogger Blog Posts widget. I would suggest Melvin (the same suggestion I gave to Mohammad) to merge both images with his favorite image editor (I use GIMP!) and embed it in his HTML div ‘header-inner’ tag with CSS background-image property, not HTML img tag. Here’s an example but Melvin has to do some more tweakings to find the right fit for his new, merged header image.

#header-inner {
background-image: url("URL to new, merged header image");

Once completed, +Snippet should have no problems whatsoever in grabbing and identifying images that have been embedded in his blog posts as the best, relevant thumbnails.

Now comes the ‘controversial’ part and I leave this entirely up to Melvin. He can follow my suggestions if he wants to but he got to understand that’s ‘description’ property theoretically should be unique, not be populated with snippets of the main content (blog posts). However, to make life easier for Melvin and also to make things look nice on +Snippet and of course in Google+; it makes sense to use snippets as descriptions.

Melvin, this is entirely up to you!

I would suggest Melvin to find the following lines of codes in his Blogger template first.

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; +'>
<div style='clear: both;'/>

Once found, annotate a few lines with some microdata markups. Examples are shown down below.

<div itemscope='' itemtype='' class='post-body entry-content' expr:id='&quot;post-body-&quot; +'>
<span itemprop='description'><data:post.body/></span>
<div style='clear: both;'/>

Once completed, save everything and see how it looks like in +Snippet. If all goes well, your blog and your blog posts will look nice and proper whenever people share them in Google+.

Good luck! :)

Subscribe via RSS or Email:

Related Posts


TheEmoLab said...

Hello Saidul,
Great Article, Everything works fine now! Thanks to the genius in yourself. The only problems I encountered was adding the Schema Micro-data Markup and positioning my logo to display as a background-image. Adding the meta content was a breezes. But I will indeed spread the word about adding Schema Micro-data Markup to our blogs, with a link back to this post.
- Best Regards,
- TheEmoLab :)

Anonymous said...

TheEmoLab aka Melvin Corney,

Great! I'm glad everything works fine for you now and thanks for precious backlinks. Appreciate it! :)

Gadgets For Blogger said...

POSTED BY SAIDUL A SHAARI VIA GOOGLE+ AT TUESDAY, NOVEMBER 15, 2011 <<< how you Blogging from Google+ ??? can you tell me?

Anonymous said...

Gadgets For Blogger,

I think you got it all confused. I wasn't blogging from Google+ (the truth is there is a way to do it!). That one line of text you saw at the foot of every post is just a part of my Authoring experimentations. :)

Beben Koben said...

now it's my case, my thumbnail not relevant..zzzz
have to found where put this coded :D

Beben Koben said...

this is not worked for me....
very unique my template...xixixixi
harder learn \m/

Beben Koben said...

i'll have do this snippet.
and now is all good worked for my blog.
just try get one post URL my blog...hohoho
ty master \m/

Beben Koben said...

not yet...hihihi
bad on home page..wkwkwkwkwk
banghead banghead banghead

Beben Koben said...

100% worked perfect, like your blog now my snippet to google+ \m/

Anonymous said...

Beben Koben,

Congratulations! I can see that you struggled with it for a while but you finally made it in the end. :)

Beben Koben said...

The hardest part, just placing it the right place!
Actually it's only a matter of just installing tagging.

Thank you master ☺

Anonymous said...

Beben Koben,

No problem! :)

Beben Koben said...

i'm not do anything, and that changes again for me!!!
thumnb not relevant again...arghhh!!! confused >_<'

Beben Koben said...

clash with the header!
tomorrow good worked because, image in header broken links.
and that worked. after changes image, eeehhhh not worked anymore (thumbnail)
confused confused

Beben Koben said...

if i do manual add variable itemprop="image" in post side, that good work master.
like this
<img style="display:block; margin:0px auto 10px; text-align:center;" itemprop="image" src="" border="0" alt="" id="BLOGGER_PHOTO_ID_123654789521456369" />
that's good....zzzz

Anonymous said...

Beben Koben,

I'm having dinner right now. Let me spend the rest of the evening with my family first. Once I'm free, I'll take a quick look at your problems. Hang in there! :)

Beben Koben said...

There was indeed a problem in my template!

I'm not used HEADER attribute, but i'm used slideshow image jQuery plugin on header side.
And there are 3 pieces of the picture. The pictures take to snippet coded.
Any suggest for my trouble. Yesterday the code was already true.
The problem is in the picture on slideshow, I'm plug in the header side?

On CSS like it #slideshow img {WTF}

hehehe :D

Post a Comment

  • Commenters are encouraged to leave comments via OpenID but if you have problems in leaving one via OpenID, please refer to this excellent guide.
  • Comments that add tremendous value to the blog post will not only get approved but also will be personally tweeted (learn how!) by the blogger behind this blog, giving commenters the opportunity to get even more traffic and gain even more exposure to their sites or blogs.
  • Comments that have links in the bodies of comments will never be approved.
  • Preferably comments should be made in English but comments in other languages are also acceptable.