Seattle Drupal Development background image

Fix Google's Instant Preview for Flash Websites

Mon Feb 14 2011

How to fix Google Instant Preview for Flash websites using swfobjectIn November of 2010, Google released a handy new feature as part of their transition to "instant" searches. This feature, called "Instant Preview", allows the searcher to quickly see a little overlaid screenshot of each website in the search results, allowing them to preview a website before visiting it. Just click on the new little magnifying glass in the search listing and up pops the website's preview image. Very nice...

...that is, unless you have a Flash website. Google's new Instant Preview feature seems to be flawless except for the fact that it currently is not able to display Flash of any kind. In the instant previews, Flash websites or websites with Flash elements will have areas with Flash displayed as an ugly gray box with a puzzle piece in the middle. These gray boxes signify Google's inability to capture and display the site's Flash content.

OK, so search engines have never done a good job of handling Flash content, and this is something that most site owners have begrudgingly come to accept. To overcome the limitations, many have added search-friendly alternate HTML text that loads if Flash is not supported (e.g. 'noscript', 'swfobject'). And not a few site owners have taken these methods even further to create two parallel sites in an effort to have search engine friendly Flash websites (this includes us)... one in Flash and the other a content-mirroring HTML site that only loads if the user's browser cannot display the primary Flash site.

This method of switching between two versions of content (Flash vs. HTML) is usually accomplished with the help of the JavaScript plugin, swfobject, the standard way to detect and embed Flash while also providing a non-flash version of content for accessibility and search engine indexing purposes. So in effect, what you can have is a Flash site that is searchable by Google and available to non-flash browsers.

So what does this have to do with Google's Instant Preview? Since it can't handle Flash, shouldn't it just generate its preview from the HTML version of the site and ignore the Flash? Well, it should, but for some reason with swfobject in use, it doesn't. Google's capture engine that creates the preview images tells swfobject to load the Flash, even though it can't actually view Flash! So anyone who's gone through all the work of creating a content rich, attractive non-Flash version of their site will have this version ignored in Google's Instant Previews and replaced with the ugly gray puzzle piece box. Nice.

So how do you force Google to create its previews from only your HTML version of the site? What you have to do is add an extra detection step beyond swfobject's flaky Flash detection method. swfobject should still be used to embed Flash, you'll just need to include an additional Flash detection step that requires a small Flash file ("detect.swf") to load successfully before loading and embedding the final Flash document. Flash will only be loaded if Flash has been proven to run successfully.

Want your Flash or HTML website to show up better on Google?While this may not be the most straightforward way to detect Flash, it works well and will force Google to use your HTML content as its instant preview. Once this method is in place, all you have to do is wait for Google to crawl your site and update its Instant Preview image for it.

See our method of better flash detection in action here.

Click here to download the detection and example files.