What is the best way to structure an HTML document for SEO and accessibility?

Question

What's the recommended way to structure html that includes navigation so it's still SEO'able and accessible.

For example, should the structure be more like that of a document:

1. Skip to content (link, hidden by CSS)
2. Navigation
3. Content
4. Other content (right hand panes etc)

or:

1. Skip to navigation (link, hidden by CSS)
2. Content
3. Navigation
4. Other content (right hand panes etc)

Obviously CSS is used to control the layout, but bots and screen-readers ignore the CSS.

Answer 1

I've been asked to move the navigation after content by a client before, but I don't think it helped them much. I generally follow the first structure you mention above.

Some random tips:

• Keep your markup standards-compliant, valid and simple.
• Don't stuff keywords or anything.
• Treat headings like they should be treated. Make sure there's only 1 h1 tag. Use headings sparingly across the page (Google - in the PDF download).
• Use title attributes on anchors and alt attributes on images (but only if the image needs a text equivalent for some users).
• Use rel="nofollow" to direct PR juice to pages you really want them to go to.
• Keep content unique for each page.
• Use Google webmaster tools and MSN and Yahoo!'s equivalent.
• Build, submit and maintain sitemap.xml files.

Answer 2

Any page that doesn't have it's content stashed away in Flash or similar is SEO'able. The web crawlers tend to strip everything and read the page as a text stream. Some pay attention to your keywords, their use in the body text, H1 & H2 tags, page title and even domain name but I don't think they are affected by the order of page structure.

Answer 3

As a screen reader user I don't care where navigation is on the page. The thing that helps the most is to have content listed by heading, for example this question is at an h2 level, and the answers start at the next h2 level. Screen readers offer keys that allow you to skip by heading so I find that heading navigation is quicker then finding the skip navigation link and pressing enter on it.

Answer 4

Reduce everything else other then the content to as minimum as possible.

Very short navigation, add a link to full navigation page / or / load it by AJAX.

No "Other content". If you put anything on the page, they must be related. In addition, they should be sorted by their relation.

Answer 5

It's generally considered to be "best" to have your content as close to the top of the page as possible. So technically, your second example is best. The skip to content link is a nice touch for screen readers though, and that state of CSS layouts being what they are, no one would begrudge you putting some simple navigation at the top of your document. I certainly don't think it would hurt your Google PageRank.

Answer 6

The best thing you can do is move your content as close to the top of the page as possible. I would suggest this structure:

1. Skip links
2. Content
3. Other content (right-hand panes and such)
4. Navigation