Do you have lots of JavaScript coding in the
header section of your web pages? Do you re-list your CSS styles at the
top of every page? Do you have JavaScript coding spread throughout your
web pages?
If you answered yes to any of these questions your site may be
driving away search engine spiders and losing search engine position
ranking.
As you can imagine search engine spiders have a lot of pages to get
through on the web when they are indexing sites. To improve their speed
and efficiency search engines program their spiders to give up easily
if they have problems with a page or if they have to wade through too
much code to find the relevant content.
This is one of the reasons why it is so important to put your
keywords as close to the top of the page as possible. This way the
search bot will see the keywords before giving up and moving on to the
next page.
But what do you do if you have lots of JavaScript code or CSS styles
pushing your keywords down the page in your coding? You need to find a
way to cut down on all that code that gets in the way of the search
engines properly indexing your page.
We do this by moving the JavaScript and CSS styles off the page and
into external files. This is a fairly easy and straight forward process
and can have the added benefit of making your pages load faster as
well, which the search engines also like.
In many ways CSS styles and JavaScript work in a similar fashion.
You set up functions in a script or formatting in a style sheet
section, and then refer to that section in your html code. For instance
if you have a JavaScript that displays a clock on your page you would
have the JavaScript functions for the clock listed in your head
section, then you would simply call that function from the place on the
page where the clock would be displayed.
Similarly with CSS you set up your styles ahead of time in a Styles
section of the page head, then you simply refer to the styles as needed
in your html coding. One benefit of this is that it cuts down
dramatically on the amount of formatting code needed when compared to
using Font tags.
If you want to use the same JavaScript or CSS styles on a different
page you could copy all that code onto the new page. But this would
cause two distinct problems, first you would be adding a lot of code to
each page and second if you wanted to make a change to the JavaScript
or CSS styles you would need to do so on every page that the code had
been copied onto.
Both of these problems can be solved simply by using external files.
You create one external file for your CSS and another file for your
JavaScript. These could be named mysite.css for the CSS and mysite.js
for the JavaScript. These files can be created in any plain text editor
or html code editor, they are nothing more than files that contain most
of the CSS or JavaScript code from the web pages.
With JavaScript you have an opening JavaScript tag, then a comment
tag, then assorted functions and what not, followed by a closing
comment tag and a closing JavaScript tag. Your external file would
start with the opening comment tag, contain all the functions and such,
and end with the closing comment tag. You would leave both the opening
and closing JavaScript tags in the html page. If you have more than one
JavaScript on the page you can move all the code into one external js
file. Simply copy it into the file in the same order as it exists in
the JavaScript tags on the html page. You will only need the one pair
of opening and closing comment tags.
Once your JavaScript is moved off the page you will need to tell the
web page where to find it. This is done in the JavaScript tag that was
left on the page in the head section. Right now this will be an opening
JavaScript tag placed right up against the closing JavaScript tag, with
no additional code in between. You will place the reference to the
external JavaScript code inside the opening JavaScript tag like this:
script language="JavaScript" type="text/JavaScript" src="mysite.js"
Placing CSS styles in an external file is handled in exactly the
same manner. Move the styles into the external file, and then refer to
that external file with your style tag in the head section of the web
page like this:
link href="mysite.css" rel="stylesheet" type="text/css"
An added benefit of moving the code into external files is that you
can then change the styles of your whole site simply by changing the
code in the one external file.
Once you have moved the code into external files you will have
greatly simplified the code on each page. This will take you a long way
towards making your pages lean and mean, and very search engine
friendly.
You can find sample external files for this article on my web site at: www.howtogurus.com/free-articles.html