Webpage layout order for my webapp - does it matter if the Sidebar is programmatically displayed before the main content?

Question

OK that's the worst title I could ever possibly think up. But I'm not too sure how to phrase it!

What I mean is, is it inefficient for the browser, search engine optimisation, or any other important factors, if programmatically my float:righted sidebar appears in the markup before the main content div, which is set to float:left?

To the user, the main content appears on the left, and the sidebar on the right. In the source code it appears like so:

<div id="sidebar">This is where my sidebar goes </div>
<div id="content">This is where my content goes </div>

Will this affect SEO or other factors in my page?

Answer 1

You really can't say... but I suppose it won't since bots like Google's web crawler follow links and not text... but it might effect the SEO of images, since those are indexed by "surrounding content".

However, it is really the Right Thing to do, since people on "restricted devices"(really old cell phones) and people using screen readers will see your content in the correct order.

Answer 2

Yes, put your content first.

WordPress has a nice discussion about content structure and SEO. You want to put content as close to the beginning of the served HTML file as possible. Robots and screen readers will get to what they want earlier, and I'd guess that the browser would start rendering content according to its place in the served file as well. CSS makes positioning things out of order more or less trivial, so why not give the HTML content all the help it can get?

Answer 3

Search engines nowadays are smart enough to distinguish between a navigation and the main content. You can help by adding meaningful class names or ids. I’ve never seen any real impact on ranking by the order of both sections.

Whatever you do: add a skip link for keyboard users to jump to the other section. It should be visible on :focus. And hide the navigation in your print stylesheet. :)