How to make javascript search engine friendly
When adding javascript, it can be a case of “out of sight, out of mind” when it comes to our search engine optimisation. We may have spent time to define keywords, title, meta tags for our sites. But all our exquisite keyword research can be spoiled by excessive javascript code. Search engines determine our web page’s relevancy to a searched phrase by assigning importance to the keywords found towards the top of our 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 our webpage, between the head tags. All that code pushes our 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 us, if there is too high a code/content ratio.
But there’s no need to throw out all our javascript just yet. All these issues are resolved by moving all javascript code into a separate file. For example, here is a typical HTML page with javascript in the head section.
sample.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(’otherhtmlpage.html’, ‘Are you sure?’)”>Click here</a>
</body>
</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(’otherhtmlpage.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. We can name it as javafunctions.js. Here’s the content of the new file:
javafunctions.jsfunction confirmIt(where, msg)
{
if (confirm(msg))
{
window.location.href = ‘’+where+'’;
return true;
}
else
{
return;
}
}
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:
sample.html<html>
<head>
<title>Javascript Test Page</title>
<script src=”javafunctions.js” mce_src=”javafunctions.js”></script>
</head>
<body>
<a href=”javascript:confirmIt(’otherhtmlpage.html’, ‘Are you sure?’)”>Click here</a>
</body>
</html>
<html><head><title>Javascript Test Page</title><script src=”javafunctions.js” mce_src=”javafunctions.js”></script></head><body><a href=”javascript:confirmIt(’otherhtmlpage.html’, ‘Are you sure?’)”>Click here</a></body></html>We can use your separate javascript file to contain more than one function. Our webpages are search engine friendlier and also have the added bonus of being able to call our javascript functions from other HTML pages, saving you from repeating code across multiple pages.
