When Google rolled out Google+ a couple weeks ago, being the fanboy that I am (according to others), I quickly set up my profile. And then, being the self-promoter that I am (according to myself), I began trying to optimize my site content for sharing within the service.

Having spent time earlier this year on optimizing the Graphicly site (and my own) for Facebook’s Open Graph protocol, I hoped that Google+ would take advantage of this existing code infrastructure. Sure enough, Open Graph markup comes over relatively smoothly, but there were a couple surprises that I figured warranted a more detailed write-up.

First, you should note that there are currently 2 means of 3rd-party site content showing up in Google+:

1. a Google+ Stream post with a shared link, or
2. a Google+ +1 post.

So, how do these two posts work, and how do you get your content optimized as such? (Of course, I should note, there is the expected detailed API docs from Google for implementing the +1 button, but no information currently within on how to structure your information for best results in Google+.)

Anatomy of a Google+ Stream Post

The standard view in Google+ is that of the Stream. (It’s somewhat akin to Facebook’s news feed or Twitter’s Timeline.) While it’s contents are not as complex in structure as Facebook’s, you can attach a link to any comment, which then loads a preview beneath the post. Said post is constructed as follows:

A. Favicon is the 16×16-pixel graphical icon hosted at yoursite.com/favicon.ico (or whatever is specified in your site’s <link rel="shortcut icon" ... /> element).

B. Object Title is generally the name of your page, and is originated from the <meta property="og:title" ... /> element first, and the <title ... /> element if no such meta element exists.

C. Image is the display of the content designated in the <meta property="og:image" ... /> element. Important note: only images that are 101px or greater in width and 120px or greater in height will appear; if your image is smaller in dimension, the image will not be considered for the post and the Description text will fill the entire width of the post.

D. Description is the content specified in your site’s <meta property="og:description" ... /> element first, and the <meta name="description" ... /> element if no such meta element exists. The description is capped at 201 characters, after which an ellipsis is added to suggest additional content not shown.

Anatomy of a Google+ +1 Post
A +1 post is unfortunately somewhat buried in Google+; users who click on a user’s profile can then click on their “+1’s” tab (when available, to the right of the main profile photo and beneath the user’s name) to see what content they’ve “big upped.” The post is largely similar in content to the Stream post, but somewhat different in terms of display.

A. Image is the display of the content designated in the <meta property="og:image" ... /> element. Important note: only images that are 101px or greater in width and 120px or greater in height will appear; if your image is smaller in dimension, the image will not be considered for the post and the Description text will fill the entire width of the post.

B. Object Title is generally the name of your page, and is originated from the <meta property="og:title" ... /> element first, and the <title ... /> element if no such meta element exists.

C. Site URL is the second- (and, when relevant, third-_ level domain of your site. It’s inclusion in the display is somewhat odd given its visual prominence via color and its lack of precision (not the full URL to the +1’d object), but it appears to be a throwback to Google’s search results display.

D. Description is the content specified in your site’s <meta property="og:description" ... /> element first, and the <meta name="description" ... /> element if no such meta element exists. Somewhere between 130 and 140 characters of the description are shown here; the exact number appears to be imprecise, as the display doesn’t chop words in the middle leaving a couple incomprehensible characters. However, there is no trailing ellipsis, resulting in sometimes awkwardly abrupt snippets.

Of course, beyond making certain (and testing) each page in your site’s code has the appropriate markup described above, you should also be sure to include Google’s new optimized asynchronously loading +1 button. While Google+ currently segregates its posts, you can certainly see a day coming where +1’s will appear alongside Stream posts.

As a final note, it’s great to see Google leveraging sites’ existing investment in Facebook Open Graph markup. As Google+ matures, it will be interesting to see what other Open Graph tags are also supported, whether Google works actively to extend the Open Graph protocol, and what other developer/publisher tools become available to ease integrations.

Update: Google just posted an article on how to specify which page elements should comprise the headline, image, and description in the +1 post.