Beware the Lightbox, and 3 other Google Instant Preview Optimisation Tips

Do you like Google Instant Previews? Do you like tips? We need to talk.

Out of all of Google’s recent “improvements” I think Instant Previews is my favourite. Since nearly all of the other changes annoy me a fair bit, it probably wins by default – but that’s not the point.

If you don’t know already, Instant Previews are the little thumbnail you get when you click the magnifying glass in the SERPs:

From here you can decide whether that site should get your click, or whether you’d rather give it a miss and check out the other results. Needles to say, this could be a game changer…

Because what’s the point being #1, if everyone clicks #2?

Here’s some tips for Google Instant Previews Optimisation – (or GIPO for short, as Si in the office calls it. We can claim this term, I presume?)

1. Beware using Lightbox to cover your content

This is heartbreaking. MoneySavingExpert is #1 for a search on [cheapest iphone]. Yet all the lovely content is covered by a dirty big Javascript Lightbox:

Will this page tell me how to get a cheap iPhone? Is this an attractive page worthy of a browse? It’s anyone’s guess with a Preview like that.

If you go to the live site you may or may not see the Lightbox yourself as I think it’s determined by cookies (or maybe just a random sample of people see it). How unlucky for Google to have had the chance to see the Lightbox and take a snapshot.

I haven’t got the stats to prove it, but I’m willing to bet that for those people who use Previews, they’ll be sending a lot more clicks to result #2 than they would if the Lightbox was removed from result #1. So what can you do?

– Detect the Preview Bot then discard the Lightbox

The bot that takes a snap of the page is different to the usual Googlebot that you know and hate. And there’s no harm in detecting its presence and then avoiding displaying the Lightbox. Yes I know this sounds a bit like cloaking, but it’s not really. Google say they’ll only give you a beating if the content of both pages is substantially different, so this technique should be A-OK with G.

The user agent of the Google Preview Bot is:

Mozilla/5.0 (en-us) AppleWebKit/525.13 (KHTML, like Gecko; google Web preview)
Version/3.1 Safari/525.13

It’s probably beyond the scope of this post to suggest how this can be done in practice, but any takers please share in the comments.

2. Zoom out in the browser for Instant preview of Instant Previews!

This is my favourite tip I want to share. If you’re busy making visual changes to your pages and want to see how this will affect the look of your Preview then just zoom out, as shown with the SEOMoz site:

(The above is in Firefox, which shows the most “Preview-like” of the 3 browsers)

To zoom out: (all browsers) Either hold CTRL and scroll the mousewheel, or hold CTRL and press the plus and minus keys.

To return to normal: In Firefox and Chrome use Ctrl-0 (zero), in IE use: Page > Zoom > 100%

3. Be sure about Flash

Flash, a-ah. Saviour of the Universe. But not the saviour of Instant Previews, it seems. If your important pages are showing in the Previews like the one below then you may want to check your CTR since Google rolled out Previews:

Ugly. Until Google catches up and shows Flash in Previews, why not show a static image to the Preview bot, and a flash image to the normal Google bot? As long as the image and the Flash are “conceptually” the same thing (i.e visually the same image), so I would think Google would cut you some slack here but if anyone thinks is cloaking then speak out below.

Make your headings clear

If you’ve followed best practices you shoulsd have clearly defined headings (H1s, H2s etc.), so now you need to make sure they’re clear enough to be seen from the Preview image. Nicely broken up sections, with a nice clear heading for each would get my click every time.

4. Learn from poor eBay

Not really a tip, but I needed the numbers. It’s interesting nonetheless. Instant Previews is even catching out the big guys, and throwing a spanner in the works during the busy Christmas shopping period. This is a search for [ebay]. Something missing?

Where’s the famous eBay logo? Their million dollar branding, gone in an instant (preview). Ouch. Why this has happened I couldn’t really tell you. The logo isn’t anything fancy – it’s just a GIF, and there doesn’t seem to be any strange styling acting on it. Maybe someone CSS experts could tell me in the comments below?
How about you, my fellow GIPOs? Got any tips for effective GIPO yourself? Noticed anything strange in the GIPs?