Hoe maak je AJAX zoekmachine vriendelijk? Een voorbeeld

Het is helemaal niet zo moeilijk om AJAX-websites zoekmachine vriendelijk (en tegelijkertijd ‘accessible’) te maken. Het enige wat je daarvoor nodig hebt, is de juiste filosofie. En die filosofie bestaat al.

Het probleem

Neem bijvoorbeeld de onderstaande AJAX-link:

<a href="javascript:jah('/code-examples/content.html','plop');">
Klikmij AJAX loader no .1</a>

<div id="plop">dit verandert voor de eerste keer</div>

Wanneer een bezoeker op "klikmij" klikt, zal het javascript jah.js het bestand content.html ophalen en tonen binnen de <div> met als id "plop". Ziehier de broncode in actie:

Klikmij AJAX loader no. 1

Wanneer deze call echter de enige manier is om de inhoud van het bestand content.html te bereiken, mag je er terecht voor vrezen dat een zoekmachine het bestand content.html niet zal opnemen in de index. Er gaan overigens geruchten dat Google reeds in staat zou zijn om javascript onclick event handlers te volgen, maar pin jezelf daar niet op vast.

Een oplossing

Het idee om dit probleem te tackelen is zo oud als Methusalem, althans, voor internetbegrippen :) In een artikel op evolt.org uit 2002 werd er al op gewezen dat je JavaScript links op verschillende manieren toegankelijk kunt maken, bijvoorbeeld simpelweg door het onclick event te gebruiken in combinatie met een return false statement:

<a href="/code-examples/content.html"
 onclick="javascript:jah('/code-examples/content.html','plop2');
 return false">Klikmij AJAX loader no. 2</a>

<div id="plop2">dit verandert wederom</div>

En hier het praktijkvoorbeeld:

klikmij AJAX loader no. 2

Zie je het verschil als je met je muis over deze link hovert? In je statusbalk zie je de normale url verschijnen, terwijl in het eerste voorbeeld javascript:jah('/code-examples/content.html','plop'); stond. Dit tweede voorbeeld is dus een gewone link die eenvoudig door een zoekmachine gevolgd kan worden, terwijl menselijke users met een javascript-enabled browser de AJAX-implementatie kunnen blijven gebruiken.

Unobtrusive JavaScript

Nu kun je anno 2007 niet meer volstaan met broncode cluttering door bijvoorbeeld <a> tags te vervuilen met onclick events. Zoals in de comments terecht werd opgemerkt door Arjan en Tri bij de eerste versie van dit artikel, zijn de bovenstaande voorbeelden verouderd. Daarom heb ik een unobtrusive versie toegevoegd met behulp van JavaScript behaviour.

Zelfs de HTML broncode is daarin weer helemaal zoals het was: alle Javascript/AJAX is netjes opgeborgen in externe bestanden!

<a href="/code-examples/content.html">
Klikmij AJAX loader no .3</a>

<div id="plop">dit verandert voor de laatste keer!</div>

En hier het laatste praktijkvoorbeeld:

Klikmij AJAX loader no. 3

De achterliggende filosofie

Het idee achter dit hele verhaal is even simpel als doeltreffend, zoals in 2002 geformuleerd werd en nu nog steeds relevant is:

"The solution is to think about the functionality the JavaScript will provide and how to accomplish the same task without it. Get it working without first, then add JavaScript to enhance it for JavaScript enabled browsers."

Reacties

door Arjan Eising, 2007 04 30

Ik vind deze methode (http://andrescholten.nl/index.php/ajax-bookmarks-back-buttons-en-deeplinks/ ) beter, en ook het gebruik van de event handler attributen is een beetje achterhaald. Beter is het om unobtrusive JavaScript te gebruiken. Het feit dat het uit 2002 komt is juist een reden aan de actualiteit te twijfelen, nietwaar?

door Arjan Eising, 2007 04 30

Link werkt niet perfect, misschien handig om bij het reactie formulier te vermelden op welke manier ik het beste een link kan gebruiken?

door monchito, 2007 04 30

@Arjan: is inderdaad een hele elegante oplossing! Maar op zich is dat het punt van mijn artikel hier niet. Ik heb bewust voor iets heel bekends en herkenbaars gekozen :)En is het reactieformulier zo beter?

door Tri Pham, 2007 04 30

Dit kan nog beter met CSS selectors icm een Javascript lib om crossbrowser compatability te hebben. Zo heb je clean code en scheid je opmaak van code. Hierover heb ik een tijd geleden geschreven:http://www.scriptorama.nl/tips-tricks/behaviour-javascript-library http://www.scriptorama.nl/javascript/prototype-en-css-style-selectors

door monchito, 2007 04 30

Hmm, behaviour is idd interessant.. Ik zoek het uit en maak er nog een extra paragraaf voor dit stuk van. Lijkt me een nuttige aanvulling!

door monchito, 2007 04 30

Done :)

door Jan-Joris-Jaap-Joop, 2007 04 30

Zo zo!

door Wouter, 2007 05 01

Tis me allemaal maar wat hoor.

door BSDjunk, 2007 05 01

AJAX == GAY!

door Mike, 2007 06 03

Ik gebruik het bovenstaande JAH script. Kwam het tegen via je blog. Maar krijg het niet voor elkaar om javascripts die worden geinclude in de hoofdpagina de herincluden in de externe div die word ingeladen met JAH. Want enkele scripts, waaronder swfobject functioneren niet in de extern ingeladen bestanden. Kan iemand me hiermee helpen? Alvast bedankt!

door monchito, 2007 06 03  

Weet niet of ik je vraag gioed begrepen heb, maar in principe laad je met jah.js een extern html-bestand in. De eigenschappen van dat bestand zijn dan in principe ook extern, dus daarin zou je dan opnieuw swfobject in moeten laden, lijkt mij.

door Mike, 2007 06 03

Wat je zegt klopt precies. Maar dat is ook precies hetgene wat me niet wil lukken; het opnieuw inladen van die scripts...het lukt me wel met een simpel scriptje voor bijvoorbeeld een alert. Maar met swfobject niet.

door monchito, 2007 06 04  

Ik zou zelf zeggen: gewoon includen die hap, maar misschien is het wel wat lastiger... Heb je het al op gathering of tweakers nagevraagd?

door Mike, 2007 06 05

Yep, ook daar heb ik het geprobeerd en die thread loopt nog steeds. Blijkt een lastig gevalletje...

door monchito, 2007 06 05  

Puur uit luiheid en interesse: kun je de url van die thread ff posten? :)

door Mike, 2007 06 06

Ofcourse :) http://gathering.tweakers.net/forum/list_messages/1223730

door mariam, 2007 08 23

halo waar hebben jullie het over??