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)
{
var links = document.getElementsByTagName('a');
var menuUrl = "#";
for(var i = 0; i < links.length ; i++)
{
if(links[i].className.match('MenuItem'))
{
links[i].onclick = function(){
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)
{
var links = document.getElementsByTagName('a');
var menuUrl = "#";
for(var i = 0; i < links.length ; i++)
{
if(links[i].className.match('MenuItem'))
{
links[i].onclick = function(){
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;
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;
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];
}
function Init(){
if(document.getElementsByTagName)
{
var links = document.getElementsByTagName('a');
var menuUrl = "#";
for(var i = 0; i < links.length ; i++)
{
if(links[i].className.match('MenuItem'))
{
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;
http.open("GET",menuUrl, true);
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