On many blogs, SEO professionals say AJAX is evil in SEO, just in the same way Flash is*. But ask a Web2.0 designer/developer, AJAX is so cool that people will love it and stay on your site seeing the quick interactive visual feedback without any page reloading. Let’s look deeper into the possibility of making SEO and AJAX BFF.
[*Author’s note: This was originally written and posted online on December 12, 2007. A lot has changed from then and now how most people do AJAX (It mostly jQuery), and how Flash used to use to run. But still the rest of the blog post has good information still applicable today.]
What is AJAX?
Keeping the technical language to a minimum, the main observable benefit you have in running AJAX is having dynamic content load on your page without having the whole page to reload on a new URL. This gives you the benefit to only reload certain parts of a page making the resources load to a minimum aside from having it visually appealing to the user.
Problem 1: SEO Issues with Dynamic Content of AJAX
Search engines crawl websites using bots that are also called crawlers or spiders. These are nothing but programs that visit webpages on the Internet looking at all links and further visiting every valid link found crawlable. And content on the page is read and associated to the URL crawled.
Having that behavior, search engines will only be able to read the initially loaded content when the URL of the page is loaded. Any other content that loads by AJAX requiring a user click or some other event may not be read by the search engines.
Probably a good example of an AJAX site would be the Instant Domain Search. For every letter you type, new content is loaded. It loads fast and is appealing to people as they do not need to wait for a full page reload. Although all generated new content cannot be read by search engines.
Problem 2: Search Engine Crawling Problems of AJAX
Since search engines crawl websites looking at every link found on a page, search engines may not be able to check links going to other pages of an AJAX webpage. First of all, AJAX content does not need to reside on a different URL, it will have the same URL as how it loaded.
Normally a link going to a normal webpage may look like this:
- <a href=”path/page.html”>text to click on</a>
And AJAX powered sites may have links in various forms like:
- <a href=”#content-parer”>text to click on</a>
- <a href=”#” onclick=”functioname(content-parer);”>text to click on</a>
Having your href value not a valid webpage will just be disregarded by search engines, even if you do have a way to let search engines see the dynamically loaded content, this will still be on the same URL where it has to really be separated.
For my example of this, let me show you the
Problem 3: Placing All Content On One Page Dilutes Keyword Focus
[***Author’s Note: Since this was blog post was originally written in 2007, much has changed since then. In 2009 Google engineers: Kathrin Probst and Bruce Johnson announced the proposed headless browser at SMX East 2009. Since this was not yet implemented on the main crawler, those that wanted to participate in the testing of this, was recommended to add an exclamation point after the pound symbol in the URLs. Like in this format: domain.com/folder/file.ext#!ajax-parers and this would signal to fire up the headless browser. And you can see several big websites applied this in their URLs such as Twitter and Facebook during that year.]
The SEO Solution to the AJAX Problems
Solution 1: Serve Alternative Content
And for these alternative links, these should lead to actual pages on their own URLs that would load the same content as what would load in the AJAX links.
This way you please users with the visual appeal of AJAX and you still give alternative navigation and content that search engines can read and index. Where, if people get to visit these URLs, they will still be drawn to the AJAX pages.
Solution 2: Using Hijax – Graceful Degredation of AJAX
- Pointless link – Bad!
<a href=”#” onclick=”window.open(‘help.html’); return false;”>contextual help</a>
- Using the DOM – Better.
<a href=”help.html” onclick=”window.open(this.getAttribute(‘href’)); return false;”>contextual help</a>
<a href=”help.html” class=”help”>contextual help</a>
[****Author’s Note: I was being discrete then with my association of this site in the past for whatever reason. Anyway, I will be open about it this time. I made the site AjaxOptimize and called my technique SEFAJAX.]
Some Side Story…
This blog post is an exact copy of a blog post I have written for another agency in the past. This former agency appears that they have moved in a different direction and has been concentrating on a different side of the online marketing business that they decided to remove not only my blog post, but the whole blog in general. Since this is still a good source of information, I am reviving the blog post being the author of the post since it has been offline for a year already.
The blog post has been a great resource for many other people, and I would say it was also the gateway to my first major speaking engagement when former Google Engineer Vanessa Fox who is best known for her work with Google’s Webmaster Tools, linked to my post as a resource when Jane and Robot used to exist. (Jane and Robot was an old website of Vanessa Fox together with Microsoft Program Manager Nathan Buggia). When I met Vanessa at PubCon in 2009 she asked me if I am willing to speak at a session at O’Reilly Found, a conference that didn’t push through, but lead me to SMX the same year and was on a session panel on CSS, AJAX and Web 2.0 technologies and how to do SEO. It was my first speaking engagement at a major SEO conference and almost didn’t make it, since I literally came in late and was super dizzy since exactly a day before SMX, I just flew in from the Philippines after speaking at SEMCon in Metro Manila. Walking in late in the conference, I had 7 minutes left to get my part done. I did my best to make the most out of it but still feels bad up to today coming late to that session.
– Benj Arriola