Moving HTML With JavaScript

Someone asked me why I hide the sidebar on this blog by default, then show it in a different part of the HTML, so here’s the explanation…

Most blog themes float the main body to the left, and make the sidebar on the right “static”. I did the opposite when creating my custom WordPress theme… My sidebar is a DIV that is floated to the right. The reason for this then the content below the bottom of the sidebar wrap around it, which I just think looks better. So here’s the problem… Google weighs content at the beginning of a page higher than content at the bottom, so Google was seeing 99% of my pages as “similar content” because my sidebar needed to be at the top of the HTML source.

So to solve that problem, I just put the sidebar at the bottom of the page in a hidden (with CSS) DIV, then call a simple script to set the contents of an empty DIV (<div id=”sidebar”></div>) at the top of the page, where the sidebar needs to be, to the contents of whatever is in the hidden DIV at the bottom…

<script language="javascript">
      document.getElementById('sidebar').innerHTML = document.getElementById('sidebar_content').innerHTML
</script>

For web browsers, the sidebar renders at the beginning of the HTML source, but Google sees the sidebar at the end of the HTML and pages no longer are seen as 99% similar.

10 thoughts on “Moving HTML With JavaScript”

  1. I’m not a SEO expert but you might want to change your CSS IDs to names like ‘Navigation’ or ‘Header’. I read awhile ago that that these get parsed by big daddy G.. and maybe with keywords like navigation.. the content in those divs might be ranked lower in context to other div IDs that might have the word ‘content’ in them. Also, if you are using any HX tags in your navigation, you might want to consider switching them to a generic div with a class. HX tags get more weight.. so that might take some more focus away from the menu as well..

    I like the javascript trick though, I’ve seen some major css float tricks to accomplish the same thing.. but I never think of them as elegant.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>