« Everyone Wants My Blood
AT&T U-Verse »

Monday, August 21st, 2006Monday, August 21st, 2006

Moving HTML With JavaScript

by Shawn @ 4:36 pm · filed under Coding

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.

8 Responses to “Moving HTML With JavaScript”

  1. mad4 Says:
    August 22nd, 2006 at 12:09 am

    I’m surprised you haven’t hacked in some unique meta tags. This would have as much effect as moving the sidebar IMO.

  2. Shawn Says:
    August 22nd, 2006 at 9:22 am

    Like what?

  3. Daniel Wood Says:
    August 22nd, 2006 at 9:48 am

    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.

  4. Shawn Says:
    August 22nd, 2006 at 10:34 am

    Well that seems like way more work than I want to do… :) Especially since my JavaScript trick already gives the desired effect…

  5. Bulbboy Says:
    August 23rd, 2006 at 2:17 pm

    A lot to get my head around.

    Still looks a lot better in Firefox…
    and violas are like little cellos. :D

  6. Max Says:
    August 23rd, 2006 at 3:14 pm

    Interesting. How do you know what Google reads first?

  7. Bluenoser.net » Small change to the layout Says:
    September 12th, 2006 at 6:23 am

    […] Small change to the layout Posted in Site Information, SEO, General Website, Blogging, Website Coding by capebretoner Tuesday September 12, 2006 at about 9:22 am SO I haven’t had the time that I thought to redo the design on the Bluenoser.net sites, however I have made a small shange to the layout of the site.  As you have probably noticed the sidebar is on the right, and if you check the source it is also at the bottom of the page.  This was done using a little trick I read about on Shawn Hogan’s blog.  Basically it is just moving HTML using JavaScript.  Since I am not that good with java I had to copy what he did almost exactly, and even then it took me 15mins.  Oh well hopefully Big-G will think the site is better and will rank me higher for some of my terms, or at least think that my posts are important. […]

  8. Dan Lev Designs & Photography Says:
    January 4th, 2007 at 7:50 pm

    Hmm… interesting technique.

Leave a Reply