CSS for best accessibility and SEO

grahamor

Hi,

A new site i am making requires all the main text content of the page to be at the very top of the page when CSS is disabled, i.e. when a spider is crawling or a screen reader is being used.

So i am thinking of the best way to position the header, banner and navigation so they are correct when css is enabled but down at the bottom when css is disabled.

My first thought is to use absolute positioning for these elements, this method is working but makes the markup look strange (header at the bottom of the page)

can anyone recommend an alternative way of doing this ?

Thanks in advance

zAbbo

You might want to link to an example?

You can still use a css header, with H1 for logo and UL for navigation.

This would assist when using a screen reader or text browser?

Spiders (and people) like to see structured content, so if you stick with a semantic structure - that would be best all round.

grahamor

The website in question is http://www.ef.com/master/ils/?ctr=ie

Take the Why EF page for example - http://www.ef.com/master/ils/why/?ctr=ie

Wouldnt it be better to have the text in the middle column at the top of the page when it's crawled, instead of the really long navigation structure and the header ?

I understand what you mean by semantic structure but i thought Spiders are more interested in text at the top of the page, instead of text that is buried further down the page.

NickNolte

In theory you could use negative margins but it's a big of an ugly hack when all you need is to just ensure that there's a 'skip to main content' link at the top of each page when CSS is turned off.

Gambler

There's TONS of pages online that talk about how to structure your CSS for SEO.

A quick google found me this as a start point:

http://www.stonetemple.com/articles/css-and-seo.shtml
http://www.cssnewbie.com/4-ways-css-can-improve-your-seo/

zAbbo

You can also use something like Lynx Viewer to see how the content appears in text format.

WizZard

Google tends to penalise sites that show different content to the user than they do to a spider.
You're far better off with proper separation of structure and style, and let the spiders do their job. They take semantic structure into consideration too.
And usually, if your content is valid (X)HTML and CSS they will prefer it. Neither of those pages are valid XHTML.
I would respectfully suggest you work on that first before tying to optimise for search spiders.

Bluefrog

WizZard wrote: »

Google tends to penalise sites that show different content to the user than they do to a spider.

True but I don't think that really applies in this case. The OP is talking about re-ordering content, not showing different content. There is no intent to deceive about the content of the page and I really can't see Google having an issue with it. There are lots of instances where what the user sees is different to what is actually coded. For example, what about drop down menus that are initially hidden on a page? Google use this technique themselves with the extended links for blogs, documents etc on their own pages.

I have recently started doing this kind of thing on my sites and found that it definitely helps Google choose better content for the descriptive text beneath the link in search results. I am in the process of retro-fitting an existing sites now to see how/if it impacts on ranking.

There is also some debate going on about the value of XHTML & CSS in SEO as one frequently sees sites with neither implemented with top rankings. Parsing a well structured document is definitely easier I have no doubt but I do question the degree to which this affects indexing or improves the accuracy of it.

XHTML & CSS do have a definite value in the separation of content and presentation, reducing the amount of data that needs to be transferred and standards compliant sites will most likely fare better across more browsers and those reasons alone are good enough to make implementing XHTML & CSS a must.

NickNolte

Where accessibility is concerned, including a hidden 'skip to main content' link aside, my advice would be to really learn about accessibility if you haven't already. There are much more important factors such as contrasting colours, the use of semantic and meaningful mark-up and the ability to easily navigate the site when using assistive technologies. I'm not sure about the SEO benefits but going to the trouble of re-jigging your content the way you describe for the sake of accessilibity definitely isn't worth it.