Archive for the ‘Web Design’ Category

JavaScript – uses and abuses

Tuesday, September 14th, 2010

From an Internet marketing point of view, JavaScript is a client side language which can provide enhanced user interfaces and dynamic websites.

In English, this means that it gets downloaded to the computer of the person viewing the site, and makes interesting things happen when the person is viewing the site.

If you look at a website which has drop down menus, effects which happen when you move your  mouse over them, rotating image galleries, and things which pop up from the page, the chances are that they are created with JavaScript.

There are a lot of visual effects on websites that are created using JavaScript, and taking a look at a lot of sites which actually DO something, other than look pretty (eg shopping carts, eBay etc), will have a mixture of JavaScript AJAX (See below), and other dynamic languages (Which I will cover in later posts).

Use of JavaScript in sites

When the Internet was young, there were only a very limited number of things that you could put into a website to engage with people looking at the site.

The main ones were with images to draw attention to specific things, animated gifs, and javascript.  A lot of the early sites were fairly hideous by today’s standards.  Take a look at a MySpace page for examples of the damage that can be done by people with access to images and script, but little creativity.

Now, use of JavaScript is a bit more restrained from a visual point of view, but can still occasionally be used to murder search engine rankings.

There are a couple of problems with using JavaScript in websites

As an SEO company, we have to make sure that the technology that we use works well with search engines.  As you probably know, search engines use text to try and work out what a website is all about, and what is on each page.

That is fine, but JavaScript isn’t terribly search engine friendly.  Take a look at this script:

<html>

<head>

<script>

var seconds=2; /* rotate every 2 seconds */

function rotate()

{

var Quotation=new Array()

// QUOTATIONS

Quotation[0] = ‘First quotation’;

Quotation[1] = ‘Second quotation’;

Quotation[2] = ‘Third quotation’;

Quotation[3] = ‘Fourth quotation’;

Quotation[4] = ‘Fifth quotation’;

Quotation[5] = ‘Sixth quotation’;

Quotation[6] = ‘Seventh quotation’;

var which = Math.round(Math.random()*(Quotation.length – 1));         document.getElementById(‘textrotator’).innerHTML = Quotation[which];

}

function start()

{

setInterval(“rotate()”,seconds*1000);

}

</script>

</head>

<body>

<div id=”textrotator”><!–Quotations will be displayed here–></div>

<script>

window.onload=start;

</script>

</body>

</html>

This is a simple script which takes quotes or company testimonials and rotates them every couple of seconds.  The parts in Blue are part of a standard page, the parts in Green are HTML with work with the JavaScript, and the parts in Red are the actual JavaScript parts.

Now, that is quite a lot of text, considering that the only parts of the above which will be displayed are the ‘First quotation’ etc parts.  This is a basic script, but you can see that if there is a lot of script on the same page, then it will slow down loading times.

The second problem with JavaScript is that Search Engines can’t read it.  This is the only part of the script which will get displayed:

Quotation[0] = ‘First quotation’;

Quotation[1] = ‘Second quotation’;

Quotation[2] = ‘Third quotation’;

Quotation[3] = ‘Fourth quotation’;

Quotation[4] = ‘Fifth quotation’;

Quotation[5] = ‘Sixth quotation’;

Quotation[6] = ‘Seventh quotation’;

There isn’t really any way for the search engines to know that.  This means that any text that you put in there is useless as far as the search engines are concerned.

While this won’t have a big impact when looking at a rotating testimonials script, when using any script for things like drop down boxes for navigation, or other links, the search engines cannot always see the links, and so will not register them properly.  This is VERY bad for SEO, and is one of the main things that we look at when analysing a new site to see whether there are any issues with the SEO.

JavaScript and AJAX

Now JavaScript isn’t all bad, and many dynamic sites such as Google, Yahoo, eBay, and many other sites use it for their sites.  These sites are held together with JavaScript, under a group of programming languages called AJAX.

Far from being a cleaning product, AJAX stands for ” Asynchronous JavaScript and XML”.  So now you know.  Because of our focus on getting targeted traffic from search engines to our pages, we don’t do a lot with AJAX, but it occasionally useful to know what it is.

Essentially with an AJAX site you load one page, and then when you click on a link, rather than loading a whole other page, it just loads part of the page.

This saves on system resources, makes it easier for people browsing because they don’t have to wait as long, but can do odd things when trying to track visitors because it doesn’t register as a page view in quite the same way which can mess with analytics – but that won’t worry search engines.

What to do to improve JavaScript on websites

A website with a lot of JavaScript on it will need some attention to avoid damaging the rankings.  Here are some of the strategies that we use to minimise the impact:

  • Review each piece of script to determine whether it actually helps the look of the page or the site.  If it doesn’t, we remove it.
  • For the script which is useful, we can take the script out of the page and putting it in an external file.  This is a great idea if the same script is used on several pages because the script is only downloaded once, and then it will keep working on multiple pages.
  • For script which is being used in the design, we can find alternative ways of achieving the same effect, such as using dynamic HTML, and CSS.

With these techniques, we can maximise the effectiveness of the page, without affecting the page rankings.

JavaScript and HTML 5

JavaScript is a very useful programming language for building websites with, and is still being refined and improved.  The basic language of the Internet, HTML 5 has fairly recently been updated to include many of the advantages of JavaScript and Flash.  This allows standard HTML to have all kinds of effects added to it.  I watch with interest to see how HTML 5 affects JavaScript, and what the take-up of it is.

Final JavaScript overview

In essence, when you are building a website, make sure that you are familiar with what JavaScript can do for you, because it has the power to allow your page to have all kinds of useful effects.  But as will all things, there must be a balance between having too much code, and having too little ‘cool stuff’ on your site.

If you are interested to know what we can do with JavaScript, or how we can use script to improve your website, or sort out problems with your site caused by too much script, don’t hesitate to contact us.