Om håndtering af søgemaskiner og dybe links i AJAX applikationer

I AJAX applikationer håndteres brugerens interaktion løbende, indhold genereres og indsættes I siden dynamisk. Dette er en vigtig del af et moderne responsivt user interface. Men når brugere ikke længere klikker sig rundt mellem egentlige sider, kræver det en ekstra indsats, at balancere url’er, funktionalitet og indekserbart indhold til søgerobotterne.

Dette indlæg er en oversigt over mulighederne, og skulle gerne give dig et forspring I dit næste AJAX projekt.

Sidetilstande og url’er der kan bogmærkes
Reelt set er der to vigtige ting vi gerne vil opnå:

  1. At kunne skifte browserens url uden at det resultere I en tur omkring serveren.
  2. At kunne sammenholde disse url’er med bestemt indhold og funktionalitet.

I moderne browsere giver history.pushState() fuld kontrol, så vi kan styre browserens history og skifte url’er direkte på klienten. Dette kan være en vilkårlig (men gyldig) url indenfor det domæne man nu måtte være på. Med onpopstate, der er et event der kører I browseren, kan man så lytte på om url’er ændre sig og loade relevant indhold og funktionalitet.

I de fleste tilfælde har man dog behov for, at understøtte flere browsere, og bliver derfor nødt til at benytte location.hash og onhashchange eventet, som begge er godt udbredt. Konceptet er at man benytter dokumentets hashfragment (ankerpunkt), til at emulere url- strukturer pg parametre.

Det kunne se således ud:
site.com/search.aspx#?term=foo&filter=bar

Eller denne lidt pænere:
site.com/search.aspx#/foo/bar/or/what/ever

Så længe det er en gyldig url, kan man bare selv fastsætte formatet, og hvis man inkludere Ben Almans plugin jQuery Hashchange, er man også kørende I Explorer 6 & 7.

Efterfølgende er det egentligt bare at opdatere location.hash, mens man lytter efter ændringer med onhashchange og eksekverer relevant indhold. Med andre ord linker man nu til relevante dele af sin applikation, og tillader brugere at gemme bogmærker.

Hjælp til håndtering af url’er
Selvom det bestem er muligt at håndtere denne url-til-indhold sammenhæng manuelt, så bliver det hurtigt ret tidskrævende. Heldigvis er der en del kode-biblioteker, der kan hjælpe med netop den del.  Ben Almans udvidede BBQ Plugin, er et eksempel på, at tage hashchange et skridt videre. Her er der bl.a. tilføjet jQuery.param og jQuery.deparam metoder, der kan hjælpe med at fremsøge og mappe dele af url’en.

Her er yderligere et par eksempler: Simpel og  Avanceret.

Der findes også mere omfattende frameworks så som Backbone.js og den lidt lettere Spine.js, der med deres route modul kan sammenholde url med indhold/funktionalitet. Ydermere giver de mulighed for at udnytte history.pushState() I nye browsere, mens der faldes tilbage på location.hash I de ældre – lyder det som en win-win?

Her er et eksempel på routes I Backbone.js:

var Workspace = Backbone.Router.extend({
routes: {
"help":                 "help",    // #help
"search/:query":        "search",  // #search/kiwis
"search/:query/p:page": "search"   // #search/kiwis/p7
},
help: function() {
...
},
search: function(query, page) {
...
}
});

Indeksering af indhold med Google Hashbang #!
Én ting er at få denne AJAX funktionalitet op at køre, noget andet er samtidig at bibeholde sider, der giver mening for søgemaskinerne.

Hvis man har mulighed for den moderne tilgang, hvor der skiftes almindelige url’er med pushState(), skal man bare sikre sig at serveren også kan rendere indhold på basis af den samme url. Det kan meget vel involvere noget differentiering på useragenten.

Men er man ude I at skifte hashfragment, bliver det lidt mere kompliceret, den er nemlig ikke normalt en del af kommunikationen med serveren. Google er heldigvis klar over det og tilbyder løsningen med en såkaldt hashbang notation – #!. Her fortæller man Google at denne ‘ajax-url’ er indeksérbar, og at serveren kan generere et ‘billlede’ af det indhold der modsvarer. Således vil crawleren lave yderligere et request, med hashfragmentet som en parameter.

Med url’en fra tidligere eksempel vil følgende ske:
site.com/search.aspx#!/foo/bar/or/what/ever

Vil resultere I endnu et request, nemlig dette:
site.com/search.aspx?_escaped_fragment_=/foo/bar/or/what/ever

Serveren skal dernæst håndtere det ekstra request og generere relevant indhold.

Og dét er faktisk dét, du har nu hashbang url’er I Googles index, der linker direkte ind I AJAX applikationen.

Brug af redirects
Der må gerne benyttes redirects til at hjælpe med serverdelen, det kan nogle gange gøre tingene nemmere. Så længe crawleren på et eller andet tidspunkt lander på en side med relevant indhold, giver det ingen problemer.

Crawleren sender eksempelvis denne request:
site.com?_escaped_fragment_=/foo/bar

Serveren kunne så redirecte til dette relevante indhold:
site.com/foo/bar

Redirect 301 eller 302?
Hvis man benytter 301 ‘Moved Permanently’ er det target url, der ender I Googles index, og hvis man benytter 302 ‘Moved Temporarily’ vil det være #! url’en.

For det meste ønsker man nok 302’ere, så brugeren havner direkte I AJAX oplevelsen. Men er der fokus på funktionsnedsatte brugere, og/eller afvikling uden Javascript, så kunne det modsatte være tilfældet.

Her er den officielle info på Googles AJAX crawling. Den indeholder også nogle fifs til, at få genereret de nødvendige HTML snapshots.

Vertica har netop lanceret en løsning
Der gør brug af ovenstående teknikker. En dynamisk søgning på e-handels sitet optimera.dk giver mulighed for effektivt at fremsøge og filtrere produkter – uden irriterende sideskift.

Samtidig giver det mulighed for at bogmærke eller sende links til favorit søgninger o.lign. Her er f.eks. søgt på stiksav og filteret indenfor en bestem kategori.

optimera.dk/da-dk/soeg#!/Term=/stiksav/Category=/Save

Kategorier: AJAX

Tagged as: ,

Skriv et svar

Udfyld dine oplysninger nedenfor eller klik på et ikon for at logge ind:

WordPress.com Logo

Du kommenterer med din WordPress.com konto. Log Out / Skift )

Twitter picture

Du kommenterer med din Twitter konto. Log Out / Skift )

Facebook photo

Du kommenterer med din Facebook konto. Log Out / Skift )

Google+ photo

Du kommenterer med din Google+ konto. Log Out / Skift )

Connecting to %s