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.

{ 0 comments… add one now }

Leave a Comment

Previous post:

Next post: