Putting Content First: SEO and Advanced CSS

So, you’ve researched your meta keywords. You’ve kept them to no more than three phrases per page. You’ve focused the title, meta description, and H1 tags to the keyword sets without going overboard. Your code is lean and mean—no crummy JavaScript or tables. You’ve gone content-crazy and have a respectable mass of content constantly refreshing on your site. You have a juicy site map. You’ve done it all. Or have you?

Relax, there’s always room for improvement with SEO.

CSS Improves SEO

It’s generally accepted that search engines place higher value on the code closest to the top of your HTML, and some may only read part of the HTML document. Most Web pages have plenty of code before the main content, usually the links that form the main navigation of a site.

Unfortunately, moving content above navigation code often makes things difficult to display well, for all but the simplest of layouts. What if you have, say, a header navigation scheme atop a two-column layout?

That’s just the issue we tackled with a recent Brook Group client, Student Loan Xpress. Clean design and attention to SEO were the priorities for this project.

Point your browser to www.slxpress.com. Visually, the page has navigation and search at the top in the black area, then a white header with the logo, and then another navigation set in blue. All this navigation renders before our valuable content. However, if you view source you’ll see the H1 for each page is the first actual HTML element. There are a couple opening DIV statements before the H1 but they contain only HTML comments. This theoretically makes each page’s H1 tag the first item that is considered content by a search engine! Bonus!

Where did the header navigation go?

Move Content Higher in Your Code Using CSS

The navigation is further down in the code than you might expect. We accomplished this sleight-of-hand with CSS. This site uses tableless CSS (except where tables were needed for data, of course).

First, we strictly controlled the pixel height the entire header would use. The header was then taken “out of the flow” of the HTML and rendered at the top of the screen via “position: absolute: top: 0px”.

Next, we pushed the main content down by that same height amount, effectively switching the order in which code is rendered on-screen.

The details aren’t too important—it really was as straight-forward as described above, although I would probably code the page a little differently if I had another crack at it. Just keep in mind a couple of things:

• You will need the Holly Hack, as does every site, IMO. The page in Internet Explorer was simply a wreck when I first looked at it without the hack.
• “Position: absolute;” is a great tool to take HTML out of the flow but it can get sticky when you start defining “top; right; bottom; left” so be careful to only define what you REALLY want absolutely positioned, in this case “top: 0px;”. Otherwise you can use MARGIN to push the area around if needed.

Natural SEO has become a must for most sites. The coder’s challenge is to write clean code that not only renders the page, but gets it right for the search engines. That’s how you keep the customer satisfied.