I have a navigation bar div with all my navigation code, a sidebar div with all my code and content that goes in my static sidebar, a footer div with all my footer code that goes in my static footer, and a content div with all my content for each page (changes on each page).

Should I list my content div first in my HTML to optimize my SEO since my content is what changes on each page of my website and houses the "meat of my webpage" (although my sidebar does have good content but it is static on all pages), or is it OK to list my navigation code before my content code?

As an extension, if the order I list these div's makes no difference to the appearance of my site, would it make a difference either way how I list the code, or should I play it safe and list my content code first?

Note: As far as how this differentiates from other similar questions, I am not inquiring so much about duplicate content as I am about the weight given to code based on its placement within HTML. I know a lot of websites list their navigation code first, so I'm wondering if that would be a bad tactic considering the content is thus listed lower in the document.

3 Answers 3


As a rule, what makes sense for semantic markup and accessibility usually also makes sense for SEO, and you should certainly not damage usability or code quality for the sake of any SEO that Google have not recommended to webmasters.

On-site SEO should be about helping Google index your site thoroughly and accurately, and not trying to find loopholes in their algorithm.

  1. Even if your css works to display the content correctly on a monitor, it will still appear in the wrong order to someone using a screen reader - people expect the main navigation to appear before the content.
  2. The HTML5 tags aside, header, article, nav and footer let html renderers know what part of your page is content and what is template. I'd be surprised if the search engines do not use this information when it comes to prioritising the content section.
  • 1
    You make some good points! The only thing I quibble with is ordering HTML with CSS is not a loop hole in the algorithm. Google has even recommended this CSS option as a way of helping to understand the content. I personally prefer just to order the HTML the traditional way but being careful not to over optimize the code. I like your point about screen readers especially! This is often an important consideration that we forget. As well, I am not sure how HTML5 ready Google is- that is, I have not seen much on this. I know that they state that HTML 4 or greater is preferred.
    – closetnoc
    Commented Jul 11, 2014 at 19:54
  • 1
    By a loop hole in the algorithm, I mean more trying to fiddle with your content purely as an attempt to improve rankings rather than to improve the code. More than anything, such tweaks are usually a lot of effort for very little benefit. I've never actually seen them recommend putting the navigation after the content. Do you have a link?
    – RichardB
    Commented Jul 11, 2014 at 20:01
  • Also: If they are not using html5 tags, it would still be easy for them to work out what is template and what is content by what code changes on each page. Simply assuming every site has the content is at the top of the page would not make for a very accurate search engine.
    – RichardB
    Commented Jul 11, 2014 at 20:06
  • No link. I just remember this as part of my research. However, pushing content to the top of the HTML is commonly recommended even by Google. The CSS/HTML reordering is often not a big effort. Again, the only real advantage is not confusing content keywords with navigation and sidebar elements which can skew the results. Again, I often state that HTML in traditional order is fine and there is not much difference in performance. I don't reorder my content. I just don't care that much!
    – closetnoc
    Commented Jul 11, 2014 at 20:07
  • 1
    Genuinely can't find a single reference to it from Google on the web. Their webmaster guidelines don't say a thing. Ultimately, most ranking is from off-site stuff, so I can't see it making much difference either way if you prefer to code like that.
    – RichardB
    Commented Jul 11, 2014 at 20:15

Even if you do not order anything and the navigation and sidebar div(s) appear in the HTML code before the content, Google and Bing can sort this out without too much trouble, however, there is a performance boost, albeit not a huge one, when you can push these elements below the content. The primary reason is because the HTML is read in byte order from left to right top to bottom, and the less you confuse the keyword weight of the content the better. That being said, search engines had to learn how to read HTML well early on so natively, they can figure things out rather well.

I always recommend pushing the various repetitive portions of your HTML down below the content. If you cannot at this point, do not sweat it. But when you can, make the effort. As well, because navigation is an important element and important to search engines, that HTML code should follow your content first. Sidebars carry less weight than navigation so the sidebar should follow navigation. If you have more than one sidebar of repetitive(ish) HTML, then you decide which one is more important and make sure they appear in that order. Remember that navigation is an important SEO element. Also remember that sidebar navigation is a less important SEO element compared to navigation. So it is important to follow tradition and make sure not to confuse this order otherwise your SEO performance may be confused.

  • I can push repetitive portions below the content. That is the essense of my qustion. Should I push the navigation below my content (as it is repetitive) or keep that above the content, as you said it carries weight?
    – etangins
    Commented Jul 11, 2014 at 20:28
  • 1
    Good question. If your navigation keywords will dilute your content, then I would consider placing it just below the content. If your navigation compliments your content keywords, then I might not bother. @Richard B mentioned nav which helps search engines to know what code is navigation. I have used this tag, but I cannot tell you that it does anything- my fault I am sure. But then again, I have not used this CSS ordering for myself yet mostly because I will be working on a new responsive design template and do not want to work on code that I will be throwing away.
    – closetnoc
    Commented Jul 11, 2014 at 20:33
  • Just to be clear, I have used the CSS reordering on other sites and I know that search results can be cleaner/tighter/more relevant if done well.
    – closetnoc
    Commented Jul 11, 2014 at 20:36

Google knows what is what before your visitors do

Google's crawlers have really advanced since there first launch, their crawlers has the ability to detect actual content area, the width of that content as well as the height of the actual content region.

Repeated Content

Elements such as headers, footers and sidebars that get repeated on several or all pages are noted by Google and often do not count to the actual page ranks but rather confirm what you have on that page.

HTML5 is great but it's not required

With HTML5 we have many elements like article, header, footer, section, aside, figure and so on that it's believed that this massively helps Google when in fact there's little to none to suggest that a HTML5 site will rank better than a HTML4 site. This is because Google doesn't just code their bots for webmaster that know what there doing. Different content managements and themes work in different ways and Google attempts to cater for all.

Page Layout

Google also knows the importance of being flexible in detecting sidebars on the left, the right navs at the top right, middle and even on the bottom. Google will also be able to adapt to pretty much any design on the menu system after-all the internet would suck if every site was the same.

Using Position:Absolute

Some websites use position absolute in there CSS code meaning that even NAV menus that are not above the fold appear in order for search engines but again Google knows what is what regardless where it may be found on the page.

Tug of war Pushing and Pulling

Many frameworks are now starting to use push and pull methods that will change the layout depending what device is being used, but this is generally used for the user not the Search Engines. This is because on mobiles the menu may take up a lot of room while you may want them to dive straight into the content , while on a desktop machine because the resolution is bigger the user will see both the menu and the content.

  1. Bootstrap for example uses .col-X-pull-X and .col-X-push-X
  2. Zurb Foundation uses X-pull-X and X-push-X

Experience, Experience, Experience and then Experience

You should always code for your audience and only ensure that you are doing the essentials to improve SEO like ALT tags, Headers and so on. In the rare event that Google dislikes something it may reduce your SEO value slightly but user experience trumps SEO all day long! and the value of visitors that create natural SEO will counteract any minor a hundreds time over. Off Page SEO remains the best way to remain and increase in rankings.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.