Using CSS & JavaScript to move content & improve rankings

  • 0
  • February 10, 2008

Although Google is very good at identifying sitewide navigational elements the algorithm still works on the basis that the content at the top of the page is the most important. If you consider a website with 3 blocks of text on a page the first one is usually the one that has the most influence on rankings.

If you look at the text only cache of a Blogstorm article in Google you can see that the source code starts with a few navigational links and the alt tag behind the logo before quickly moving to the article h1 tag, then the article content, the comments and finally the navigation links. Using this structure helps Google understand what the page is about and will improve your rankings.

Luckily most blogs use a CSS template similar to this (some don’t use the h1 tag on the post pages very well) so blogs don’t need too much SEO work. The hard part is creating the same effect on e-commerce sites or content sites.

Moving content

One of the best (on site) ways to rank highly for a popular keyword is to have a 500 word article about that keyword right at the top of your homepage. The problem is that this isn’t practical for any commercial site. The solution (other than using hidden text) is to add some content at the top of the page in the source code and use CSS or JavaScript to make it display lower down when a user views the page.

Moving content is against the spirit of the Google Guidelines so if you are using a lot of other aggressive techniques then it is wise to steer clear of the methods discussed below. However for large brands using mainly ethical SEO methods the chances of failing a hand edit are zero.

Simple CSS

Mobile network Three uses an interesting method, you can see their homepage contains a block of text at the bottom of the page starting with the words “Mobile Phones”. Looking at the source code reveals that this bit of code is actually the very first thing Google sees on the page. Three makes the technique nice and easy to spot by labeling the div as “_ctl0_divSEO”.

JavaScript & CSS

Moving content with JavaScript is demonstrated very well at Shawn Hogans blog, Shawn could just use CSS to achieve the same effect but the method is very useful in situations where CSS would fail.

Looking at the source code of Shawns blog you can see the code starts with an empty div:
<div id="sidebar"></div>

At the bottom of the page the sidebar is generated but is hidden using the CSS display:none; property.

Some JavaScript then populates the empty sidebar div with the contents of the hidden div. The result – search engines see the content before the sidebar.

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

JavaScript & noscript

This is a very good way of displaying a lot of content in an unobtrusively small space at the top of your homepage. The idea is that you use a JavaScript news ticker or scroller at the very top of your page and then add noscript tags directly below it with the same content as the ticker.

In theory you can add anything to the noscript tags but if it is at all different to the actual content you risk failing a hand edit. Sometimes adding a lot of text in a noscript tag isn’t a good idea in which case you can use a CSS scroller to achieve much the same effect (getting a lot of text heavy content at the top of your page without pushing the commercial elements too far down).

Photo credit

Patrick Altoft

About Patrick Altoft

Patrick is the Director of Strategy at Branded3 and has spent the last 11 years working on the SEO strategies of some of the UK's largest brands. Patrick’s SEO knowledge and experience is highly regarded by many, and he’s regularly invited to speak at the world’s biggest search conferences and events.

  • Mike the Internet Marketing Wizard

    I’ve used this technique extensively and found it to work quite well, usually, fairly quickly in terms of improved ranking results.

  • James Mann

    This may be just what is needed for a friend and client. He shows testimonials on his front page but it’s javascript and none of the testimonials show in the source code, so they are pretty useless for seo purposes.

    I will send him this post link so he can see if this will solve his problem.

  • Sam SEO from Montreal

    I’m pretty sure if you use those techniques wisely, it just help.

    Just don’t try to fool too much google as it become more and more human… and will be
    I personnaly use CSS to move content to be show in the right order for screen reader (and SE’s).

  • Pingback: SEO Company Reading - Hobo SEO UK()

  • HSN

    How would one go about moving the all Javascript in WordPress found in the header into the footer? What I’m thinking here are two files found in the header:


  • Syl

    Good question HSN. Hopefully someone will answer it..

  • Internet Marketing

    I would advise against doing most of the techniques above because Google update their algorithms constantly and who’s to say they won’t penalise in the future! My only advice would be to do things ethically from the beginning. Position important content at the top in your code and use javascript to introduce carousels, expanding divs etc to not display all the content all at once.

  • Real estate software

    Hi all,

    I have used wide used of java script in my site in place of iframe for making it Google friendly.have used some noscript tags also no problem .

  • Real Estate Software

    I completely agree with “Internet Marketing”. Being natural is the key to please Google !

    Realty Redefined – The Real estate software

Like what you see? Talk to an Expert