Skip to content


Ajax against SEO and Web Accessibility

 

Ajax has become a new hot terms in web development world, since the rapid growth popularity of some pioneer ajax based web application like Gmail and Google Maps. Lots of web developers, web designers and internet users very excited with the more possibilities which can be done by ajax, many websites developed using the advantages of ajax technique, and since then lots of ready to use ajax toolkit/framework available for developers to simplify the experience of ajax integration eg: jquery, prototype, mootools, GWT, Dojo etc.

But there also some cons in using ajax, and one of the hottest is ajax against SEO & Web Accessibility, Just as ajax, SEO (search engine optimization) also been playing more and more role in web development world, SEO do the self marketing of website through search engines, while ajax providing more interactivity between the user and the web page. Untill now Search Engines Robots do not parse javascript means Search Engines wont crawled content delivered by ajax, web accessibility? since ajax rely on javascript it will break a fall on the screen readers which did not support javascript or javascript has been disabled on it.

Then how to mix ‘em? well i am not an expertise in SEO (Search Engine Optimization) neither does web accessibility, but as much as i read about SEO and web accessibility, it is not as complicated as some said about it. Here i will show you how to create accessible and SEO friendly ajax using Jquery, since i am more familiar with it rather than other toolkits, but ofcourse this technique can be used with other javascript frameworks as well.

  • Create the wholepage as usual using CSS + xHTML. Web standards compatible? well thats not a law, just recommendations, but its good to follow em
  • Optimize your pages as much as you feel it good
  • !important Add filtering in your server side codes where the page is rendered to identify the request from normal HTTP request or via ajax by passing a parameter through ajax request, here i assumed the parameter name is ajax, so whenever var ajax has value then render only any content that needed without any html, head, body tags, else render the full page included those neccessary html tags
1.//@ PHP
2.if(!empty($_POST['ajax'])) {
3. //@ Render only neccessary content
4.} else {
5. //@ Render the whole page
6.}
1.'@ ASP
2.if Len(Request.Form("ajax"))>0 then
3. '@ Render only neccessary content
4.else
5. '@ Render the whole page
6.end if

Assumed we have page structures as follow (you can use apache rewrite or IIS rewrite module to make the links more SEO friendly):

01.<div id="nav">
02.<ul>
03. <li><a href="" title="Welcome Home">home</a></li>
04. <li><a href="" title="About Me">about</a></li>
05. <li><a href="" title="My Services">services</a></li>
06.</ul>
07.</div>
08.<div id="wrapper">
09.<!-- CONTENT GOES HERE -->
10.</div>

Search Engine Bots will not have a problem to crawl ‘em and they will follow and probably crawl the page based on the “href” attribute value.

Now we add the ajax functionality on each links. Download latest jquery library or used Google ajax library API, then create a .js file, name it ajax.js, then add these codes between the head tags

Posted in Ajax. Tagged with , .

0 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

You must be logged in to post a comment.