How To Create Page Previews Like Google Does

You might have noticed that Google now offers the option to get some “page previews” next to search listings. You might have also wondered how you could add such cool little things to your own websites or blogs so I’m writing this post to teach you how to do it

Page previews are basically what other people would normally call “website thumbnails” or “screenshots” of the remote web page. There’s several ways you can create screenshots like this.

The long way.

If you look closely at your keyboard, you should notice a “print screen” somewhere on a key… it might also be abbreviated like “Prt Scr.”… this key if pressed, will take a image of everything you currently see on your screen and “copy”  it to your machine’s memory so that you can “paste” (ctrl + v) it somewhere else. So once you’ve hit print screen, you can open your favorite image editing software like Photoshop and paste it in there. You probably don’t want your whole screen showing though so you’ll probably want to crop the image and only keep the portion you want to show. Then you save and upload online somewhere to include in your website / blog as you’d insert an other image.

The lesser long way

You can get some screenshot programs that allow you to capture only certain windows or even allow you to outline exactly what area of the screen you want to capture. My favorite one is SnagIt from Techsmit. There are many such programs however and there are free ones too, just do a search on google for “screenshot program” and you’ll get several results. There’s also actually another one you can use for free from techsmith, it’s The Jing Project… check it out, it also does screen recordings.

So this saves you the step of having to open the image in the editing program and doing the editing. A software like Snagit, automatically opens the screenshot you just took into it’s built-in image editor where you can add arrows and stuff to it (see the image at the top of this page, it was done with SnagIt.)

The least long way

ThumbnailsPro – Automatic Website Thumbnail Page Previews
Ok so I don’t know about you, but I’m lazy and proud of it. I have way too many and better things to do (like write this blog post ) than unnecessarily waste my time with something if there’s an easier and quicker way to do things.

There are actually some website thumbnails / screenshots services online that will do all the steps for you and allow you to just insert some code in your web pages and the website thumbnails will automagically get generated, hosted and displayed for you. Ah the magic of the web, making lazy geeks like me or busy business owners’  life easier and easier day by day.

<!–start of–>< plug> One of these service is ThumbnailsPro and you know what? It’s my favorite! You know why? Cause I own it! hehehe . But seriously, check it out. You just place a simple image tag in your web pages and you get a thumbnail of any url your choose. There’s also an API for geeks or developers like me that like to integrate and automate things.

The api makes it easy to integrate & control the aspects of page previews / website thumbnails into your website / blog or any web app, just like Google does. You didn’t think that there was actually someone at Google taking these manually right Neither should you.

And if I may say so myself, ThumbnailPro’s website thumbnails service is better than whatever Google is using. Theirs seems to fail many of the times, just do a Search on google “test” and see the further you go, the more and more page previews are missing. I’m sure they’ll improve it but heck, for now, it’s better so I’m gonna say it! . If you want an example of what it looks like in a page, just look at the top and to the left here, I created that website screenshot using the simple ThumbnailsPro image tag.

There’s a free service that will fit the need of many but there’s a small watermark on images. So for people that want something without watermarks and have higher volume needs, there’s the paid services starting at very low rates.

Oh and for the Wordpress users out there, we’re working on a free Wordpress plugin that will allow you to do some cool things to automatically insert thumbnails in your posts like this and also allow you to “preview” external or internal links within your Wordpress (using some of the effects found on this page), it’s really cool and is in testing right now, it should be released in the next week or two, you can keep an eye on the blog for it if you’re interested. <!–end of–></plug>

Related Reading: