AJAX for user experience og fall back

Det er i dag ekstremt vigtigt at have et responsivt site, der virker flydende og lækkert da dagens brugere er ekstremt kritiske og forlanger en høj standart.
En måde at løse dette på er med AJAX, som gør at du kan loade dele til en side via fx JSON og opdatere din side uden at den skal reloades, blinke og gå til toppen af siden igen.

Du kan derved sikre dine brugere kan klikke på dine links med yderligere information og få en flydende behagelig og god oplevelse og derved blive længere tid på siden.

Problematikken i dette er at hvis alle disse data læses ind via AJAX og javascript så vil Google, Bing og andre søgemaskiner ikke finde dine data. Det er yderst problematisk da dette giver dig hjælp til at blive fundet og besøgt.

Dette er fordi at søgemaskinernes crawlers (dem der finder din side) ikke har javascript og derfor ikke læser din side med dette information.

Heldigvis er der en måde hvorpå du kan få både søgemaskinerne til at finde din side og alle dine data, samtidigt med du kan levere en god user experience / brugeroplevelse til dine besøgende.

Som eksempel kan vi se nærmere på min side med Kompetencer, her har vi en liste over mine kompetencer som udvikler.

Her skal på sigt være mulighed for at kunne få mere information når man klikker på den enkelte kompetence.
Ovenover den tekst der allerede er på siden skal der vises detaljer for kompetencen som udvikleren Laurits West har. Så man skal kunne se et piechart over hvor jeg har erfaringen fra, hvornår den sidst er brugt, og hvor mange års erfaring jeg har med den.
Der skal laves to dele fordi der skal laves en til søgemaskinerne og en til mine brugere.

Løsning 1: Søgemaskiner.
Man laver en URL-baseret løsning der leverer det samme resultat og som viser det på siden. Her vil siden blive reloaded, blinke og ikke give en specielt god oplevelse, men fungere fordi den passer til søgemaskiner.

Løsning 2: Laves via AJAX og JSON data, og Google pie chart til at visualisere det.
Her laves samme kode, men med javascript på, som vil køre inden linket køres. Derfor vil du være sikker på at hvis din browser ikke forstår javascript (søgemaskinen) så sendes du til backenden og så oprettes siden korrekt alligevel. Hvis din browser har javascript og det er enabled, så vil AJAX lave et request til din server, modtage noget JSON data, og tegne dit doughnut-diagram uden at siden reloades.
Et lille tip kan så være at sætte noget tæller på, fordi ellers kan du ikke se hvor mange gange nogen har klikket på noget specielt.

Således kan du lave din side dynamisk og lækker for dine besøgende, samtidigt med at søgemaskinerne kan læse dit indhold.