This site is for sale,
Learn More
Search Engine Marketing 102: Boosting Prominence
By Matt Paolini
Originally Published: January, 2003
Robin Nobles wrote an article entitled "Search Engine Marketing 101: What Search Engines See When They Visit Your Web Site" in our October issue. Robin did a wonderful job at stressing the importance of building simple pages and the positive effect that simplicity can have on a page's ranking.
Instead of reinventing the wheel, I felt Robin's article was a great one to build upon. I'm going to take this opportunity to add some additional tips on how to make your pages simpler and therefore more "search engine friendly." When you construct your pages it is very important to consider that search engines tend to favor pages that are basic, rich in plain text, and easy to "crawl."
What do I mean by easy to crawl? Essentially, when a search engine visits your page, it reads your page and assigns greater importance to content near the top. This is called "prominence." Therefore, it is important to build your pages in such a fashion that will move your important content as close to the top of the page as possible.
One of the most common mistakes I see people make is to include large blocks of JavaScript and Cascading Style Sheets (CSS) code between the
<HEAD>
and
</HEAD>
tags of their document. Although it is a common practice, there are disadvantages to this approach. One disadvantage is that in order for the search engine to get to the main body text containing your important keywords, it has to sift through the extra Javascript or CSS code in the
<HEAD>
area of the document first, potentially reducing your prominence score. While not a catastrophic problem in itself, it can be one more notch against you in climbing to the top.
Boosting Prominence Objective:
To position the starting
<BODY>
tag as close to the top of the page as possible, we need to eliminate all of the JavaScript and CSS that is contained between the
<HEAD>
and
</HEAD>
tags of the document.
How do we do this? Let's take a look at the following two examples.
Boosting Prominence Example 1:
In the example below, there are approximately 47 lines between the opening
<HTML>
and the opening
<BODY>
tag. That is a significant amount of code for the search engine to sift through in order to get to the body text.
<HTML>
<HEAD>
<TITLE>WebPosition Gold Search Engine and Web promotion Software</TITLE>
<META NAME="keywords" CONTENT="WebPosition Gold, Search Engine Optimization">
<META NAME="description" CONTENT="WebPosition Gold - The World's Leading Search Engine Optimization Software!">
<!-- JavaScript to prompt user for an email address -->
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function ValEmail()
{
var result = true;
if (document.Subscribe.Email.value == "")
{
alert("Please enter a valid email address.");
document.Subscribe.Email.focus();
document.Subscribe.Email.select();
result = false;
}
return result;
}
//-->
</SCRIPT>
<!-- Style sheet that changes the color of the browser scroll bar (IE 5.0 and Higher) and sets the default font of the page to Arial 12 point -->
<STYLE TYPE="text/css">
BODY{
scrollbar-arrow-color : #FFCE31;
scrollbar-base-color : #00357A;
bgcolor : #FFFFFF;}
.DefaultFont{
text-decoration : none;
color : #000000;
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;}
</STYLE>
</HEAD>
<BODY text="#000000" bgColor="#ffffff">
<P CLASS="DefaultFont">
This is the main body text area.
</P>
<FORM METHOD="POST" Name="Subscribe" OnSubmit="return ValEmail();">
<INPUT TYPE="text" NAME="Email" VALUE="">
<INPUT TYPE="Submit" VALUE=" Subscribe ">
</FORM>
</BODY>
</HTML>
Now let's take a look at a way we can modify the above code so that all of the JavaScript and CSS is no longer contained between the
<HEAD>
and
</HEAD>
tags. Basically, we're going to put the JavaScript and CSS code in their own separate files and reference them from the
<HEAD>
area of the document.
Boosting Prominence Example 2:
Below you'll see an example of how we have reduced the size of the Web page by moving the Java and CSS code to separate files.
<HTML>
<HEAD>
<TITLE>WebPosition Gold Search Engine and Web promotion Software</TITLE>
<META NAME="keywords" CONTENT="WebPosition Gold, Search Engine Optimization">
<META NAME="description" CONTENT="WebPosition Gold - The World's Leading Search Engine Optimization Software!">
<!-- JavaScript to prompt the user for an email address -->
<SCRIPT LANGUAGE="JavaScript" SRC="/scripts/validate.js" TYPE="text/javascript"></SCRIPT>
<!-- Style sheet that changes the color of the browser scroll bar (IE 5.0 and Higher) and sets the default font of the page to Arial 12 point -->
<LINK REL="StyleSheet" HREF="/css/styles.css" TYPE="text/css">
</HEAD>
<BODY text="#000000" bgColor="#ffffff">
<P CLASS="DefaultFont">
This is the main body text area.
</P>
<FORM METHOD="POST" Name="Subscribe" OnSubmit="return ValEmail();">
<INPUT TYPE="text" NAME="Email" VALUE="">
<INPUT TYPE="Submit" VALUE=" Subscribe ">
</FORM>
</BODY>
</HTML>
As you can see in this example, the code in the
<HEAD>
area is much cleaner. All I did was take the original JavaScript code and put it in a separate file and named it validate.js. Then I referenced it by adding the following code to my document:
<SCRIPT LANGUAGE="JavaScript" SRC="/scripts/validate.js" TYPE="text/javascript"></SCRIPT>
Notice the "SRC" attribute of the
<SCRIPT>
tag. This is the path to the directory called "scripts" where the file validate.js is located. You can name the directory anything you want or even put the file in your web root directory without specifying a directory name. You can also name the validate.js file anything you wish, as long as the file name ends in ".js". This tells the browser that I want this file to be treated as a JavaScript file.
Here's what the validate.js file looks like:
<!--
function ValEmail()
{
var result = true;
if (document.Subscribe.Email.value == "")
{
alert("Please enter an email address.");
document.Subscribe.Email.focus();
document.Subscribe.Email.select();
result = false;
}
return result;
}
//-->
Notice that the file contains only the Javascript that you wish to be inserted into your "real" page. Do not enter any of the traditional tags such as
<HTML>
or
<HEAD>
to your JavaScript file.
You'll also notice that I put the CSS code in a separate file, which I named "styles.css" then referenced it in my document by adding the following line of code:
<LINK REL="StyleSheet" HREF="/css/styles.css" TYPE="text/css">
As with JavaScript, you can name the file anything you want as long as you keep the file extension as .css. Pay particular attention to the "HREF" attribute of the "LINK" tag. This contains the path to the "styles.css" file. I also created a directory to put the file in called "CSS."
It isn't necessary to create separate directories (also called "folders") to contain your CSS and JavaScript files. However, it is a good idea to separate all of your JavaScript and CSS files from the rest of your HTML documents.
Separating your Java and CSS code has the following advantages:
-
It eliminates the use of several lines of code in the
<HEAD>
area, allowing the search engine to more easily access the
<BODY>
text and discouraging them from indexing irrelevant content. Some engines may be smart enough to ignore JavaScript and Cascading Style Sheets when computing prominence scores. However, if there are no keywords in the JavaScript/CSS that you want indexed, it is safer to put them in another file.
-
The technique allows you to quickly include these files on multiple pages by simply referencing them via just one line of code per file.
-
If you need to modify these files, you only have to modify the validate.js and styles.css files once. The changes will appear on all of the pages in which you have referenced them.
-
The change decreases the size of your pages, making them load quicker. The first page load would be about the same, but a browser should cache subsequent loads of validate.js and styles.js, thus reducing download time.
-
The technique discourages novice visitors from stealing your JavaScript and CSS code by offloading it to a less visible file.
-
It makes your code much more manageable by eliminating repetition.
For more information on using JavaScript, visit DevEdge Online's
Comprehensive JavaScript Resource
Please visit W3C for more information on
Cascading Style Sheets
and other ways you can use them to customize the look of your page.
Our guest author this month, Matt Paolini, is also a Webmaster for FirstPlace Software and a freelance Cold Fusion/SQL developer.
This article is copyrighted and has been reprinted with permission from FirstPlace Software.
Site Promotion Articles Indexes:
|
