Ajax, iframe, bookmarking and SEO
Working on one of my sites (LabLogic.net
) 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 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.
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="http://lablogic.net/tutorials/ajax-iframe-seo-tutorial.php" 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.
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.
if (self==top) window.location = "http://lablogic.net/2012/index.php#tutorials/ajax-iframe-seo-tutorial.php";
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.
What have we achived?
- Fast loading webcontent
- Possibility to bookmark
- No design compromising
- Indexing by webcrawlers
will still be able to index your pages.