|
Submission
and Optimization >>Search Engine Optimization Tips
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!">
<!-- 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.
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, 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 Gold is available from their Web site.
|