Bemästra din sidbläddring

En vanlig företeelse på webbsidor idag är någon form av sidbläddring. Det kan handla om kommentarer till en bloggpost såsom denna, eller en serie slides, en lång forum-tråd som delas upp på flera sidor med mera. Gemensamt är dock att alla sidor hör ihop och man vill signalera detta.

Det finns 3 sätt att lösa detta på varav det första inte kräver någon kunskap alls, du överlåter helt enkelt allt åt sökmotorn och förlitar dig på att den förstår att sidorna hör ihop. Detta sätt är absolut inte smartast, men ej heller sämst, något jag tar upp i exemplet längst.

Sidbläddring hos Google
Sidbläddring hos Google, ett vanligt förekommande fall att ange sidnummer.

2. Visa allt

Den första lösningen går ut på att du har en sida som kan visa allt innehåll från alla övriga sidor som ingår i gruppen. I fallet med kommentarer till ett blogginlägg skulle det således innebära att alla kommentarer visas på en och samma sida. För en forumtråd skapar man en sida som kan visa samtliga inlägg i tråden och så vidare. Det fungerar i vissa fall, i andra fall är det helt värdelöst. Här gäller sunt förnuft.

Att påpeka för sökmotorn att sidan som visar samtliga 1000 foruminlägg från tråden ska visas istället för en delmängd är inte alltför smart, dels blir laddtiden troligen lång, sidan blir enormt stor och besökaren hittar ändå inte vad som söks för att just det specifika inlägget drunknar i övriga 999 inlägg.

3. Link-taggen

html 4.01En smartare lösning är att använda <link>-taggen som introducerades i HTML 4.01 och ange relationen mellan sidorna. En relation anges genom attributet rel och sedan anges källan som vanligt i attributet href. I vårt fall är relationerna next samt prev det som är utav intresse, de talar helt enkelt om vilken nästa samt föregående sida är i hänsyn till sidan man har länken på.

Antag att vi har en grupp sidor som presenterar en vanlig Power Point-slide om hundar.
Den har 4 sidor och användaren har kommit till sidan 2, i HTML-sidans <head>-tagg lägger vi in vår speciella <link>-tagg för att ange relationen mellan sidorna så sökmotorerna enkelt kan förstå detta och slipper gissa. Följande kod borde synas i huvudet förutsatt man befinner sig på sidan 2.
<link href="http://www.example.com/presentation-hundar-1-av-4" rel="prev" />
<link href="http://www.example.com/presentation-hundar-3-av-4" rel="next" />

På första samt sista sidan kan du inte lägga in båda dessa taggar, det finns ingen sida före sidan 1 och det finns såklart ingen sida efter vår sista sida. Befinner du dig på sista sidan har du bara en relation till sidan efter (next)  och för sista sidan finns bara en föregående sida (prev).

Se upp

Som jag berättade i början av inlägget var en av lösningarna för sidbläddring helt enkelt att förlita sid på sökmotorerna och inte implementera någon speciell teknik alls. Jag har själv ett exempel på en sida som jag äger och utvecklar där jag lite klantigt nog blockerade sökmotorerna från att indexera mer än 1:a sidan. I mitt specifika fall hade det dock inte hjälp att göra den enkla lösningen, alternativ 1.

Sedan flera år har jag lagt in stöd på en av mina större sidor för att minimera duplikat innehåll genom att ange kanonisk sida. Det är ett kraftfyllt verktyg för att tala om för sökmotorn vilken av alla eventuella snarlika sidor som gäller. Min sida använder dels olika kampanj-länkar för att spåra när trafik kommer via mina mobil-appar, speciella nyheter o.s.v  men sedan länkar även besökarna till sidan. För att slippa få länkkraften utspridd samlar jag den enkelt till sidan som är rätt, trots alla extra parametrar som ibland anges på länkarna. Mer om just den problematiken finn i inlägget om kanonisk sida här ovan.

När jag sedan skulle införa tekniken för sidbläddring valde jag att jobba med relationer och ange dessa med <link>-taggar. På min webbsida där jag lyckades ha kvar mitt klantiga fel 8 månader kan besökarna skriva kommentarer till objekt. Tidigare visade jag bara de 30 senaste, nu ville jag dock att man även skulle komma åt alla äldre inlägg varav jag införde sidbläddringen.

Allt verkade frid och fröjd, min kod beräknade antal sidor rätt, den skrev ut relationerna helt korrekt och jag la upp förändringen på skarpa driftmiljön. 8 månader senare, jag hade fortfarande inte sett några tendenser till fel men jag ramlade över en artikel som tog upp vanliga misstag när man använde kanoniska sidor, något jag använder mig utav.

Det var då det slog mig, jag har kvar samma kanoniska sida oavsett om man stod på 1:a sidan eller ej. Min webbadress för varje objekt är enligt formen:
www.example.com/objekt/

När jag införde sidbläddring la jag på en parameter som talar om vilken sida man är på bland alla kommentarer, befinner man sig på sidan 3 blir adressen således:
www.example.com/objekt/?sida=3

För den som förstått allt resonemang ovan samt vet vilka tekniker jag använder kan säkert redan förstå mitt fatala misstag. Jag uppdaterade ju aldrig koden som skriver ut min kanoniska sidan.
Om vi återgår till sidan och håller oss till sidan 3, då såg min kanoniska sida ut enligt följande felaktiva format.
<link rel=”canonical” href=www.example.com/objekt/” />

Korrekt vore såklart att även ha kvar parametern för sidbläddring, rätt kod blir således:
<link rel=”canonical” href=www.example.com/objekt/?sida=3″ />

Så vad tror du misstaget medförde?
Sökmotorerna indexerade helt enkelt bara objekt-sidan och de 30 senaste kommentarerna som visas på den sidan. Även om jag anger med <link>-taggen att det finns fler sidor och dessutom har vanliga <a>-taggar anger jag ju på övriga sidor att sidan ej ska visas utan att objektets startsida bara ska visas. Jag har rullat ut min fix i skrivande stund och det blir spännande se hur många av alla nya sidor som kommer att indexeras.

Hur har ni sett att sökmotorer jobbar och presenterar sidor som hör ihop med sidbläddring?

Kommentera

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