Google+ Full Bleed Post Sharing With Descriptions
Are you going crazy trying to figure out how to get a full sized image and description when sharing a post on Google+?
I’ve ignored this issue for a while until I stumbled across these specifications on the Google Developers site recently. This feature actually started rolling out in March of 2014, and I beleive it fully integrated in May.
For a while I thought it was part of a gradual roll out, because I was seeing full-bleed images and a description posts for some, but not others.
Even after reading the specifications from Google on how to get full-bleed images and descriptions on my Google+ posts aka “the jagged bottom line” I still had trouble getting some of the posts to show up. Here is how to make it happen:
Getting Full-Bleed Posts Preview
In order to make your posts show up correctly,there are 2 tweaks to make:
- an image with a proper aspect ratio of 5:2
- a post with proper schema or OGP markup
Allow me to explain a little further.
Image aspect ratio of 5:2
In case you aren’t very savvy when it comes to graphic design or photography, 5:2 is basically a ratio.
A few sample sizes that worked during my testing:
- 506 x 210 pixels (exact size)
- 600 x 300 pixels
- 700 x 350 pixels
- 800 x 400 pixels
- 1000 x 500 pixels
- 1500 x 750 pixels
I’ve found that it is actually better to use images with a 2:1 ratio. I’ve tried several 5:2 ratio images in a few sample posts and Google did not not display the full-bleed image.
Proper schema or OGP markup
There are a number of posts that outline exactly how to set this up, so I won’t go into a full tutorial here, but basically you need to have a schema or OGP image, title and description.
Cyrus Shepard did a great writeup on the Moz blog outlining exactly how to implement this into your blog. Before diving into anything I would definitely do some research to make sure your blog / site has what it takes or that it doesn’t already have this capability built in as a plugin or extension.
Easy setup with WP Plugins
The easiest way to make this happen for a production based blog with multiple users is to implement a plugin such as SEO ultimate or Yoast SEO. The image below illustrates what fields need to be completed in order to give full images and descriptions in Google+.
If you are using a plain HTML/CSS site or are using another CMS such as Joomla or Drupal or using an eCommerce framework such as Magento or Shopify there are many different options. Here are a few resources I’ve put together:
- Joomla extensions for OGP
- Schema.org extension for Magento
- If you are using a plain HTML site the following code will do just fine (make sure it is in your head tag)
<meta itemscope itemtype="http://schema.org/Article"/><br/>
<meta itemprop="title" content="Your Title Goes Here"/><br/>
<meta itemprop="description" content="Looking for a challenging hike? We spent the
past year spanning the continent for the most grueling trails. Check out the entire
ranked list, and learn about our methodology..."/><br/>
<meta itemprop="image" content="http://i.sportyfitness.com/media/tough-trail-lrg.jpg"/>
Still not showing up right?
Keep messing with your posts, you may need to try a few different images / schema types if you want to get it right.
One issue I had is that Google+ kept trying to pull this sites image as the defualt photo which is much smaller than the default so it would give me a thumbnail preview instead of the full bleed.
If you scroll through the available images within the preview it should generate the correct image.
A good decision anyway
Making these changes, adding an OGP image, title and description is great for other social networks as well.
This should also help your image previews on Facebook, LinkedIn and Pinterest as well.
If you have any questions feel free to reach out via the comments on on Google+.
Oh, and yes this post should render properly on Google+