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:
In order to make your posts show up correctly,there are 2 tweaks to make:
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:
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.
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:
<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"/>
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.
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+
We're glad you stopped by. We blog about SEO to contribute to the community, and to help educate those looking to learn more about it.
Part 1 - An SEO's Guide to Tumblr
Part 3 - The value of Tumblr links revisited