LabLogic Tutorials LabLogic

Ajax, iframe, bookmarking and SEO

[08/03-2012] Working on one of my sites ( I came across a challenge. I wanted to make the site look smart, be fast loading, but NOT loose out on traffic from search enginges.

So naturally I wanted to use some sort of tecnique where I didnt have to reload the whole site everytime a new link was clicked. This can be done either with AJAX or iframe. You may heard about the problems with AJAX and SEO? When the search engine robots crawl your site they eat your text, follows your links and so on. With AJAX they have problem following your links.

What is AJAX?
AJAX stands for Asynchronous JavaScript and XML. It is an advanced web development method used to create more interactive and dynamic websites. AJAX accomplishes this by making request calls back to the web server without interfering with the content and behavior of the rest of your webpage.

If you use IFRAME the robots can index your links, but the rest of your page will not be visible to later visitors entering from the searchengine page. Also when loading some content into an iframe, or using iframe as buffer, your visitor won't be able to bookmark that specified page. He or she will only get your mainpage.

The solution:

To be both able to load the content fast and also get all links indexed I came up with the following workaround:

1. Make a normal link.
<a href="" target="your-iframe" onclick='window.location.hash = "tutorials/ajax-iframe-seo-tutorial.php";>AJAX, IFRAME AND SEO </a>

2. Use onclick event to load file location into the url (with the window.location.hash command)
If you look at the first line we got a link to our page, which is important so that the robot can follow our link and crawl the page. Second you will see onclick='window.location.hash = "tutorials/ajax-iframe-seo-tutorial.php" which will change the url (clientside) like this: index.php#tutorials/ajax-iframe-seo-tutorial.php This is important so that the visitor will be able to bookmark the page.

3. Put this javascript code into your mainpage:
if(window.location.hash!="") {
      var loadFile = window.location.hash.substr(1).toLowerCase();
      if (loadFile.indexOf("http")!=-1 || loadFile.indexOf("www")!=-1) document.getElementById("your-iframe").src = "error/access-denied.php";
      else document.getElementById("your-iframe").src = loadFile;
When your visitor now bookmark, your website it will dynamicly load the correct content into the iframe. Even if you hit the refresh button it will do so. Go ahead and try it on this page! Also added a some security: Change "error/access-denied.php" to your own errorpage.

4. put this javascript code into the body of your destination page:
      if (self==top) window.location = "";
This will ensure that when visitors arrive at that page, from the searchengine, which has indexed the page as explained above, will load all the website content, like menu's, logo and such.

Only one drawback and that is for those who has disabled javascript, but searchengines will still be able to index your pages.