Google+ Snippet Customization Update

by Aaron Bradley on May 9, 2014

in Search Engines, Social Media

Google Plus Snippet Customization Update

Google+, like Facebook, allows publishers to control the appearance of snippets generated when users share a URL on their platform.

The way in which publishers can customize Google+ snippets (referred to by Google as "article rendering") has changed since Google+ was originally launched.

Initially it was possible for publishers, by manipulating the page code, to control the title, description and image that appeared in a Google+ snippet when a URL was shared. By June 2013, however, these methods of controlling article rendering ceased to work, and descriptions ceased to appear for URLs shared in Google+ altogether.

By April 2014 descriptions started to reappear, and were sometimes accompanied by large images.

Finally, as Googler Ade Oshineye noted on May 8, 2014, Google has now provided updated guidelines for article rendering in Google+.

Changes in Google+ Article Rendering

At time of writing the old article on article rendering still exists, though it is clearly deprecated (archived here as a PDF for posterity).

The changes are relatively minor. schema.org and Open Graph data, in that order of precedence, are still used to generate the snippet.

  • The value of the schema.org name, description and image properties are used to produce snippet elements when these fields are present.
  • The value of the Open Graph og:title, og:description and og:image properties are used when schema.org data is not present.

However, some of the old guidelines have been superseded by new specifications.

  • Google + now "attempts to render content with full-bleed images and a description for content types Article, Blog, and BlogPosting, and all types that inherit from these, as defined by microdata." This is clear enough for the schema.org types to which it refers, but "Blog" and "BlogPosting" aren't applicable when it comes to Open Graph tags. According to Facebook Developer documentation, the Open Graph article object "is the preferred type for blog posts and news stories."
  • "Google uses the Name and Description in the Google+ post." This isn't a change in behavior, but – again – is imprecise when it comes to Open Graph tags (especially for "Name," where the Open Graph equivalent is og:title). Indeed, the instruction that "You specify microdata via schema.org or Open Graph tags" is at the very least confusing, as Open Graph tags are typically not declared by using microdata, but are expressed using <meta> tags in the <head> – just as they are in the subsequent example provided by Google!
  • In order for the schema.org name and description property values or og:title and og:description values to appear in the snippet, the article must properly declare (with the schema.org image property or og:image property) an image that falls within prescribed size and aspect ratio specifications (in brief, equal to or greater than 506px wide and with an aspect ratio no wider than 5:2). It should be noted that failure to include an image that falls within the specifications doesn't simply mean a full-bleed image won't appear in the snippet, but that the name and description elements – however provided – won't appear either.
  • The two remaining original fallback methods of producing snippet content – the <title> and <meta> description tags, and "best guess" – no longer work. Google+ will usually use your <title> (if present), but won't use the <meta> description value. In order to produce the full meal deal of a snippet with a precise title, description and full-bleed image structured data is now required.

Interestingly for what Google calls the "Proper Example" of schema.org markup, all the required schema.org/Article properties (itemprop elements) – title (which should actually be name), description and image – are declared using <meta> tags. This runs precisely contrary to Google's advice on rich snippets, which states "you should avoid … Marking up content that is in no way visible to users."

All in all the guidelines are surprisingly sloppy, though it's easy enough to figure out what Google is driving at. If what you're reading here doesn't accord with what you're seeing on the guideline pages, then Google as availed themselves of Dan Scott's advice and made some corrections.

Testing and Results

I created a page containing the required schema.org/Article markup, Open Graph tags and "standard" metadata (<title> and <meta> description tags). I also included images falling within the full-bleed, no-crop specifications (1000px x 600px – a 5:3 aspect ratio).

<!DOCTYPE html>
<html>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
  <meta name="description" content="Cow Description - Meta Description Tag" />
  <meta name="robots" content="noindex,nofollow" /> 
  <meta property="og:type" content="article" /> 
  <meta property="og:url" content="http://www.airshock.com/examples/plussnippets/cow-schema-og-meta.php" />
  <meta property="og:title" content="Cow Name - Open Graph Title Property" />
  <meta property="og:image" content="http://www.airshock.com/examples/plussnippets/cow-open-graph-i.jpg" />
  <meta property="og:description" content="Cow Description - Open Graph Description Property" />
  <meta property="og:site_name" content="Airshock" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>Cow Name - Title Tag</title>
</head>
<body itemscope itemtype="http://schema.org/Article">
	<div itemprop="name">Cow Name - schema.org Name Property</div>
	<div itemprop="description">Cow Description - schema.org Description Property</div>
	<div><img itemprop="image" src="http://www.airshock.com/examples/plussnippets/cow-schema-org-i.jpg" alt="Cow Img Alt Attribute for Image Declared with schema.org" /></div>
	<div><img src="http://www.airshock.com/examples/plussnippets/cow-img-tag-i.jpg" alt="Cow Img Alt Attribute for Image Not Declared with schema.org" /></div>
</body>
</html>

All subsequent files (with progressively less markup) use the same code base. Here's how Google's Structured Data Testing Tools sees the schema.org/Article and Open Graph article data:

Google Structured Data Testing Tool Output for www.airshock.com/examples/plussnippets/cow-schema-og-meta-i.php

schema.org + Open Graph + <title>/<meta> description/<img>

Google+ Snippet for schema.org/Article + Open Graph + Standard Metadata

As anticipated Google+ used the schema.org/Article property values. Why Google+ generates the bottom saw tooth edge for this full-bleed image at 5:3, I have no idea. The specifications say that "images with an aspect ratio between 5:2 and 5:3 are not cropped," but perhaps Google doesn't consider this edge effect "cropping."

I wearied of capturing and publishing screenshots, but for the record I did test a page marked up only with schema.org/WebPage elements and a <title> tag, with mixed results. The snippet did not display any description or the full-bleed image, but did use the schema.org name property. On balance it seems Google does require you to stick to the prescribed schema.org item types (I did not test other Open Graph objects besides og:article).

Open Graph + <title>/<meta> description/<img>

Google+ Snippet for Open Graph + Standard Metadata

As anticipated, with the schema.org markup removed Google used the Open Graph properties declared in the file.

Just <title> + <meta> description + <img>

Google+ Snippet for Standard Metadata Only

As anticipated, when neither schema.org markup nor Open Graph tags were present Google+ did not return a snippet that included a full-bleed image or any type of description: only the page's <title> tag was used.

Curiously, when I posted a file with all the correct declarations but an undersized (400px x 240px) image I got this:

Google+ Snippet for schema.org/Article + Open Graph + Standard Metadata with an Undersized Image

While this Google+ post is properly linked to the provided URL, there's no title or description included in the snippet, and the image declared with the schema.org/Article property image is not only displayed full-bleed, but has been enlarged to 492px by 303px. Very odd.

{ 3 comments… read them below or add one }

1 SW November 10, 2014 at 2:45 pm

Thanks for this great article! I’ve been noticing the same thing in my own implementation, so it’s nice to have it validated.

One weird thing I’ve noticed recently: two different versions of my page (identical HTML code, but different URLs caused by tracking parameters) are actually producing different G+ snippets for content marked up with both Facebook Open Graph and Schema Video markup. One version uses Schema name for the headline, and the other version uses Open Graph title for the headline… I can’t figure out why. Any thoughts for me?

Thanks again!

Reply

2 Aaron Bradley November 11, 2014 at 11:47 am

Thanks for your comment. Without looking at the URLs in question I can only speculate as to what might be causing the discrepancy in your snippet display, and even then might be as baffled as you. :) I do know that just as there’s a lag between Open Graph data changes made to a page and what you’ll see in a Facebook snippet, so there’s a lag between schema.org and/or Open Graph data changes and the display in Google+ snippets, so the two URLs may not have the same parsed information in sync. Unfortunately, I know of no method for forcing Google+ to refresh the data that’s analogous to refreshing Open Graph information for Facebook by running the URL through the debugger.

Reply

3 Syah December 14, 2014 at 8:23 pm

I copied the exact same code as the first example after including the google script as well as putting the share button.

Nothing seems to work. It still grabs the “title” of the default site, and it shows no image neither description.

I have been trying to make this work for a few days before I stumbled across this post. I thought my method is wrong. But it is more or less the same like yours, and I can see the correct data extracted using the Structured Data Testing Tool too.

It is driving me crazy ~ lol

Reply

Leave a Comment

Previous post:

Next post: