Optimizing
Pages with JavaScript and Style Sheets for Search
Engines
Dale Goetsch
Search Innovation
June 28, 2002
Background
Search Engines use a number of criteria to decide
what a given web page is all about. These criteria,
which can be different from Search Engine to Search
Engine, and which may even change over time, all
aim at deciding how "relevant" a page is to a
given user's search. The Search Engine wants to
return the results most relevant to a user's search.
While the particulars may change over time, there
are some criteria which remain constant. One of
these is where the keywords are located on the
page. Typically words that are located closer
to the beginning of a page are considered more
important than words that occur further down the
page. This stands to reason: think of a newspaper
article, where the headline and the first paragraph
usually have more "meat" than the rest of the
story.
Another measure of relevance is "keyword density".
This is roughly the ratio of keywords on a page
to the total number of words on a page. Having
a higher ratio of keywords to total words will
make a page more relevant for a search on those
keywords.
When a Search Engine sends its robot out to look
at your page, you want to make sure that it finds
important information near the top of the web
page, and that the page has a high keyword density.
Sometimes there are complications, even when you
have a lot of keyword-rich text early in the visible
portion of your page. Two of these complications,
extensive JavaScript code and extensive Cascading
Style Sheet code, can be easily remedied.
JavaScript problem
Large amounts of JavaScript code can get in the
way. Typically the largest amount of JavaScript
code in a web page is found in the HEAD section.
This is usually where variables and functions
are defined, and so forth. Unfortunately, having
a large amount of JavaScript code in a page can
be detrimental to a page's ranking in the Search
Engines.
Since Search Engines tend to pay more attention
to text at the beginning of a web page than they
do to text further from the beginning, it stands
to reason that if you have several dozen lines
of JavaScript code at the top of the page, your
real content is going to be further from the beginning
of the page. Further down the page means less
important to the Search Engine.
Keyword density is also important. Here again,
if you have several hundred words of JavaScript
code in a page, the keyword density—the ratio
of your keywords to all the words in the whole
page, both text and code—is going to be much
lower. That means that some Search Engines will
decide that your page is less relevant.
JavaScript solution
So how do you maintain JavaScript functionality,
but make your page as Search Engine-friendly as
possible? You put the JavaScript code into a separate
file, and link it back to the web page.
The original page, "mypage.html", may look something
like this.
<html>
<head>
<title>My Title</title>
<script>
function helloWorld(){
alert("Hello, World!");
return;
}
</script>
</head>
<body onLoad="helloWorld()">
...body of page...
</body>
</html>
Example 1—mypage.html
with JavaScript code
We replace the JavaScript
code with an instruction for the browser to go
and grab the code from a separate file. The new
page will look like this.
<html>
<head>
<title>My Title</title>
<script src="codepage.js"></script>
</head>
<body onLoad="helloWorld()">
...body of page...
</body>
</html>
Example 2—mypage.html
with JavaScript code offloaded
Note the addition of the "src" attribute to the
SCRIPT tag. The value assigned to that attribute
is the name of the external file that contains
the JavaScript code. Typically, these external
files will be given the filename extension ".js"
to indicate that they contain JavaScript code.
Note also that there are both <script> and
</script> tags here, even though there is
nothing between those tags.
A new page is then created that holds the code
that was formerly held in the SCRIPT tags. We
will call it "codepage.js", and it looks like
this.
function helloWorld(){
alert("Hello, World!");
return;
}
Example 3—codepage.js
includes only JavaScript code
This new file doesn't need any kind of HTML markup.
It contains only the code that was originally
held between the SCRIPT tags.
Style Sheet problem
In addition to JavaScript code, Style Sheet code
can cause complications for Search Engines when
it is put into a web page. For the same reasons
as JavaScript—moving the important content
further down the page, and diluting the keyword
density—it is important to move Style Sheet
code off of the page as well.
Style Sheet solution
The thought behind removing Style Sheet information
from a page is very similar to that of offloading
JavaScript; the syntax to do so is different.
The original page, "mypage.html", may look something
like this.
<HTML>
<HEAD>
<TITLE>My Title</TITLE>
<style>
body{
background:white;
color:red;
}
</style>
</HEAD>
<BODY>
...body of page...
</BODY>
</HTML>
Example 4—mypage.html
with style sheet code
We want to move this code into a separate file,
so we remove it from the original page, and add
a link to point to the separate file that now
holds the Style Sheet code.
<HTML>
<HEAD>
<TITLE>My Title</TITLE>
<link rel='stylesheet' href='style.css' type='text/css'>
</HEAD>
<BODY>
...body of page...
</BODY>
</HTML>
Example 5—mypage.html
with Style Sheet code offloaded
Note the addition of the LINK tag. This contains
three types of information that the browser will
need to reconstruct the page when a visitor looks
at it. The "rel='stylesheet'" attribute/value
pair indicates that we are looking at a Style
Sheet file here. The "href='style.css'" attribute/value
pair points to the external file that contains
the Style Sheet information. Typically these external
files will be given the filename extension ".css"
to indicate that they contain Cascading Style
Sheet code. You will replace the filename "style.css"
with the name of the actual file into which you
place your stylesheet code. Finally, we have to
specify the MIME type of the file, in the "type='text/css'"
attribute/value pair.
A new page is then created that holds the code
that was formerly held in the STYLE tags. We will
call it "style.css", and it looks like this.
body{
background:white;
color:red;
}
Example 6—style.css includes
only Style Sheet code
This new file doesn't need any kind of HTML markup.
It contains only the code that was originally
held between the STYLE tags.
Conclusion
By following these two procedures, you have now
made your web page more friendly to the Search
Engines. This means that the next time your page
is spidered by the Search Engine robots, the important
content on your page will be closer to the top
of the page, and you will have a better keyword
density. This will result in your page appearing
higher in the Search Engine listings, and will
probably bring more traffic to your website.
About the Author:
Dale Goetsch Technical Consultant for Search
Innovation Marketing , a Search Engine Promotion
company serving small businesses and non-profits.
He has over twelve years experience in software
development. Along with programming in Perl, JavaScript,
ASP and VB, he is a technical writer and editor,
with an emphasis on making technical subjects accessible
to non-technical readers.
Copyright © 2003 Search Innovation Marketing.
All Rights Reserved.
Return
to FREE articles index |
Visit Our Sponsor! WebPosition Gold