Any internet marketing professional will tell you, just as we will, that an effective Search Engine Optimization campaign can generate more traffic than an expensive banner-ad program, or costly and time-consuming pay-per-click methods. Some of the best methods of optimizing a website are ensuring that a page is not overly heavy in file size, maintaining a good content to code ratio, using lots of relevant content, and filling the page with as much text and links as you can without “spamming” the search engine spiders.
We’re not going to cover all of the basics of XHTML and CSS. We assume that you have a basic, working knowledge of the two languages and have some experience in utilizing them. We suggest reading ALA’s CSS articles, and Zeldman’s Better Living through XHTML if you need more on the basics or more reasons to switch over.
We’re going to be focusing entirely on the benefits of using XHTML and CSS to show you how to improve the readability of your code for search engine spiders, maintain a good content-to-code ratio without going beyond file-size and word-count limits, and how to use CSS to mimic common image effects.
There will be – in no way, shape or form – any unethical methods of SEO covered here. If you’re reading this article in the hopes of learning how to get an adult site listed in the “school supplies” category on Google, we kindly suggest you fall off the face of the earth. Any hate mail regarding this can be directed to sally@morekinky.net. It’s due time to pay her back for all those “petting zoo pictures” that manage to bypass my spam filtering system.
File size and content ratios
The best way to begin an optimization project is to make sure that all your code is readable. Search engine spiders work much the same way that the human eye does, and if there’s too much “junk text” in your HTML, it’s going to be hard for spiders to know what is what and to be able to decide that a page is relevant to a particular category. Improving your structural organization will not only make it easier to read for you, but ensure that search engine spiders know what you’re trying to show them.
Visually, a human reader sees the green Arial text set at 24px and bold green at the top of the page as the main title for your website. However, if you don’t have your markup implemented well enough, a search engine spider will not. Instead of using this to declare your title:
<strong><font color="#00FF00" size="24px">Main
Title of My Very First Website </font></strong>
Put this in your XHTML:
<h1>Main Title of My Very First Website</h1>
…And this in your CSS:
H1 {font-family: Arial; size: 24px;
color: #00FF00; font-weight: bold;}
Using XHTML to declare your main heading as H1 will ensure that a search engine spider knows that the contained text is the title of the page, while styling it with CSS yields the desired design effect. Using H1 through H6 accordingly, you can use this methodology to style the sub-headings on your website and let the search engine spiders know they are of importance. But don’t forget to use one or two of your keywords in the title—otherwise it won’t make a difference either way.
Using Images Wisely
An H1 tag placed directly after the <body> tag will be weighted heavily by many search engines, especially if it contains one or two of your keywords. But sometimes, putting a nice big heading tag after your body tag can detrimentally affect your masthead image placement. Using CSS, we can work around this little hang-up in some instances by placing our masthead logo as a background. To do so, the following code would be added to your BODY declaration in your CSS file:
background-image: url(../images/logo.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top left;
Embedding a logo as a background instead of dropping it straight in to the HTML will make that piece of the puzzle fit together nicely. (Unless, of course, you don’t need the image to be presented before your H1 element.)
Pesky Javascript Rollovers
Everyone loves rollover effects. Even my completely dimwitted grandmother likes it when an e-mail link rotates every time she hovers over it. Using CSS allows you to emulate rollover effects with grace and lower file size, but one of the greatest benefits is providing more textual content for spiders to “read.” Using CSS to dictate rollover effects instead of separate images will give you a marginal, yet effective advantage in the fight for search engine positioning, especially if the textual link is one of your keywords.
Tim Murtaugh’s Mo’ Betta Rollovers is a great guide on how to use HOVER states to emulate common image rollovers.
Wrapping it all up
There are many ways to increase a website’s search engine positioning. Some of them are extremely effective while others are offensively unethical. Using standards compliant methods to create highly readable, content rich code with optimized content can aid in your campaign to dominate the search engine category. Every website has a place on the net, just make sure you know where your place is.
