Zoekmachine optimalisatie voor AJAX sites

Het is de laatste tijd steeds populairder om sites te voorzien van AJAX technologie, hierdoor werken ze sneller en hoeven niet hele pagina's opnieuw geladen te worden. Toch is het in veel gevallen de vraag of het niet efficiënter had gekund of dat het totaal overbodig is. In sommige gevallen werkt het heerlijk, zoals bijvoorbeeld in GMail, maar in andere gevallen slaat het ook helemaal nergens op. Wat al deze sites met elkaar gemeen hebben is dat de navigatie binnen de site compleet afhankelijk is van AJAX en zoekmachines daardoor niet meer door de site heen kunnen komen.

Daar sta je dan, voor tonnen geïnvesteerd in een schitterende applicatie waar je met een paar klikken de juiste producten ziet verschijnen, maar geen enkele bezoeker vanuit zoekmachines. En dan? Dan moet je op zoek naar een SEO Expert die ervaring heeft met het indexeerbaar maken van AJAX sites.

Hoe werkt het
Eerst een korte uitleg over het basisprincipe van AJAX aan de hand van onderstaande afbeelding:

ajax.png

De blokken stellen pagina's binnen een site voor. De bovenste rij is de normale manier hoe een pagina getoond wordt. Een nieuw stuk content met daaromheen dezelfde pagina. De onderste rij laat zien dat er 1 site is waar met AJAX automagisch de juiste content ingeladen wordt zonder de hele pagina te laden. Dit lijkt heel erg op het 'frames' principe waar je een klein deel van de pagina opnieuw inlaad maar dat is het niet (wel kun je met iframes AJAX vrij goed nabootsen als het gaat om het herladen van kleine stukken in je pagina).

Oplossingen
De pagina's (de gekleurde vlakken) zijn dus onbereikbaar voor de zoekmachines aangezien ze achter een javascript technologie hangen. Dit kun je bijvoorbeeld verhelpen door naast de AJAX structuur een 'normale' platte non-dynamische HTML structuur te plaatsen die prima geïndexeerd kan worden. Je zorgt er dus voor dat het blauwe content gedeelte prima geïndexeerd kan worden en dat als mensen er naar toe gaan ze de volledige pagina te zien krijgen met het blauwe gedeelte als content. Vervolgens kun je op die pagina weer AJAX technologie gebruiken om mensen verder te laten navigeren, MAAR, er moet op die pagina's ook altijd de mogelijkheid zijn om via normale links te navigeren.

Er zijn nog tientallen andere mogelijkheden om dit op te lossen. Je kunt dus een platte HTML structuur aanbieden naast de AJAX pagina's, maar je kunt ook prima je HTML structuur als hoofdsite gebruiken en die voorzien van AJAX technologie. Het meeste simpele voorbeeld hiervan is deze:

<a href="pagina.html" onclick="laadMetAjax('pagina')">Pagina</a>

Gebruikers zonder javascript (zoekmachines) kunnen een normale link volgen en andere bezoekers hebben het voordeel van een AJAX navigatie. Maar ook hier geldt weer: deze oplossing kan niet in alle situaties toegepast worden. Er zijn sites die niet complete content blokken met AJAX inladen maar alleen kleine delen verspreid op de pagina aanpassen. Hier wordt het al een stuk moeilijker aangezien je niet zomaar die content in een platte structuur aan kunt bieden.

Conclusie
Er is altijd wel een oplossing op maat te bedenken, je bent dus niet 100% verloren met een AJAX site. Maar het is wel werk voor een expert aangezien er letterlijk tientallen oplossingen zijn met elk hun voor- en nadelen. Ben je van plan een nieuwe site met deze technologie op te zetten, haal dan eerst een SEO expert in huis en ga dan pas om tafel met de webbouwer.

Click to activate social bookmarks

 
  • Grappig,

    waren wij idd ook al mee bezig geweest....alhoewel niet alles volledig ajax is...maar de bestelling kan je plegen door de afbeelding naar de winkelwagen te slepen!

    http://www.google.nl/search?hl=nl&q=site%3Alaptopleasy.nl&meta=

    Met de hyperlinks erbij, en een sitemap, komen de pagina's toch in Google naarboven...

    Maar zeker een mooi verhaal!

  • Werken met event handlers kan in dit geval wel netter. In meeste AJAX gevallen wil je werken met CSS selectors, zoals ik hier heb uitgelegd:
    http://www.scriptorama.nl/tips-tricks/behaviour-javascript-library

    Javascript libraries Prototype en jQuery (veel gebruikte libraries) hebben hier al ondersteuning voor:
    http://www.scriptorama.nl/linkdump/javascript-libraries-jquery
    http://www.scriptorama.nl/javascript/prototype-en-css-style-selectors

    Zo zorg je er in ieder geval ervoor dat je schone HTML hebt. Oja, scheid altijd je javascript en HTML. Dus stop je javascript in een aparte bestand.

    Daarnaast is het belangrijk te weten dat zoekmachines geen tekst lezen achter de # in URLs. Soms zie je wel eens, vooral bij navigaties, dat URLs in deze vorm bestaan: domein.nl/ajax.php#pagina_vier

    Dit wordt gebruikt zodat je kunt bookmarken. Maar zoekmachines zien slechts ajax.php en de tekst die als initieel wordt getoond. Dus pas daar ook voor op. Sowieso moet je AJAX niet hiervoor gebruiken. Je moet AJAX gebruiken wanneer je verschillende phases hebt binnen een web applicaties. Niet voor aparte pagina's e.d.

  • Flash, javascript of ajax: allemaal een pot nat. Als de belangrijke content niet geindexeerd kan worden en als links niet gevolgd kunnen worden, heb je er vanuit het oogpunt van seo helegaar niets aan. Maar lekker aan het linkbaiten dus andre? 🙂

  • @Andre ik hoop dat veel ontwikkelaars deze posting lezen. AJAX is echt een geweldige technologie die helaas nog veel te weinig wordt toegepast. Belangrijke reden zou zijn (en dus onterecht) dat AJAX sites niet door de Google's op onze aarde zouden worden geindexeerd.

    Toepassing van de techniek grijpt ook in op ander verouderd principe, het aantal pageviews.

  • Belangrijke reden zou zijn (en dus onterecht) dat AJAX sites niet door de Google’s op onze aarde zouden worden geindexeerd.

    Google indexeerd wel degelijk AJAX sites. Het is maar net hoe je de site opzet.