Javascript include: like hiding javascript under the website bed in an external js file.

September 9th, 2007 by Heather

Hide your javascriptHow easy is a javascript include?

Now that I have let you in on the little secret that search engines are a lot like your mother in that they like to see a clean room/website, it is time to take a look at a few things you can do to make your website clean and shiny. One of the biggest cleanups you can do with your HTML code is to use a javascript include. You may ask, “But really, how easy is it to embed an external js file into my html?” My answer is, “Do you use an external CSS?” Okay, so that wasn’t an answer, that was another question. But the reason I ask is that if you know how to use an external CSS file, than you know how to use an external js file.

How to make an external js file.

If you want to include javascript functions, the first thing you will want to do is take the full code of your javascript function and put it into a text editor. Save the file as filename.js, with filename being whatever you want the actual filename to be. The .js lets a computer now that the file is a javascript include. Each different javascript function will need to be in its own file.

How to embed an external js file into my HTML code.

In your HTML doc, where the javascript function previously resided, place this code instead:

<script xsrc=”filename.js” mce_src=”filename.js” ></script>

The src your javascript include is treated the same way you would treat an img src. You need to use the path to where you saved the file.

And now you are smacking yourself on the forehead and saying “Really, that is all it takes? That is all it takes to embed an external js file into my html?” Yep. It is just that easy to include javascript functions.

Why include javascript functions on your website?

Then it dawns on you that you still don’t know why you should use a javascript include. That is pretty easy too. Since this is an SEO blog, we will start with the SEO reason to include javascript functions. By placing the javascript function in an external js file, you are helping to pull some of the muck out of the out of the code. And javascript tends to be pretty mucky looking as far as code goes. The less muck a search engine spider has to wade through, the better able they are to find your content and links and the less likely they are to run into errors when doing so.

But, as usual, when it comes to most things SEO what is good for the spider is good for the visitor. When you include javascript functions rather than place the functions in the HTML code, you are creating a page that loads faster. Since you are using an external js file, the browser will cache the file rather than reload it every time your visitor hits a new page. This means your visitors will get to the page faster and will be less likely to abandon or bounce off the page.

Other benefits of a javascript include.

Not only that, using an external js file will help make code upkeep a cinch. When you want to make changes to a javascript, you will only need to make an adjustment to one file, rather than multiple pages.

Now remember to stay tuned. We have more Clean Code Tips coming up here soon.