Search Engine Friendly Ajax

• Download source - 28.83 KB

Introduction

This article shows you how to develop a simple website which is optimized for search engine crawling. It solves the issues that some search engines have with JavaScript.

Example

• Ajax webdesign - Search Engine Optimization

Search Engine Optimization

Here are a few tips for better results in search engines.

Keep JavaScript Out of HTML

A search engine ignores JavaScript in websites. Most Ajax sites use functions which are called within a hyperlink. For example:

<a href="#" onclick="window.open('help.html'); return false;">Test</a>		

Search engines search for links within your page to crawl further into your website. In the above example, the href shows #. Search engines will be limited to go to the next page of your site. A solution for this problem in the next example:

<a href="Pagina.html" title="Search engine optimization" class="MenuItem">Page1</a>

if(document.getElementsByTagName)
{
        //Get all elements with tag <a>
        var links = document.getElementsByTagName('a');
        var menuUrl = "#";
        
        //Browse arraylist Links
        for(var i = 0; i < links.length ; i++)
        {
            //If element is a menuitem
            if(links[i].className.match('MenuItem'))
            {
                  //Add function to onclick
                  links[i].onclick = function(){
                  //or other function like my website to get XMLrequest
                  var url = this.href;
                  window.open(url);
                  return false;
                  };
            }
        }
}

The example above shows how to link functions to a hyperlink in your website without using inline JavaScript in the hyperlink.

Use Anchor Tags for Bookmarking Purposes

An Ajax website breaks the back button of your browser. When you navigate through an Ajax website and click back, you will go to the first page you went a while ago. Also, if you want to bookmark the page, it will bookmark the first page of the website you visited. An example of how to fix this is shown below:

if(document.getElementsByTagName)
{
        //Get all elements with tag <a>
        var links = document.getElementsByTagName('a');
        var menuUrl = "#";
        
        //Browse arraylist Links
        for(var i = 0; i < links.length ; i++)
        {
            //If element is a menuitem
            if(links[i].className.match('MenuItem'))
            {
                  //Add function to onclick
                  links[i].onclick = function(){
                  
                  //get attribute list
                  var att = this.attributes;
                  //works only in Firefox
                  this.history = location.href;
                  
                  //set a parameter behind the URL example : #page
                  location.hash = att.getNamedItem("href").value;
                  window.status = att.getNamedItem("title").value;
                  document.title = att.getNamedItem("title").value;

                  //function

                  return false;
                  };
            }
        }
} 

Permanent Links

If you go and have a look at my website here, you will see that every page has a permanent link. I made this possible by parsing a div from each page to show in the content div when somebody clicks a link. The full code of my JavaScript is:

var loader = false; // false if no Loader

var http = false;
window.onload = Init;

if(navigator.appName == "Microsoft Internet Explorer") 
{
  try 
    { 
        http = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    catch (e) 
    { 
       try 
       { 
          http = new ActiveXObject("Msxml2.XMLHTTP"); 
       }
       catch (e) 
       {} 
    } 
} 
else 
{
     http = new XMLHttpRequest(); 
     if (http.overrideMimeType) 
     { 
         http.overrideMimeType('text/html'); 
     } 
}

    var parts = window.location.href.split("#");
    if(parts.length > 1)
    {
    location.href=parts[1];
    }
//Load function to add onclick function to menuitems
function Init(){

    if(document.getElementsByTagName)
    {

        //Get all element with tag <a>
        var links = document.getElementsByTagName('a');
        var menuUrl = "#";
        
        //Browse arraylist Links
        for(var i = 0; i < links.length ; i++)
        {
            //If element is a menuitem
            if(links[i].className.match('MenuItem'))
            {
                  //Add function to onclick
                  links[i].onclick = function(){
                  menuUrl = this.href;
                  var att = this.attributes;
                  
                      this.history = location.href;
                      location.hash = att.getNamedItem("href").value;
                      window.status = att.getNamedItem("title").value;
                      document.title = att.getNamedItem("title").value;

                  
                  //Open URL given by href attribute
                  http.open("GET",menuUrl, true);
                  //If page is loaded
                  
                  http.onreadystatechange=function() {
                    if(http.readyState == 3)
                    {
                        if(loader)
                        {
                        document.getElementById('Content').innerHTML = 
			"<br/><br/><center><img src=\"img/ajax-loader.gif\" 
			title=\"Loading...\" /></center>";
                        }
                    }
                    if(http.readyState == 4) {
                        if(http.status == 200)
                        {
                         div=document.createElement('div');  
                         div.innerHTML = http.responseText;
                         document.getElementById('Content').innerHTML = gethtmlDiv(div);
                         }
                         else
                         {
                         document.getElementById('Content').innerHTML = 
			"<center>... Could not open page ...</center>";
                         }
                    }
                  }
                  http.setRequestHeader("Content-Type", "text/html");
                  http.send(null);
                  return false;
                };
            }
        }
    }
}

function gethtmlDiv(dv)
{
    var html;
    var boolfound = false;
    
    for(var j=0,d;d=dv.childNodes[j];j++)
    {

         if(d.nodeName == 'DIV')
         {
           if(d.id)
           {
               if(d.id.match('Content'))
               {
                     html = d.innerHTML;
                     boolfound = true;
               }
               else
               {
                    html = gethtmlDiv(d);
               }
            }
            else
            {
                    html = gethtmlDiv(f);
            }
        }
        else
        {
                html = gethtmlDiv(d);
        }
        
        if(html)
        {
            break;
        }
        if(boolfound)
        {
            break;
        }
    }
    return html;
}

History

• 16^th March, 2009: Initial post