How do I get my web page content to render with a full-bleed image and a description when users share it on Google+ using a URL?
When sharing certain types of content, you can customize the snippet to enhance the way your content is rendered in a post. Following these instructions, you can add code to your page that enables Google to render your content with full-bleed images and a description as shown in the Example With Full-bleed Image.
Content that does not qualify for this rendering treatment is rendered as shown in the Example With Thumbnail Image.
- You specify microdata via schema.org or Open Graph tags.
- Google uses the Headline or Title (depending on your markup) and Description in the Google+ post. These fields are truncated if they are too long.
- Google uses the Image as the full-bleed image of the post on Google+.
In addition to the required schema markup, the image must be sized as follows:
- must be at least 400px wide.
- must have an aspect ratio no wider than 5:2 (width:height).
An image meeting the above requirements is always rendered with a width of 506, 426, or 346 pixels, depending on the width of the user's viewport.
For example, an image with dimensions of 600 x 250px (width:height) qualifies because its aspect ratio of 5:2.1 is narrower than 5:2, but Google scales it down to 506 x 211px, 426 x178px, or 346 x 144px. Google scales down an image of 600 x 300px (5:2.5) to 506 x 253px, 426 x 213px, or 346 x 173px.
Google scales and crops images as follows:
- images with an aspect ratio taller than 5:3 are scaled to 506px width, and then cropped vertically to 303px height. For example, an image of 600 x 1000px is scaled to 506 pixels wide, maintaining its aspect ratio. It is then cropped at the top and bottom to 506 x 303px (5:3), using an algorithm to keep the most interesting part of the image.
- images with an aspect ratio between 5:2 and 5:3 are not cropped, but are scaled.
- images wider than 5:2 disqualify the content from this rendering treatment.
- depending on the user's browser viewport width, images may finally be scaled to 426px or 346px wide, maintaining the aspect ratio post-crop.
Example With Full-Bleed Image
This is an example of a post rendered with a full-bleed image and description. The content is specified as an Article, and the specified image is at least 400px wide and taller than a 5:2 aspect ratio would dictate. The markup for this snippet is shown further below.
<meta itemscope itemtype="http://schema.org/Article" /> <meta itemprop="headline" content="Top 10 Most Challenging Hikes in North America" /> <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..." /> <meta itemprop="image" content="http://i.sportyfitness.com/media/tough-trail-lrg.jpg" />
Open Graph Markup
<meta property="og:type" content="article" /> <meta itemprop="og:headline" content="Top 10 Most Challenging Hikes in North America" /> <meta itemprop="og: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..." /> <meta property="og:image" content="http://i.sportyfitness.com/media/tough-trail-lrg.jpg" />
Example With Thumbnail Image
This example is identical to the previous, but the supplied image is narrower than 400px, so the content is rendered with a small thumbnail and without a description.