Search Engine Friendly Ajax






4.20/5 (3 votes)
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:
<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
- 16th March, 2009: Initial post