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 #section2
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#section3
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#section4
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#section5
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.
Thanks for the article. Other than the grandma comment, which was rude, the article was brief but helpful. I’ve been doing SEM for years but haven’t had the opportunity to build a pure CSS-driven site yet. I’m looking forward to it, and if I need a little ammunition to convince others that it’s worthwhile, this article may help a little bit.
By the way, my grandmother at 81 is making lovely use of the web.
Cheers,
Gradiva
Can’t believe you’d call your grandmother “dimwitted.” That’s just mean.
It’s interesting that the article doesn’t mention the (X)HTML code structure itself. For example, with the magic of CSS, I can have a left menu that actually gets coded on the page /after/ the main content, so even though my menu is entirely text-based, contains H1 tags, etc, when google spiders my page, it’ll use the beginning text – which is actually content – as the small summary in its results.
Example -> http://quotes.prolix.nu/
This site uses a tweaked version of the blue robot CSS code. Good stuff.
Hi, i’m new to CSS layout. After 6 years of mucking up HTML, i discovered this method really recently, after being struck by espn’s site.
Not seeing any tables was a shock. This article gave me a lot of simple pieces of advice. I will source it when i try to convince the management to switch to CSS layout for our clients.
let’s say i don’t want to use a h1 tag, just an image? is there a way so that i still reveive good search egine results? thx
Another potential benefit for SEO of CSS design is the ability to position content in the hierarchy of the HTML in order to have the most important (keyword-rich) content at the top.
Example: the chairman wants his 500-word mission statement appear at the top of the page, with product information below it. CSS-P saves the day by allowing us to position the content that the search engines require at the top of the HTML and yet display the chairman’s waffle at the top of the displayed content.
After reading the article I thought that it is time to put it to the test. I proposed to my marketing team to implement across Europe and see what results we get. Will provide feedback on rankings in 1 months time.
In general terms, I’d say that the article is right, but I think that any designer hoping that his/her rankings will get a boost only because of the code/content ratio is in for some nasty surprises. It’s really one of the ranking factors, but is not by far one of the most importants.
And, of course, it’s not necessary for a web to be in XHTML+CSS to achieve that ratio, old HTML+CSS will do fine, but I agree, it’s good that these good practices gets rooted in he XHTML way of coding.
You can get a good placement without using a h1, but images has nothing to do with your placement 😉
You called your grandmother completely dimwitted — enough said!
Googlebot happens to love well marked-up websites + Googlebot loves a good code to content ratio.
XHTML / CSS offers you both.
I honestly think that the amount of code does not matter as long as the site is quick loading, and has at least some amount of content to be indexed (or sufficient link popularity to not need to worry about on the page factors.)