Rearranging page code and advanced css techniques to improve seo

08 September 2008

I was conducting a review of some XHTML and CSS templates for a client recently when I came across an interesting SEO concept that I hadn't heard of before. At first I was skeptical (and I still am a little), but upon closer inspection I started thinking that there could be something it it. Not only in terms of SEO, but accessibility too. The articles I found describing this technique date back to 2004/5 and the fact that I've not found anything more recent on the subject just further fuels my skepticism. Anyway - I thought I'd post my discovery here and see what the wider web design world had to comment...

So what is it? Well, the idea is this: Rather than structuring your HTML in the usual order of header/navigation, content and footer, you build the pages such that the main content appears first, with the navigation and footer underneath. Then, using CSS to style the page you pull the navigation/header back up to appear above the content when viewed in a browser.

The articles I found describing the technique promote the idea that doing this will raise the relevance of your page within search engine rankings since it's believed that some spiders only read the first few characters, or give more weight to content appearing towards the top of a page. You can see the articles here:

  • "Tech republic's 'Rearrange page code to raise text relevance' article(Rearrange page code to raise text relevance)":http://articles.techrepublic.com.com/5100-10878_11-5254255.html
  • "Brook group's 'Putting Content First: SEO and Advanced CSS' article(Putting Content First: SEO and Advanced CSS)":http://www.brookgroup.com/Resources/Search-Engines/content-first.html

It does seems to make sense, but does anyone know of any evidence to support this?

While this is all very interesting from a SEO point of view, what interested me more was the idea that this method of marking-up a page could actually aid usability and accessibility for those using assistive technologies like screen readers, or people with old mobiles or PDA's that can't handle CSS very well. Traditionally we responsible web designers have added things like 'skip to content' links within our HTML markup to help such users, but this negates that need since upon arriving at a page coded like this, the user is presented with the article title and the article immediately without the need to skip past the logo, navigation etc. The flip-side of course is that they would require a 'skip to navigation' should they want to navigate away from the page quickly.

There is another argument I can think of against this method and that's down to good usability through consistency. By this I mean most, if not all pages are currently marked-up in the traditional way that I mentioned before: header/navigation at the top, then content and then the footer. As a result, most people visiting websites using assistive technologies will be familiar with the current structure, expecting to find the header information and main navigation at the top of the page and used to the idea that they need to skip past this to reach the content. As such, re-arranging the HTML as these articles suggest could actually do more harm than good as it's an unconventional approach and inconsistent with most other sites.

Have any of you ever actually implemented this technique anywhere? Does it work? What are your thoughts?

Newsletter

I occasionally write a newsletter with thoughts and ideas around UX, design, strategy, leadership, business and technology.