Paginerat produktsortiment utan duplicerat innehåll

Genom att använda paginering har du möjlighet att dela upp ett stort produktsortiment på ett antal sidor för att sidan ska ladda snabbare. En potentiell fallgrop för den här typen av lösning är att den kan resultera i dupliceringar på sajten.

Duplicerat innehåll är innehåll som återfinns på flera URL:er, antingen internt på samma domän eller externt på någon annan domän. Exempel på duplicerat innehåll kan vara produktbeskrivning som återfinns på flera typer av produkter på sajten, alternativt produktbeskrivning som återfinns externt på en leverantörs sajt. Vi vill till varje pris undvika duplicerat innehåll på vår sajt och vi har tidigare skrivit om riskerna med duplicerat innehåll.

För att hantera paginering och samtidigt undvika duplicerat innehåll, rekommenderar vi dig att fundera över följande tre lösningar:

1. Rel=”canonical”

Om du vill att din Visa alla-sida ska användas som landningssida, och du vill att den här specifika sidan ska indexeras och visas i Googles sökresultat, rekommenderar vi denna lösning för dig. Lägg in rel=”canonical” i <head> avsnitten på de paginerade sidorna. Kom ihåg att länka internt till visa alla-sidan i toppmenyn.

2. Rel=”next” och rel=”prev”

Genom att använda attributen rel=”next” och rel=”prev”, beskriver du förhållandet mellan sidorna för Google, vilket gör att Google förstår att sidorna hänger ihop som en serie.

Du har ditt produktsortiment uppdelat på följande URL:er:

http://www.example.com/artikel-del1.html

http://www.example.com/artikel-del2.html

http://www.example.com/artikel-del3.html

Lägg till attributet <link rel=”next” href=”http://www.example.com/artikel-del2.html”> på sida1 http://www.example.com/artikel-del1.html som pekar mot nästa sida i serien.

Genom attributet talar du om för Google att sidan hänger ihop med kommande sida 2. Attributet ska ligga i <head> sektionen.

På sida 2 http://www.example.com/artikel-del2.html använder du attributet <link rel=”prev” href=”http://www.example.com/artikel-del1.html”> <link rel=”next” href=”http://www.example.com/artikel-del3.html”> som visar att sidan är en fortsättning av sida 1 och att nästkommande sida i serien är sida 3.

På sida 3 http://www.example.com/artikel-del3.html räcker det med att du lägger till <link rel=”prev” href=”http://www.example.com/artikel-del2.html”> som visar att sida 3 är en fortsättning av sida 2.

3. Infinite Scroll

Du har även möjlighet att använda dig utav en Infinite Scroll-lösning där din Visa Alla-sida laddas progressivt. Genom att tagga upp viktiga element och låta sidans innehåll hämtas progressivt, underlättar du hämtningen för hela sidan och presenterar en rikare browser upplevelse för besökaren. På en kategorisida kan det i praktiken se ut som att när du scrollar ner på sidan och slutligen kommer längst ner på sidan, hämtas det in fler produkter.

Innan du börjar:

Dela upp det totala sid-innehållet i subsidor (subsidorna måste vara åtkomstbara även när Javascript är blockerat)
Bestäm hur mycket innehåll du vill inkludera i vardera sida
Säkerställ att innehållet inte överlappas i serien

Såhär gör du:

Strukturera dina URL:er på ett sätt som gör dem läsbara av Googles robot
Bra exempel: example.com/fun-items?lastid=567
Mindre bra exempel: example.com/fun-items#1
Implementera pagineringsvärden rel=”next” och rel=”prev” i <head>-taggen
Implementera replaceState/replacePush på sidan
TESTA!