With the slow demise and declining support for the once mighty Adobe Flash, web designers have found an alternative solution to creating interesting websites. The increased HTML5 support and improved JavaScript engines from the major browsers has meant that using HTML and JavaScript to create dynamic and engaging websites is no longer something that requires an additional browser plugin. The power, speed and performance of the top modern browsers allows web designers to create hugely interesting animated websites that are much more interesting than your typical text heavy website.

What seems to be the new trend in creating the coolest and funkiest website is to build a “one page website”. This basically means that all the content of the website is on one page, but the designer has created it in such a way that it looks like a normal website with really interesting navigation and animation. But of course, the problem with this is that designers are compromising their search engine rankings just to be “cool”. This too was a problem with Adobe Flash websites in the past.

Fortunately, unlike Flash, because we still use plain old HTML, we can make our one page websites search engine friendly! It just takes a little bit of planning and well thought out user flow.

How To Do It
As mentioned above, the idea with most of these one page websites is that all the content is on one page. Of course, we don’t want to do this since we know that Google (and other search engines) want to lots of pages of content. So basically, we want all the links on our website to link to an absolute URL that the search engine spiders can crawl, instead of the default home page (or one page).

To achieve this, we need to create an individual page for each and every section that we plan to include in the website. Instead of  using the standard method of one page websites to link to each key section of the website using anchor links (e.g. /#aboutus) we aim to link to a fully formed URL (e.g. aboutus.html).

On each page, we will need to specify a DIV that will contain the content for every page to be loaded within the One Page Website. We will then use jQuery to hijack the clicked link and AJAX to load the contents of that called DIV into our page. This may sound a little confusing, but if you take the example below – it will probably become a whole lot clearer!

index.html

<html>
<head>
    <title>Tom Doyle Web Design</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        loadPage();
      });

     function loadPage(url) {
         if (url == undefined) {
            $('#container').load('index.html #header ul', hijackLinks);
         } else {
            $('#container').load(url + ' #content', hijackLinks);
         }
      }

    function hijackLinks() {
      $('#container a').click(function(e){
         e.preventDefault();
         loadPage(e.target.href);
      });
      $(document).ready(function(){
      loadPage();
    });

   function loadPage(url) {
       if (url == undefined) {
         $('#container').load('index.html #header ul', hijackLinks);
       } else {
         $('#container').load(url + ' #content', hijackLinks);
       }
   }

  function hijackLinks() {
     $('#container a').click(function(e){
        e.preventDefault();
        loadPage(e.target.href);
    });
  }

}

</script>
</head>
<body>
    <div id="MyHeader"><h1>Tom Doyle Web Design Page</h1></div>
    <div id="container">
          <div id="content">This is the new web design page. View
          our about us page - <a href="AboutUs.html">click here</a>
          </div>
    </div>
</body>
</html>

AboutUs.html

<html>
<head>
    <title>Tom Doyle Web Design</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        loadPage();
      });

     function loadPage(url) {
         if (url == undefined) {
            $('#container').load('index.html #header ul', hijackLinks);
         } else {
            $('#container').load(url + ' #content', hijackLinks);
         }
      }

    function hijackLinks() {
      $('#container a').click(function(e){
         e.preventDefault();
         loadPage(e.target.href);
      });
      $(document).ready(function(){
      loadPage();
    });

   function loadPage(url) {
       if (url == undefined) {
         $('#container').load('index.html #header ul', hijackLinks);
       } else {
         $('#container').load(url + ' #content', hijackLinks);
       }
   }

  function hijackLinks() {
     $('#container a').click(function(e){
        e.preventDefault();
        loadPage(e.target.href);
    });
  }

}

</script>
</head>
<body>
    <div id="Title"><h1>About My Company</h1></div>
    <div id="container">
          <div id="content">This is the about page
<a href="index.html">Load the homepage content</a></div>
    </div>
</body>
</html>

In the example above we’ve only used the “onclick” event to load content, but you can use this approach with other events and get the same results. I hope this gives you some ideas as to how you could create your one page website to be search engine friendly. 

You can also check out this website that I was involved in building a couple of years ago with a similar approach www.shooteditor.com

If your looking for some inspiration on creating your own One Page Website – check out  www.onepagelove.com

Tags: , , , , , ,