Google +1 button was introduced for webmasters to use it on their sites to being recommended across the web and become more transparent in the search results. As it involves with the Google+ social network, it has been adding more social features to improve the usage of +1 button for almost all users in addition to webmasters. We have discussed their previous addition Friend Annotations and HTML5 syntax in Add Google +1 Button for Blogger Posts. Now Google +1 button has got its new addition +Snippets and sharing capability. Let's find out how to deal and customize +Snippet.
If someone click +1 button on your site or page, earlier it would list particular page on their Google+ profile as a +1d item. title/link, description and image for specific +1d page will be generated automatically after crawling the page.
Now Google +1 button added with sharing feature. Whenever an user clicks on +1 button or if he/she already +1d and when hover on +1 button, the user will get a popup sharebox to share it on Google+ to start a conversation about the content. There is where the +Snippet feature actually pops in. When users share your content, they will able to preview the snippet they gonna share in sharebox. The snippet consists of image, title/link and description. The crawler will find metadata, Schema.org microdata, Facebook Open Graph tags or guess best suited values for those properties. So let's see how to customize +Snippet using either ways.
Metadata
Most probably you may have metadata specified on your blog. If your page has metadata specified, +Snippet will use Title and Description meta tags to fill in title and description to the share box. But for thumbnail image, it will find and use a suitable image from the page itself.
If you wish to customize your page title and description meta tags, read How to Customize the Page Title in Blogger and How to Make Use of the Description Meta Tag in Blogger.
Facebook Open Graph Protocol
You can use Open Graph tags on your site to instruct +Snippet to use title, description and image as specified. Unlike metadata, you can specify image for your page using Open Graph tags. But if you are satisfied and already using metadata for title and description, you can just implement Open Graph Image tag to specify image for a particular page. If you wish to implement Facebook Open Graph protocol, then read How to Personalize Your Pages using Open Graph Protocol in Blogger and add Open Graph title, description and image tags.
Schema.org Microdata
Google, Yahoo and Microsoft introduced schema.org to improve the web search with structured data markup schema to support by major search engines. Not only by +Snippet, but also major serach engines use schema.org microdata to create rich snippets in search too. Schema.org microformats let you specify pages with wide range of specific attributes. Basically for +Snippet feature, you should specify title, description and image using schema.org microformats.
Google recommends using schema.org microformats, but still schema.org microdata couldn't able to compatible with Blogger. So you have to depend on other two options we've discussed above. I will update this section whenever schema.org microformats able to work on Blogger platform.
Enjoy :-)
