Can AJAX and SEO live together?

AJAX and SEO can they co-exist together?

This is a question that has prevented many developers from really grabbing hold of this new technology and running with it. Without the need to refresh the page for content retrieval, the curse of the non-spiderable page that has plagued Flash rears its ugly head. Without having all your content on individual physical pages, how will Google, Yahoo, MSN, Ask.com and the like be able to know it actually exists?

An AJAX based user interface opens up numerous possibilities for non-Flash based, quick, user-friendly websites. If you build this in conjunction with other Javascript/DHTML libraries, such as script.aculo.us, to liven up your interface, you can make some pretty impressive Flash-like sites, but without the need for an external plugin, thus offering better user accessibility. The only problem with programming your latest website like this is you still inherit the problem a Flash website has when it comes to search engine indexability - a lack of search engine accessible content.

AJAX Development Ins & Outs
When a site is using AJAX to display its content, not all of the site’s content is viewable right off the bat. AJAX allows the website to pull in data in real time without refreshing the page. The only problem with this is that since it uses Javascript to display the new content, it is not going to be viewable by search engines. In order to circumvent this problem, we look to some age-old tried and true methods of determining content display - a browser detector. In order to properly solve the problem though, we will need to process the browser detection server side. PHP browser detection scripts are fairly easy to locate with a simple search; one in particular has proved to be perfect for solving our problem - Tech Pattern’s PHP Browser Detector. Tech Pattern offers their script in a couple flavors with the ability to detect your browser version, OS, and browser platform - including spider browser platforms.

How You Can Use AJAX & Still Benefit in SEO
By initiating this browser detection script at the beginning of any page using AJAX to display its contents, we will have the ability to display the same content the user can view out to the search engine robots. If a user visits a page, only the overview content will be displayed because this is all that is initially called from the database to be output at initial page build. The user will still be able to view the each sub-section by itself using the normal AJAX interface calls, writing in the remaining content of each sub-section via Javascript. However, if a search engine happens upon the site the server will know to display not only the overview on initial page build, but all the sub-section contents as well. Because this content display decisions is being done server side, it is pre-page-build and will not affect search engine visibility.

The content being displayed on the page is all still accessible by the user, making this a white hat technique. The content being pulled down by the search engine is the same exact content pulled from the same database by AJAX when a human interacts with it, only using this method it is all displayed at the same time pre-page-build, allowing for a completely Google friendly kick-ass AJAX website.

Comments (3 comments)

I did consider this method when writing up my example of AJAX and SEO but after much deliberation I decided on the highly simplistic approach of using mod_rewrite and a dynamic HTML sitemap.

My issue with user agent detection was one of manipulation. If Google changes it’s referral string, and it has been known, then detects anything other than 100% identical content, it may ‘decide’ to judge against you.

My laziness, low maintenance, easy fix chip kicked in and decided on a quick, long term solution.

Either way, there are plenty of opportunities for exposing dynamic database content to the search engines and it’s good more people are looking into various solutions to this.

Ed / October 11th, 2006, 10:39 am / #

I am also glad to see people coming up with interesting solutions to fix this problem. But neither of you came up with the most simplistic approach that will work in 99.9% of all cases.

I agree with Ed, browser detection is NOT a good idea. You can never satisfy everyone. What do you do when you have a screen reader hit your site? The failover rate is not good enough. There is hundreds if not thousands of spider/robot names. Conversely, there this many, many browser types also.

I have not written an article yet on the advised approach, but I did present it at SES in Chicago earlier in the month and it was very well received. The summary is build the site so that it will for for all users, including search engines with all normal anchors linking to other pages use the rel atribute to identify your specific AJAX request. Then onload of the page, use JavaScirpt to comb through the site and change the functionality of the href to null, and add an onclick to run the AJAX requests. This will require advanced JS techniques to update the URL to ensure that you can click forward and backwards and bookmark and deeplink and all those wonderful things.

If you do not beleive me, wait until the new http://www.rolex.com site launches. It is making use of this exact technique for the XHTML presentation layer. The site will be all Flash should you support it, but if not, the XHTML, CSS and JS layer will make use of AJAX. The site will display whatever it is you are capable of supporting, be completely spider friendly and user friendly.

Cheers,
Jim

Jim M - Calgary Web Designer / December 30th, 2006, 10:14 am / #

I started playing with the idea of mixing AJAX and SEO together 3 days ago. And came up with this. So far I think I followed all rules required for SEO and still getting to use the AJAX capabilities. Feel free to criticize it. If you think there will be any SEO issues.

Benj Arriola / November 28th, 2007, 1:36 pm / #

Post a comment

Subscribe

Feed IconGet the Feed

Interested in working with us?

Contact Us

Coworking Available

dt offers shared coworking space to san diego web design and other independent professionals. All coworkers have access to our workstations, conference rooms, plasma screens, wireless web and of course, our beer fridge!

More info