Sökmotoroptimera din Ajax-sida

HashbangDet finns många anledningar till varför man skapar en sida som använder sig utav Ajax. Om du fortfarande vill få alla dina sidor indexerade gäller det dock att du kodar på rätt sätt. I dagsläget finns det två olika tekniker, hashbangs (#!) samt pushState varav den senare är att föredra.

Jag kommer inte ta upp alla fördelar Ajax-baserade webbsidor för med sig utan inlägget kommer endast fokusera på hur du måste göra för att fortfarande få fullgott stöd av indexering av sökmotorer.

Hashbangs (#!)

De flesta har nog sett implementationen av hashbangs på Twitter, det är när adressen innehåller de roliga tecknen (#!). Twitter har dock gått över till både permalänkar och nu senast den nyare varianten pushState vilket jag beskriver längre ned.

Hash-fragment
Allt efter # i en webbadress hör till hash-fragmentet och används oftast för att visa en specifik del på sidan. Vid Ajax-tillämpningar använder man dock denna del för att påvisa olika tillstånd av webbsidan.

Antag du besöker www.example.com/ajax#state=contacts, Ajax-logiken kommer då att extrahera all data ur fragmentet och visa rätt innehåll, i vårt fall troligen en sida med kontaktinfo.
Vad är då fördelen med att skapa dessa länkar med fragment? Jo, fragment hör inte till http-anropet och även om du byter tillstånd, det vill säga ändrar ditt fragment skickas ingen ny data fram och tillbaks till servern med automatik och du spar den tid det i vanliga fall skulle ha tagit att hämta all data.

Eftersom inget anrop görs per automatik för du bygga in hela denna logiken i din Ajax-lösning. Du kan till exempel bara skicka över all data som behöver förändras i lämpligt format (json) och slipper skicka med onödig overhead och filer.

_escaped_fragment_
För att sökmotorer ska kunna indexera din sida måste de dock göra lite extra bearbetning, de byter helt enkelt ut din hashbang mot _escaped_fragment_.
www.example.com/ajax#state=contacts blir www.example.com/ajax?_escaped_fragment_=state=contacts

Tack vare denna översättning av webbadressen kan sökmotorer fortfarande indexera din sida då adressen blir en gilltig url.

Sökmotorerna hämtar alltid sidan som innehar _escaped_fragment_, du måste således hantera alla dessa sidor och returnera en fullgod sida så som du vill att den ska se ut. Förslagsvis exakt så som motsvarande sidan med hashbangs ser ut, i annat fall bryter du mot riktlinjer och visar olika innehåll för användare och sökmotor.

I sökresultatet visar sökmotorerna alltid webbadressen med hashbangs, så dina fina länkar smutsat inte ned i onödan trots all översättnings som har gjorts.

Eftersom Twitter stödjer hashbangs för gamla länkar skull kan vi testa detta på min Twitterprofil.
Hashbangshttps://twitter.com/#!/stefanjanson
Escaped fragment för sökmotorerhttps://twitter.com/?_escaped_fragment_=/stefanjanson
Permalänkhttps://twitter.com/stefanjanson

I exemplet med Twitter måste de två första implementeras, den sista har de lagt till i efterhand och har inget med hashbangs att göra. På din webbsida och eventuell webbplatskarta ska den fina varianten av webbadressen användas. Länkar innehållande _escaped_fragment_ indexeras och följs ej.

Det värsta du kan göra är att returnera en felsida när example.com?_escaped_fragment= anropas, då kommer inget på sidan att indexeras…

 pushState()

En nyare och mer rekommenderad metod för att skapa Ajax-sidor som är anpassade för sökmotorer är att använda pushState() som hör till HTML5. Med denna metod kan man lägga till inlägg i webbläsarens historik-data genom att anropa history.pushState([data för sida], [sidans titel], [webbadress]). Exempel:

var stateObjekt = { minNyckel: "lite data..." };
history.pushState(stateObjekt , "sida 2", "ny-sida.html");

Objektet man kan skicka med till sidan är ett Javascript-objekt som erhålles när popstate-event avfyras. När användaren navigerar tillbaka till ursprungssidan saknas dock detta obekt då man ej skapat något, därför anropar man replaceState() vid första sidan. Hela kedjan blir enligt flödesschemat.

History API
Diagramet visar hur replaceState, pushState samt onPopState anropas

Precis som vid förändring av tillstånd i fallet med hashbangs sker inget http-anrop till servern utan det krävs egen logik för att hämta nödvändig data som ska presenteras. Antar att ni börjar förstå vitsen med Ajax-sidor, nämligen att man gör anropet själv för att hämta data.

Några fördelar med pushState gentemot hashbangs:

  • Du kan byta synlig url till vilken du vill så länge domänen är samma
  • Du kan skicka med ett eget objekt som erhållet vid alla sidbyten
  • Du kan skicka in samma url och det skapas ändå en ny post i historiken

Denna länk ändrar webbadressen m.h.a. pushState men du är fortfarande kvar på samma sida

Progressive enhancement

I båda fallen är det viktigt att koda enligt progressive enhancement. Väldigt kort betyder det att sidan även ska fungera för äldre webbläsare som ej stödjer all denna teknik och man bara adderar olika lager. Du kan till exempel bygga hela sidan som vanligt och sedan med javascript lyssna när någon klickar på en intern länk och då använda pushState() för att minifiera all dataöverföring och på så sätt förhöja besökarens upplevelse. Bara din fantasi sätter gränsen 🙂 Lite kodexempel baserat på jQuery som skickar dig i rätt riktning:

$('a').click(function(e) {
var url = $(this).attr("href");

//Anropa vår ajax-gateway som skapar minimal data
$.getJSON(”ajax-gateway.php”, {getPage: url},function (data) {
//Gör magiskt underverk med vår data
});

window.history.pushState(‘object’, ‘Sidans titel’, url);

//Stoppa vanliga klicket
e.preventDefault();
}

Det var ganska kort och väldigt tekniskt inlägg om två tekniker för att sökmotorer ska kunna indexera din webbsida om den baseras på Ajax. Inget för otekniska SEO-konsulter, rådfråga gärna en erfaren webbutvecklare 😉

Läs gärna min intervju med Västtrafik där de använder hashbangs.

En reaktion på ”Sökmotoroptimera din Ajax-sida

  1. Väldigt bra skrivet och noggrann genomgång!

    Har väl inte så mycket att tillägga egentligen, du verkar ha fått med det mesta; men vill ändå upplysa om ett projekt som jag genomförde på universitetet. På http://ajaxa.se har jag satt upp ett exempel som demonstrerar just escaped fragments. Den kan man jämföra emot http://ajaxb.se som endast förlitar sig på ”vanlig” AJAX.

    Kul att fler intresserar sig för den här ganska okända tekniken! =)

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *