When adding javascript, it can be a case of "out of sight, out of mind" when it comes to your search engine optimisation. You may have spent days fine-tuning your keywords, carefully crafting your title, meta tags and visible copy. But all your exquisite keyword research can be spoiled by excessive javascript code. Search engines determine your web page's relevancy to a searched phrase by assigning importance to the keywords found towards the top of your page. They also look at keyword density: how often the keyword is repeated in the webpage.
Typically, most javascript code is found at the start of your webpage, between the head tags. All that code pushes your visible text further down the webpage and some search engine spiders will conclude the visible text is less important. All those extra words of code reduce the keyword density of your keywords. And worst of all, some spiders penalise you (or don't index your page at all) if there is too high a code/content ratio.
But there's no need to throw out all your javascript just yet. All these issues are resolved by moving all your javascript code into a separate file. For example, here is a typical HTML page with javascript in the head section.
example.html
<html>
<head>
<title>Javascript Test Page</title>
<script language="Javascript">
function confirmIt(where, msg)
{
if (confirm(msg))
{
window.location.href = ''+where+'';
return true;
}
else
{
return;
}
}
</script>
</head>
<body>
<a href="javascript:confirmIt('otherpage.html', 'Are you sure?')">Click here</a>
</body>
</html>
|
What we do is copy all the code in between the <script> </script> tags and paste them into a separate file javafunctions.js. The filename isn't important - you don't need to use the extension js (it just makes it easier for you to identify what the file is when scanning a directory). Here's the content of the new file:
javafunctions.js
function confirmIt(where, msg)
{
if (confirm(msg))
{
window.location.href = ''+where+'';
return true;
}
else
{
return;
}
}
|
Now we amend our original html file to remove all the javascript. It's a simple case of using the <script> tag linking to the new file:
example.html
<html>
<head>
<title>Javascript Test Page</title>
<script src="javafunctions.js"></script>
</head>
<body>
<a href="javascript:confirmIt('otherpage.html', 'Are you sure?')">Click here</a>
</body>
</html>
|
You can use your separate javascript file to contain more than one function. Your webpages are search engine friendlier and you also have the added bonus of being able to call your javascript functions from other HTML pages, saving you from repeating code across multiple pages.