Tag Archives: Google+

How to customize link preview on Google Plus

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
  • If all you want is to customize image preview you could just insert <meta property=”og:image” content=”image-url” /> into <head> section. This way you won’t even need to insert that image onto the page.
  • 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: <img itemprop=”image” src=”image-url” />
  • If you want to customize link description, enclose the text you want into <span> 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 <body> 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” <div itemscope itemtype=”http://schema.org/Product”> before and </div> 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.