Although web designers are usually
familiar with Cascading Style Sheets (CSS), many search engine optimizers
aren't really "web designers". So, in case you're unfamiliar with this
technology, let's start with a few definitions.
CSS Definitions and Advantages
W3C (World Wide Web Consortium) defines
Cascading Style Sheets as,
" . . . a simple mechanism for adding style (e.g. fonts,
colors, spacing) to web documents."
In other words, instead of the traditional method of setting
style and layout on each individual web page, CSS allows web designers
to use a single file to control the style and layout of multiple web
pages . This enables the web designer to set attributes such as font size, line
spacing, indents, and element positioning into a single file and then easily
apply those attributes across multiple web pages. Incidentally, both IE and
Netscape 4.0 support CSS.
Besides possible search engine positioning advantages that I'll
cover later, CSS offers several other potential advantages such as...
- Smaller files sizes -- meaning, your pages will download
faster .
- The ability to edit the style (font style,
size, spacing, etc.) on hundreds of pages at one time by editing
a single CSS file.
- More control over your page's layout.
- Possibly even keyword density advantages.
The main disadvantage to using CSS is that it is not supported
in browser versions earlier than IE 3.0 or Netscape 4.0. However, we suspect
that very soon that won't be an issue as users discover that the old browsers
are increasingly incompatible for other important Internet functions as well --
like purchasing online.
In any case, at the end of this article we'll recommend links to
online resources and tutorials for CSS but, for now, let's move on to "absolute
positioning."
Absolute Positioning
Absolute positioning allows you to put a layer on a specific
place on your screen, so that it stays the same no matter what screen
resolution or browser window sizes a viewer uses. Absolute positioning is used
in conjunction with the <DIV> tag. With absolute positioning, web
designers can fix a layer to a specific place on a web page down to the pixel.
Absolute positioning is viewable only in 4.0+ browsers.
While all of this is fine and good, what you really want to know
is how to use CSS and absolute positioning to your advantage when optimizing
web pages.
Introduce Bill Gentry
To write this article, I interviewed Bill Gentry, Search Engine
Specialist and Web Designer with Look Sharp Designs (http://www.looksharpdesigns.com). Bill frequently uses CSS
when designing pages.
Bill has been testing different optimization strategies while
using CSS and absolute positioning, and this article discusses those tests.
Please note that many of the tests are still in progress. However, the results
are encouraging enough to warrant a good, long look.
Using CSS
According to Gentry, "A style sheet's biggest advantage for
search engine optimizers is that you can eliminate many HTML tags. The second
biggest advantage is that you can change the inherent properties of HTML
tags."
Though there are actually three ways to apply styles to a web
page, Gentry says that the best way for optimizers to use style sheets is to
link them from an external .css document.
However, as a means of explanation, the three ways to apply
styles along with examples are:
- Inline with the HTML tag, such as <P STYLE="font-size:
9pt">. This defines the size of the text for one paragraph only.
- In the <HEAD> section of the web page, such as
<HEAD><STYLE> a {text-decoration: none}
</STYLE></HEAD>. This removes the underlining for all links on the
page.
- In an external style sheet, such as <STYLE
SRC="stylesheet.css"></STYLE>. This links an external style sheet to
the page. This one style sheet can be referenced on many web pages and can
affect every one of those pages.
We mentioned that the best way for optimizers to use styles is
to link them from an external .css document. Let's look at an example of an
<H1> style sheet definition.
An Example, Using an <H1> Tag
The following code is what Gentry is using in his style
sheet...
h1 { font-family: Verdana; font-size: 14pt;
font-weight: 300; color: #666666; text-align: center}
With this style sheet, Gentry has assigned the Verdana font in a
font size of 14 points. He also assigned a font weight of 300, which removes
the bold text from an <H1> tag. "You can assign font-weight values from
100-900 in increments of 100. 300 is normal, 500 is bold, and anything higher
than 700 is extra bold," explains Gentry.
He assigned the font color to be medium gray, and he center
aligned the tag.
So how could this possibly help a search engine positioner? To
explain, let's look at the HTML code that would be needed to produce the same
effect:
<CENTER><H1><FONT FACE="Verdana" SIZE="4"
COLOR="#666666">Some Text</FONT></H1></CENTER>
With the HTML tag, however, you can't remove the bold face
property or fix the font size of the <H1> tag.
Here's the code using a style sheet:
<H1>Some Text</H1>
"By using the style sheet, I completely eliminated a lot of
source code that gets in the way of the text. However, except for the bold face
and probably the size of the text, the two look similar in a browser," says
Gentry.
Not only are you getting rid of a lot of extra tags and reducing
the overall size of the page, but with this tag, you're also able to use a
headline tag with every instance of your keyword phrase, if you choose.
Therefore, with those engines that place more relevancy on text found in
headline tags, you're increasing the relevancy of your page, and the text
itself looks similar to your other text.
Pretty slick, eh? ...now I hear you asking, "Are there other
ways of using CSS in positioning strategies?"
Read on.
Name Your .css Files after Your Keyword Phrase
When creating your external style sheets, consider naming them
after your keyword phrase, such as:
<STYLE
SRC="keywordphrase.css"></STYLE>
Gentry says, "While I haven't fully tested whether search
engines will pick up this use of a keyword phrase, it's possible that you might
get a small boost. I suspect that Inktomi might index this. It seems to index
virtually everything."
One thing for sure, it positively won't hurt you and it
certainly could help. After all, external style sheets are referenced in the
<HEAD> section of your web page. If you name your CSS after the keyword
phrase, you're inserting another instance of your keyword phrase in the
<HEAD> section of your page. Remember that relevancy is based on many
factors, including prominence (i.e., how early on your page and in your tags
your keyword phrase is used).
Name Your Custom Style Classes after Your Keyword
Phrase
Try naming your custom style classes after your keyword phrases.
For example:
textlinks { font-family: Verdana; font-size:
7pt; text-align: center; color: #666666}
...could be changed to,
keyword { font-family: Verdana; font-size: 7pt;
text-align: center; color: #666666}
Gentry further explains how to apply a custom style tag when
using the styles inline with the HTML tag. "When you apply a custom style class
to an HTML tag, the code looks like this:
<P CLASS="keyword">Some text goes
here</P>
"So you can see that the custom style class name shows up in the
source code." Gentry is currently testing these ideas and we should have
results for you in a month or so.
While there are a few optimization advantages to using CSS, the
major advantages come from absolute positioning.
Using Absolute Positioning
What is the advantage of using absolute positioning? Gentry
explains, "The single biggest advantage that absolute positioning affords the
search engine optimizer is that you can order your source code however you want
without affecting the way a visitor sees the page in a browser."
Let's Study Some Examples
Move Text Layers to the Top of the Source Code
First, visit the two URLs mentioned below:
(Note: right mouse click on the links and select 'Open in New Window'.
This will allow you to compare the pages side by side).
http://www.rookiesnstars.com/class/index.html
http://www.rookiesnstars.com/class/css-p-example.html
On the surface, these pages look identical, don't they? Now, go
ahead and "View | Source" ...and take a look at the source code. In the first
example, take notice how the table code pushes the content -- the text
containing the important keywords -- toward the bottom of the page. However, in
the second example, Gentry uses layers, <DIV> tags, and absolute
positioning ending in a result where the keyword containing text is physically
higher in the source code. Here's the tag:
<div id="Layer12" style="position: absolute;
left: 15px; top: 431px; width: 610px; height: 511px; z-index: 12">
Gentry explains, "Notice that these two pages look exactly the
same in a browser. However, you'll notice that in the second example, because
of the use of absolute positioning, I moved the text layer to the top of the
source code so that search engine spiders 'see' it early in their indexing
activities. In the first example, a spider has to go through a significant
portion of the page before it gets to the all-important text."
Using an WYSIWYG Editor Makes it Easier
If you're not a web designer, this may seem a little too complex
for you. However, according to Gentry, it really isn't hard to do. "Using a
WYSIWYG HTML editor makes creating these layers much easier. If you create them
by hand coding, putting the layers exactly where you want will take a lot of
trial and error."
Being able to move your content to the top of the page without
affecting how the page looks is certainly an advantage. But what are some other
advantages to using absolute positioning?
Your Visitors Don't Have to See the Content of your
Layers
Another optimizing advantage to using absolute positioning is
that you aren't limited to placing layers where your visitors can see them.
Yet, the engines can. Let's look at an example:
<DIV ID="Layer12" STYLE="position: absolute;
left: -800px; top: -800px; width: 610px; height: 511px; z-index: 12;
visibility: visible">
"By changing the left property to -800 and the top property to -
800, I have told the browser that this layer now exists 800 pixels to the left
of the left browser edge and 800 pixels above the top browser edge. What does
this mean? It means that you can put content that you want search engines to
see, but not visitors, in this layer. Because the layer is left of the left
edge of the browser, there is no way that a visitor can see it unless he or she
views the source code. Browsers only allow people to scroll to the right and
down. Anything placed left or above the browser window [x,y coordinates 0,0] is
not viewable by visitors."
So, if you don't want to change the text of your web page but
need to add more content, you can add content through layers that only the
search engines will see. "It's very similar to the using a <NOFRAMES> tag
for adding additional content, except that you don't have to remember to put
all of your content inside of angle brackets so that it doesn't appear in a
browser," says Gentry.
What are some other advantages to using this strategy?
- What if your client wants you to optimize pages in the
search engine rankings, but you aren't able to make any visible changes to the
pages themselves?
Using layers, you can add valuable content to the pages and
place it at the top of the source code for an added boost in prominence and
relevancy.
- What if your site uses Flash and you don't want to change
that?
Of course, you could create doorway/information pages, but
using layers would allow you to use the importance of the index page to your
advantage. "You can put in a layer far to the left and/or above the viewable
browser area and put relevant content inside the layer," says Gentry.
- What about using layers outside of the viewable browser
area or making them hidden for your related link lists for link popularity?
After all, you don't want visitors clicking through and
leaving your site through your link lists, so this is a way to solve that
problem.
- What if you've created your web page just the way you want
it, yet the keyword weight isn't where it needs to be to achieve a top search
engine ranking?
You can add additional content in layers that won't affect
how your page appears to visitors, yet engines like Inktomi will find and index
that content.
But what if your site visitor is using an older browser?
"Change the visibility property to hidden and leave the layer at the
bottom of the source code," Gentry says. "That way, if a viewer is able to see
the layer, it shows up at the bottom of the page and viewers will have
to scroll to see the content. Not a super big deal since most people are now
using 4.0+ browsers," he adds.
How does absolute positioning look in both browsers? There's no
problem with IE, but in Netscape, pages using absolute positioning look messed
up if you have JavaScript turned off in your browser.
By the way, here's the layer code for this example:
<DIV ID="Layer12" STYLE="position: absolute;
left: 15px; top: 431px; width: 610px; height: 511px; z-index: 12; visibility:
hidden">
How Does This Work with the Engines?
Gentry explains, "I have tested hidden layers in several pages,
and Inktomi indexed the test keyword phrase. I have not seen the test keyword
phrase indexed in any of the other engines yet. I am not sure why this is so,
but the tests continue. It is possible that some search engines can tell that
the layer is hidden from the visibility property and may treat it as invisible
text. I haven't tested layers outside of the browser's viewable area, but I
will be doing so this month. I am pretty optimistic that this will show some
successful results.
"When using absolute positioning, each layer must have a unique
ID. I will also be testing to see if engines will index layer IDs."
Insert your Keyword Phrase in your <DIV> STYLE
Tag
Another place to put your keyword phrase is in your <DIV>
STYLE tag when using absolute positioning. Here's an example:
<DIV STYLE="visibility: hidden; left: 5;
top: 5; width: 20; height: 15;">keyword-phrase</DIV>
Gentry has tested this technique, and the keyword phrase was
indexed by the Inktomi engines. We're expecting the results from further
testing soon.
In Conclusion
Though Cascading Style Sheets and absolute positioning are
techniques used by web designers to control the formatting of web pages, they
also produce encouraging results when used in conjunction with search engine
optimization strategies. As the strategy matures we'll report the refinements
here. Stay tuned.
For more information, visit:
For More In-Depth Information, Gentry recommends the following
books:
Cascading Style Sheets: The Definitive Guide --
Eric A. Meyer; Paperback
Core CSS Cascading Style Sheets (With CD-ROM) --
Keith Schengili-Roberts; Paperback
Cascading Style Sheets, Second Edition:
Designing for the Web -- Hakon Wium Lie, et al; Paperback
Dynamic HTML: The
HTML Developer's Guide -- Jeff Rule, Jeffrey S. Rule; Paperback (November
1998)
Dynamic HTML: The Definitive Reference -- Danny Goodman; Paperback
(August 1998)
Dynamic HTML For Dummies -- Hyman, Michael Hyman; Paperback
(April 1999)
A special thanks to Bill Gentry of
Look Sharp Designs for allowing
me to interview him and for providing his expertise for the writing of this
article.
Robin Nobles teaches 2-, 3-, and 5-day hands-on search engine marketing workshops in locations across the globe (SearchEngineWorkshops.com) as well as online SEO training courses (OnlineWebTraining.com). They have recently launched localized SEO training centers through SearchEngineAcademy.com, and they have expanded their workshops to Europe with Search Engine Workshops UK. They have also opened the first networking community for SEOs, the Workshop Resource Center (WRC).
Click here to go back to the
index of search engine marketing articles
This work is licensed
under a Creative Commons License.
