…can they really be used to your advantage in optimizing your web pages?
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
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
-==-
This defines the size of the text for one paragraph only. In the
-==-
section of the web page, such as
-==-
This removes the underlining for all links on the page.
In an external style sheet, such as
-==-
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
-==-
style sheet definition.
An Example, Using an
-==-
Tag
The following code is what Gentry is using in his style sheet…
-==-
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
-==-
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:
-==-
With the HTML tag, however, you can’t remove the bold face property or fix the font size of the
-==-
tag.
Here’s the code using a style sheet:
-==-
“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:
-==-
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
-==-
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
-==-
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:
-==-
…could be changed to,
-==-
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:
-==-
“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,
-==-
tags, and absolute positioning ending in a result where the keyword containing text is physically higher in the source code. Here’s the tag:
-==-
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:
-==-
“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
-==-
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:
-==-
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 STYLE Tag
Another place to put your keyword phrase is in your STYLE tag when using absolute positioning. Here’s an example:
-==-
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:
World Wide Web Consortium’s (W3C) Cascading Style Sheets Home Page – http://www.w3.org/Style/CSS/
WebDeveloper.com – http://webdeveloper.com/advhtml/
Web Design Group – http://www.htmlhelp.com/reference/css/
CNET Web Building, Getting Started with Cascading Style Sheets – http://www.builder.com/Authoring/CSS/
Cascading Style Sheets Tutorial – http://nowheres.hypermart.net/
ZDNet Developer – http://www.zdnet.com/devhead/filters/0,9429,2133212,00.html
Absolute Positioning with CSS – http://www.zdnet.com/devhead/stories/articles/0,4413,1600433,00.html
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 conducts live SEO workshops
(http://www.searchengineworkshops.com) in locations across North
America. She also teaches online SEO training
(http://www.onlinewebtraining.com). Localized SEO training is now
being offered through the Search Engine Academy.
(http://www.searchengineacademy.com) Sign up for SEO tips of the
day at mailto:seo-tip@aweber.com.
