|
|
 |
Optimizing Web Pages with JavaScript and Style Sheets
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.
|
