Are there tags to specify the Google +1 story format in Google+ like og-meta for Facebook?

Asked 30/6, 2011 at 14:17 Answered 23/10, 2012 at 10:40

Solved facebook-like google-plus-one schema.org og-meta

With Facebook we have the Open Graph tags that allow webmasters to specify how the story is displayed on Facebook.

Is there something similar for the Google +1 button, that allows webmasters to specify the thumbnail image, description and title? Google+ seems to be ignoring the og-meta tags.

Example of Google's Profile +1 list, versus Facebook's wall

Seta answered 30/6, 2011 at 14:17 Comment(0)

From Google+ help docs, we now have an official answer.

Google uses schema.org microdata to generate rich snippets in search (and in Google+). There's a lot written about schema.org and how it relates to Facebook OpenGraph in these two links:

See: http://www.google.com/support/webmasters/bin/answer.py?answer=1211158 See: https://developers.google.com/+/plugins/+1button/

Some important bits:

+Snippet

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. These pieces of data are extracted from the target URL's content in one of four ways, listed in order of precedence:

Schema.org microdata (recommended)

If the page is annotated with schema.org microdata, the +Snippet will use the name, image, and description properties found on any schema.org type.

<body itemscope itemtype="http://schema.org/Product">
  <h1 itemprop="name">Shiny Trinket</h1>
  <img itemprop="image" src="image-url"></img>
  <p itemprop="description">Shiny trinkets are shiny.</p>
</body>

Open Graph protocol

If the page contains Open Graph properties for the title, image, and description, then they will be used for the +Snippet.

<meta property="og:title" content="..."/>
<meta property="og:image" content="..."/>
<meta property="og:description" content="..."/>

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.

<meta name="title" content="..." />
<meta name="description" content="..." />

Seta answered 28/11, 2011 at 12:23 Comment(0)

If I share a link to our webapp (restorm.com) in Google+ then the title, description and image are taken from the respective og: tags (og:title, og:description, og:image).

These tags

<title>One Shot Orchestra • Electronic • Music, Concerts & More &#8226; restorm.com</title> 
<link href="https://restorm.com/favicon.ico?116a158" rel="shortcut icon" /> 
<meta name="description" content="Listen to music of One Shot Orchestra for free and browse the Artist's news, events, videos, pictures, shop, booking &amp; press Infos, live footage &amp; much more on restorm." />

<meta property="og:title"        content="One Shot Orchestra" />
<meta property="og:url"          content="https://one-shot-orchestra.restorm.com/" />
<meta property="og:type"         content="band" />
<meta property="og:description"  content="Bangin´ Live Electro aus Bern-Kreuzberg" />
<meta property="og:site_name"    content="restorm.com" />
<meta property="fb:app_id"       content="127577323959237" />
<meta property="og:language"     content="en" />
<meta property="og:image"        content="https://assets3.restorm.com/resources/images/40/40b17a53aa9785fa89c15b06b9fcfd72_643969.jpeg?116a158" />
<meta property="og:video"        content="https://one-shot-orchestra.restorm.com/minipage/minipage.swf?applicationSettingsURL=https%3A%2F%2Fone-shot-orchestra.restorm.com%2Fminipage%2Fsettings.xml&amp;auto=true" /> 
<meta property="og:video:width"  content="300" /> 
<meta property="og:video:height" content="200" /> 
<meta property="og:video:type"   content="application/x-shockwave-flash" />

end up being shared like this

screenshot of sharing result

So the title and description are definitely taken from og:title and og:description, and not from the title and description meta tag...

Fricative answered 12/7, 2011 at 12:0 Comment(2)

I'd just like to comment that putting content attributes before property names is horrible style. – Tother 23/1, 2013 at 18:45

Have og tags on my webpage. Faceebok loads it with no problem, but google plus one doesnt. – Avestan 9/1, 2015 at 10:23

Images that are too small or not square enough will not be included in the +Snippet, even if explicitly referenced using schema.org microdata or Open Graph markup. Specifically, the height must be at least 120px, and if the width is less than 100px, then the aspect ratio must be no greater than 3.0.

Shetler answered 27/1, 2012 at 19:37 Comment(0)

Just answered this on another post Google +1 Generated Thumbmail in Profile

Looks Like Google+1 has the following data hierarchy:

Open graph tags http://ogp.me/ - seems at the moment the only way to add the thumbnail is to use the og:image tag
Normal meta tags i.e title, description
Page content if there's no description set in the above options then the description is taken from the content on the page.

Hope this helps.

Noam answered 13/7, 2011 at 13:37 Comment(0)

I am working on this, and Google+ wasn't picking up my OG tags.

When I put: <body itemscope itemtype="http://schema.org/Article"> into the HTML it started to pick them up.

Hope this saves someone some time!

Emend answered 23/10, 2012 at 10:40 Comment(0)

meta og:image works, secret is to have image large enough. It failed at 140x112 and work when I change to bigger thumbnail 511x364

Lorimer answered 12/10, 2011 at 17:6 Comment(2)

That is an interesting discovery, that it depends on the image size. Are you sure they were the same format? PNG? JPEG? GIF? – Seta 17/10, 2011 at 8:37

It has to be at least 120 pixels. – Whited 4/2, 2014 at 13:19

Google appears to be using the Title and Description of the page, in standard meta tags. It seems to have no way of specifying a thumbnail, however.

Emancipator answered 30/6, 2011 at 18:48 Comment(4)

That's not true, there are ways to specify a thumbnail. – Terrorism 5/12, 2011 at 18:21

Go on, then, Artem - educate us. – Emancipator 21/1, 2012 at 17:27

OK, as mentioned above, og:image works just fine on G+ shares. If you need proof of that, check out any post page on androidpolice.com which is where I implemented them. Note that these have to be in the <head>, otherwise they don't work (from what I remember). You can test by pasting any post link into the G+ share box and seeing what happens (without og:image it pulls up some random header background element). – Terrorism 22/1, 2012 at 18:11

I just had a look at androidpolice.com and you aren't using og:image anymore – Taub 21/2, 2014 at 11:23

Recommended topics

Hot tags