Testing in different browsers using Browsershots.org

If you're a template designer or happen to redesign your blog on your own, you must want to know how it looks in other browsers than the one you're using.

It's easy enough to open up the few browsers you have installed in your computer and test your newly designed blog in it. But to know for sure that it works ok in all the browsers out there is next to impossible. Just to test in 2 different version of browsers, IE6 and IE7, are tough enough - as I've faced with previously.

I have the IE7 and can't have the IE6 installed in the same machine. There are options out there to install a virtual PC in your machine so that I can install IE6. But it requires quite a large space for the virtual PC alone, and there are some other things to get out of the way to get everything in place. So, thanks but no thanks!

Recently, a reader here mentioned about using Browsershots.org to test a new template in all the browsers out there. All of them! I tried it and basically this was where my testing problem ends. All the testing works beautifully.

Browsershots.org is an online free service that takes the URL of the blog to be tested and opens it up in all the different browsers on their machines. Screenshots, or snapshots, of the blog page in each one of the browsers are then taken and uploaded back within a a few minutes into the main page for your viewing pleasure/displeasure. From there, you can immediately see which browser works or not, and zoom in to a full page ( top to bottom of page) to see the details.

Here's the Browsershots.org main page:

Here're the screenshots (you can zoom each one to a full page):

There are limitations in that you can only have a number of screenshots (~300+) per day per IP, and ~60+ shots per website per day. Limitations can be lifted up by signing up into their service or paying for an extended period of priority processing.

At least for me, having only a few hundreds of screenshots is much better than not knowing how it looks in other browsers at all. My own experience is that almost all browsers work great with my templates - except IE5 and IE6. Since knowing this Browsershots service, all my new templates are good to go with IE5 or IE6.

In some cases, you may see that your new template doesn't open up well in one or two obscure browsers. Before you try to do more tweaking to solve the problem, check to see that browsers' usage statistics. It's not worth your effort to pull up your brain power just to make it look okay in a browser used by one person for every million internet users. W3schools can provide you a record of the current browser usage monthly statistics.

How to add META tags into your blog?

Do you want to improve your blog value, get more hits, and rank high on search engines? Then you must optimize how your blog is indexed in a search engine.

While there are lots of factors involved in building quality blogs that can draw huge traffic in, having simple things right in the beginning is as important. One of this simple thing is getting your blog indexed properly with the right description & keywords to optimize search engine rankings (known as Search Engine Optimization or SEO).

To get information, search engines use automated software agents called spiders, crawlers, robots, or bots to collect the a few words from a site or blog (typically the URLs, blog name, and blog description, and maybe some words in the early part of sentences or paragraphs) that will later be used as keywords to index the blog.

Because you cannot be certain which words are taken as keywords pertaining to your blog, it's most likely that your blog won't be indexed properly in search engines - in the worst case, your highly relevant keywords might not even be used to index your blog. When this happen, searches on keywords relevant to your blog may have your blog buried at the far end of the list of thousands and millions of pages. What a waste!

To have a control of what is read by crawlers on your blog to be indexed, you have to build what is called a META tag - basically a bunch of words that makes up the most relevant description and keywords of your blog. If the META tag exist, this is what the crawlers will read and index and get displayed on any searches related to your keywords.

Here's what a search on my blog looks like on Google. The description is exactly the one I have written in the META tag. The 1st search on the list shows the new META tag description that was made a few seconds before the snap. The old META tag is shown beneath it (22 hours ago).


There are basically 2 parts to a META tag: first is the META description and second is the META keywords. The description are what appears on a search. As you can see, if the description is too long, it'll be cropped as search engines only use a few lines to describe the blog. An optimum number of characters to use for META description is 150 (including spaces and dots).

For META keywords, you can use as many words as you want, but don't repeat the same word too many times (more than 5) to avoid keyword spam. Crawlers can identify keyword spamming easily - which won't make it good either for SEO.

To create a META tag, simply copy the code below and rewrite your META description and keywords (the red text):





Then, place it in between the ..... section near the top part of your template XML code. It's best to put it just below the code.

For more details:
Go to this Free META Tag Builder tool. It directs you easily to build a META tag, create the HTML or XHTML code, and guides to paste it into your blog template XML code.

Just for the fun of it, you can analyze your blog's original description and keywords by submitting your blog URL at the Free META TAG Analyzer before placing the new META tags in your blog - so that you can compare how it is indexed before and after the change.