Thickbox, accessibility and search engine optimisation.

February 22nd, 2009 by Tim Leave a reply »

Recently I noticed that whilst my new project the Vietnam War Timeline was organically racing up the search engines, through virtue of being in a niche and growing daily in content, the bounce rate was exceptionally high. A lot of traffic was coming in but not venturing beyond the entry page.

After a very quick investigation it became apparent why this was: all links off the timeline fire a new Thickbox window with the relevant content. It’s a nice way to keep people within the timeline when they need to look at more content. Moreover, it’s unobtrusive, meaning the links can just be followed as normal by non-javascript enabled browsers.

However, therein lies the issue of the exceptional bounce rate.

The Thickbox pages are all indexed well by the search engines. Indeed, as they often hold the relevant content, they figure higher than the home page itself for many searches. But these individual pages are devoid of navigation and are singletons in the sense that they give no indication of more related information being available.  In SEO terms they are orphaned pages and in real user terms they offer no way for the user to investigate more of the site.

You’re probably ahead of me with a solution here; it’s a pretty simple one:

  1. include navigation in all content;
  2. if the content is opened by Thickbox, destroy the navigation.

In the iframed page the following Javascript achieves this:

<script>
if(typeof parent.tb_remove == ‘function’) {
document.getElementById(”nav”).style.display=”none”;
}
</script>

This conditional statement checks the parent window for a function called tb_remove (the function that closes thickbox). If this evaluates to true we can use any dom selectors we like to hide page elements we don’t want to show. If the iframed page is accessed directly either by a real user or a search engine, the navigation will not be destroyed and the page will no longer be orphaned.

See it in action by accessing the first item from the Vietnam War Timeline – May 7th – French defeated at the battle of Dien Bien Phu and then try accessing the same page directly.

A small price to pay for added SEO and usability in Thickbox.

Share it:
  • Digg
  • del.icio.us
  • Facebook
  • StumbleUpon
  • LinkedIn
  • Reddit
  • Netvibes
  • Twitthis
  • email
Advertisement

3 comments

  1. David Hurst says:

    You could also do a referrer detection script that looks for users who have come to the page from anywhere except your domain, and then redirects them to the appropriate point within the main website.

    You would need to add a search bot detector also to avoid getting redirection issues on your SEO: i.e. you only redirect genuine users, not search engine robots.

  2. Tim says:

    Hi David,

    Referrer direction would definitely work from an SEO perspective, but I wanted to account for the scenario where Thickbox was either not supported – maybe some moble devices / non JS agent (including bots). It’s a quick fix for Thickbox not being present with the added bonus of making the content a little more SEO friendly and not orphaning the page when real users come to visit.

    As an aside, some versions of IE7 have managed to break Thickbox. The bug occurs because there are versions of IE7 reporting themselves as IE6 which confuses JavaScript and sets the positioning wrong. Genius.

  3. Hi Tim,

    Thanks for the article :)

    In general, would you say overlaying a Thickbox (or Fancybox) window on the homepage is okay for SEO? I’d like to do something like the “All about law” website, but am worried it’ll harm my SEO.

    Cheers!

Leave a Reply