Search Engine Marketing 102: Boosting Prominence

« Ten Ways to Gain More SEO Clients: Beginning with your local market | Hidden Links Explained »

January 15, 2003

Search Engine Marketing 102: Boosting Prominence

by Matt Paolini

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.

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.

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!">

<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 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>

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.

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.

<SCRIPT LANGUAGE="JavaScript" SRC="/scripts/validate.js"
TYPE="text/javascript"></SCRIPT>

<LINK REL="StyleSheet" HREF="/css/styles.css" TYPE="text/css">

</HEAD>

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:

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:

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 WebPosition, the makers of WebPosition Gold. FirstPlace Software helped define
the SEO industry with the introduction of the first product to track your rankings
on the major search engines and to help you improve those rankings. A free trial
of WebPosition is available from their Web site.

← What is this?

Read more articles in the Search Engine Marketing topic category.

« Previous | Next »

Topic Categories

Article Archives

January 15, 2003

Search Engine Marketing 102: Boosting Prominence

Resources