Recently Google announced that the +1 button now lets visitors share your website pages to their Google+ profile. If someone wants to start a conversation about your content, its easy for them to do so, just like Facebook Social Share button.
Just like how Facebook uses OpenGraph Protocol enables you to integrate your Web pages into the social graph. Google is using OpenGraph and schema.org Rich Snippet mark-up to build rich annotations for your pages. The new inline annotations help increase engagement after users see a friends recommendation right on your page. You can use +Snippets to customize the Title, Thumbnail Image and Description that appear when your content is shared.
Customize +Snippet
<!-- Update your html tag to include the itemscope and itemtype attributes -->
<html itemscope itemtype="https://schema.org/Article">
<!-- Add the following three tags inside head -->
<meta itemprop="name" content="Your Page Title/Heading Goes Here">
<meta itemprop="description" content="Your Meta Description Goes Here...">
<meta itemprop="image" content="https://www.example.com/images/cool-image.png">
To add inline annotations, you need to update your +1 button code. Visit the configuration tool, select inline from the Annotation menu, and grab a new snippet of code. Both sharing from +1 and inline annotations are rolling out fully over the next few days.
Customize your +1 button
Copy and paste the following code into your site:
<!-- Place this tag where you want the +1 button to render -->
<g:plusone annotation="inline"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
After +1'ing a page, the user is given the option to share the page to Google+ via a displayed Share bubble. This share bubble (along with the resulting Google+ activity post) includes a preview, or +Snippet, that contains the page title, a brief description of the page, and a thumbnail image.
In case if you cant add the OpenGraph and schema.org Rich Snippet Google is using Meta "title" and "description" tags. If the page's element contains and tags, the +Snippet will use their content attributes for the title and description, respectively. For the thumbnail image, the sharebox will attempt to find a suitable image on the page.
Note: The logic that fetches the +Snippet data respects cache-control directives, so changes to your page may not immediately be reflected in the +Snippet.