Schema.org 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 Schema.org 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 Schema.org 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='http://i51.tinypic.com/2bvgap.jpg' 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.

Schema.org 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='http://i51.tinypic.com/2bvgap.jpg' property='og:image'/>
</b:if>

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 Schema.org’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; + data:post.id'>
<data:post.body/>
<div style='clear: both;'/>
</div>

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

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

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! :)