Click here to see your recently viewed pages and most viewed pages.
Hide
Google+ Platform

Article Rendering

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.

Google+ 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.

  • 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.

Full-bleed example image

top

Schema.org Markup

<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" />

top

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" />

top

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.

Thumbnail example image

top