Click here to Skip to main content
15,867,686 members
Articles / Web Development / XHTML

Search Engine Friendly Ajax

Rate me:
Please Sign up or sign in to vote.
4.20/5 (3 votes)
16 Mar 2009CPOL1 min read 31.8K   548   15   1
This article shows you how to optimize an Ajax website for Search engines

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

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:

HTML
<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:

HTML
<a href="Pagina.html" title="Search engine optimization" class="MenuItem">Page1</a>
JavaScript
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:

JavaScript
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:

JavaScript
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

  • 16th March, 2009: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Junior)
Belgium Belgium
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionTraffic Load Pin
ÜberRookie10-Oct-10 5:02
ÜberRookie10-Oct-10 5:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.