How to customize link preview on Google Plus

Anatoly Nechaev — Tue, 21 Feb 2012 09:34:35 +0000

ITM Citizens!

Do you have a website and want to have your own image and text in link previews on G+ instead of those that are chosen by Google?

It's quite simple actually. Read this article. It's all there.

But if you're technically challenged or just lazy like me here are several simple steps:

First of all you need an access to editing html code
Insert the image you want to display in G+ preview into your page. Place itemprop="image" attribute inside "img" tag of that image (or several images). Like this:
If you want to customize link description, enclose the text you want into tag and place itemprop="description" into that tag.
The same applies to link's title. Just use itemprop="name".
Ideally you should insert itemscope itemtype="http://schema.org/Product" into tag. But not every site engine or blog platform allows you to do it. And it seems to work in most cases even without this change anyway. In case of Squarespace it didn't. So i had to "inject"
before and
after page content in site preferences.

For example i marked No Agenda cover in the right column with itemprop="image". So when you'll share a link to this page on Google Plus instead of using stupid image from top of this post:

G+ will use the cover as preview image:

This way you can promote something when anybody shares a link to your site.

Blog

How to customize link preview on Google Plus