Végtelen görgetés, „Továbbiak” gomb vagy oldalszámozás a terméklistán

Scheo · 2026-10-02 · olvasási idő ~10 perc · Szerző: Schmidt Péter

Mi a különbség a végtelen görgetés, a „Továbbiak” gomb és az oldalszámozás között?

Röviden, a három megoldás abban tér el, hogy ki dönt a következő adag betöltéséről, és hogy az adagnak van-e saját címe. Oldalszámozásnál minden adag külön URL, a „Továbbiak” gombnál a vásárló kattint, végtelen görgetésnél a böngésző magától tölt, amikor a lista aljához közeledsz.

Egy több száz termékes kategóriát senki nem tölt be egyben, mert lassú lenne és mobilon használhatatlan. Darabolni tehát mindenképp kell, a döntés arról szól, hogyan érződik ez a vásárlónak és hogyan látszik a keresőnek.

• Oldalszámozás (1, 2, 3 … oldal). Minden oldal külön betöltés, saját URL-lel, például /ferfi-cipok?page=3. A vásárló tudja, hol tart, és vissza tud térni egy adott oldalra.
• „Továbbiak” gomb (Load more). A lista alján egy gomb, amely ugyanarra az oldalra fűzi a következő adagot. A vásárló irányít, a lábléc elérhető marad.
• Végtelen görgetés. A következő adag magától töltődik be, amikor a lista végéhez érsz. Kevés a súrlódás, viszont nincs természetes megállási pont, és a láblécet gyakran el sem lehet érni.

Mit lát a Google a három megoldásból?

A Googlebot nem görget és nem kattint gombokra, ezért egy terméket akkor talál meg biztosan, ha valódi, href attribútummal ellátott link vezet hozzá egy feltérképezhető oldalról. Oldalszámozásnál ez magától adott, a gombos és a görgetős megoldásnál külön meg kell oldani.

Hivatalosan igazolt. A Google Search Central e-kereskedelmi útmutatója a lapozásról és a fokozatos betöltésről több dolgot is kimond. Minden oldalnak saját URL kell, a # utáni töredék (fragment) nem számít külön oldalnak. Az oldalakat egymás után, sima <a href> linkekkel érdemes összekötni. Ne az első oldalra mutasson minden lapozott oldal canonical címkéje, mindegyik saját magára. Az útmutató azt is leírja, hogy a Google nem szimulálja a felhasználói műveleteket, vagyis a kattintásra vagy görgetésre betöltődő tartalmat nem fogja magától előhívni. A rel='next' és rel='prev' jelölést a Google már nem használja indexelési jelként, ártani viszont nem árt.

Saját tapasztalat. A leggyakoribb hiba, amit webshop-auditokban látunk, hogy a második oldaltól minden lapozott URL noindex címkét vagy az első oldalra mutató canonicalt kap, „hogy ne legyen duplikált tartalom”. Ilyenkor a lista végén lévő termékekhez gyakran semmilyen más belső link nem vezet, így azok csak az oldaltérképből érhetők el, és lassabban vagy egyáltalán nem kerülnek be az indexbe.

Szakmai feltételezés. Az AI-keresők és válaszmotorok robotjainak egy része a JavaScriptet egyáltalán nem futtatja. Ha a terméklistád második adagja csak szkriptből jön létre, ezek a robotok jó eséllyel csak az első adagot látják. A szerver oldalon renderelt, linkelt oldalszámozás ebből a szempontból is a biztonságosabb alap.

Mi történik a visszagombbal, és miért ez dönt?

A jó lista visszalépés után ugyanott mutatja a vásárlót, ahol a terméklapra kattintás előtt volt, ugyanazokkal a betöltött termékekkel. Oldalszámozásnál ezt a böngésző általában magától megoldja, gombos és görgetős listánál neked kell megírni.

Képzeld el a tipikus helyzetet. A vásárló a kategória negyedik adagjában, a 70. termék körül talál valamit, megnyitja, megnézi, nem az igazi, és visszalép. Rossz megvalósításnál a lista az elejére ugrik, és csak az első 24 termék látszik. Ilyenkor ugyanazt a görgetést újra végig kell csinálnia, és sokan inkább bezárják a fület.

Hivatalosan igazolt. A böngészők visszalépéskor két mechanizmussal segítenek. A back/forward cache (bfcache) a teljes oldalt memóriában tartja, ha az oldal alkalmas rá, ilyenkor a dinamikusan betöltött elemek és a görgetési pozíció is megmarad. A web.dev leírása szerint bizonyos dolgok kizárhatják az oldalt ebből, ilyen például az unload eseménykezelő vagy egyes böngészőkben a Cache-Control: no-store fejléc. A második mechanizmus a History API, amellyel a history.replaceState() hívással frissítheted az URL-t betöltés közben, a history.scrollRestoration tulajdonsággal pedig szabályozhatod, hogy a böngésző vagy a saját kódod állítsa vissza a pozíciót.

Saját nézőpont. Szerintünk a visszagomb-élmény többet ér, mint bármilyen görgetési statisztika. A végtelen görgetés bevezetése után a görgetési mélység szinte mindig nő, hiszen több tartalom van, amit görgetni lehet. Ez önmagában semmit nem mond a vásárlásról. A visszalépés viszont a termék-összehasonlítás alapmozdulata, aki pedig háromszor elveszíti a helyét, az nem fog negyedszer is próbálkozni. Ha választanod kell egy szép görgetési görbe és egy hibátlan visszalépés között, az utóbbit válaszd.

Hogyan viselkedik a három megoldás mobilon?

Mobilon a „Továbbiak” gomb a legkiegyensúlyozottabb, mert hüvelykujjal könnyen elérhető, és nem tölt be semmit véletlenül. A végtelen görgetés mobilon a legkényelmesebb az első percben, és a legtöbb gondot okozza a tizedikben.

• Végtelen görgetés. Elérhetetlenné válik a lábléc, benne a szállítási, visszaküldési és kapcsolati linkekkel, pedig mobilon sokan pont ott keresik ezeket. Több száz betöltött termékkép után a lista akadozhat. A gyors pöccintés közben a vásárló könnyen túlgörget azon, amit keresett.
• „Továbbiak” gomb. Kiszámítható, a vásárló dönti el, kell-e még. Érdemes a gomb fölé kiírni, hogy hány termékből hányat lát („48 / 312 termék”), így van tájékozódási pontja.
• Oldalszámozás. Megbízható, de a kicsi, egymás melletti oldalszámok mobilon nehezen eltalálhatók. A nagy „Előző” és „Következő” gomb, mellette egy egyszerű „3 / 13. oldal” felirat sokat javít rajta. Minden lapváltás új betöltés, ezért itt a gyors szerverválasz számít a legtöbbet.

Szakmai feltételezés. Régebbi, kevés memóriájú telefonokon a hosszú, képekkel teli végtelen lista nagyobb eséllyel lassul be vagy töltődik újra a háttérben, ami a visszalépés-élményt tovább rontja. Ezt saját eszközparkodon érdemes kipróbálni, mielőtt döntesz.

Melyiket válaszd katalógusméret és böngészési szokás szerint?

A legtöbb webshopnál a „Továbbiak” gomb a jó alapértelmezés, a mögötte lévő oldalszámozott URL-ekkel. Az oldalszámozás akkor jobb, ha a vásárló célzottan keres és összehasonlít, a végtelen görgetés pedig akkor, ha a lista inkább inspirációs folyam, mint katalógus.

A Baymard Institute nyilvános e-kereskedelmi UX-kutatásai is arra jutottak, hogy a „Továbbiak” gomb a legtöbb terméklistán jobb kompromisszum a másik kettőnél. A saját döntésedhez ezeket a szempontokat érdemes végigvenni.

• Kis kategória, egy-két adagnyi termék. Tedd ki egy oldalra mindet, itt nincs mit dönteni. Hogy hol a határ, azt a termékkártyák mérete és a képek súlya dönti el, nem egy fix szám.
• Közepes, böngészős kategória (ruházat, lakberendezés, ajándék). „Továbbiak” gomb, URL-frissítéssel és állapotmentéssel.
• Nagy, célzott keresésű katalógus (alkatrész, műszaki cikk, B2B termékek). Oldalszámozás, erős szűrőkkel és rendezéssel. Itt a vásárló gyakran azt mondja magának, hogy „a harmadik oldalon volt”, és ehhez kell a fix oldal.
• Képalapú, inspirációs lista (minták, kollekciók, lookbook). Végtelen görgetés elfogadható, de csak oldalszámozott háttérrel és néhány adag után gombra váltva.
• Sok visszatérő, összehasonlító vásárló. Oldalszámozás vagy gomb, végtelen görgetés semmiképp.
• Erős mobilos arány. Gomb, nagy érintési felülettel, és a lábléc mindig elérhető.

Saját tapasztalat. A döntést ritkán a technológia viszi el, sokkal inkább az, hogy a webshop motorja vagy sablonja mit kínál alapból. Mielőtt bekapcsolsz egy végtelen görgetős bővítményt, nézd meg, hogy ad-e saját URL-t az adagoknak, és hogy mi történik visszalépéskor. Sok bővítmény egyiket sem tudja.

Hogyan adj a végtelen görgetés mellé oldalszámozott, kereshető változatot?

Az elv a fokozatos fejlesztés (progressive enhancement). Először egy működő, szerver oldalon renderelt oldalszámozást építesz, saját URL-ekkel és sima linkekkel, és erre ül rá a JavaScript, amely kattintásra vagy görgetésre ugyanezeket az oldalakat fűzi egymás után.

1. Minden adag kapjon saját URL-t. A /ferfi-cipok?page=3 közvetlenül megnyitva a harmadik adagot adja vissza, szerver oldalon renderelve, JavaScript nélkül is.
2. A „Továbbiak” gomb legyen valódi link. Például <a href='/ferfi-cipok?page=3' class='lista-tovabb'>Továbbiak</a>. A robot ezt követi, a szkripted pedig elfogja a kattintást, és helyben fűzi hozzá az adagot.
3. Frissítsd az URL-t, ahogy a vásárló halad. Amikor egy új adag a képernyő közepére ér, hívd meg a history.replaceState(null, '', '/ferfi-cipok?page=' + oldal) sort. Itt a replaceState a jobb választás a pushState helyett, különben minden adag külön lépést kér a visszagombon.
4. Mentsd az állapotot. Mielőtt a vásárló elhagyja a listát, írd el, hány adag volt betöltve és hol állt a görgetés, például sessionStorage.setItem('lista', JSON.stringify({ oldal: oldal, y: window.scrollY })). Visszalépéskor, ha a bfcache nem őrizte meg az oldalt, ebből töltsd vissza az adagokat, és csak utána görgess a helyére.
5. A canonical mutasson önmagára. A ?page=3 canonicalja a ?page=3, ne az első oldal.
6. Ne noindexeld automatikusan a lapozott oldalakat. Ha egy oldal gyenge, azt a szűrők és a kategóriastruktúra rendezésével oldd meg, ne a lapozás elvágásával.
7. Kezeld külön a szűrőket. A szűrő- és rendezési kombinációk könnyen végtelen URL-teret nyitnak. A lapozás a fő kategória-URL-en legyen kereshető, a szűrt nézetek indexelését külön döntsd el.
8. Adj megállási pontot. Végtelen görgetésnél három-négy automatikus adag után válts át gombra, így a lábléc elérhető marad.

Ha a lista legelején ott van a kis összesítő („312 termék, 1-48 látható”), és a lista alján egy hagyományos oldalszám-sáv is, akkor a vásárló és a robot ugyanazt a térképet kapja.

Hogyan teszteld a megvalósítást élesítés előtt?

Négy gyors próba többet elárul, mint bármelyik automatikus riport. Mindegyik néhány perc, és egy fejlesztő nélkül is elvégezhető.

• Nyisd meg a ?page=5 URL-t inkognitó ablakban, kikapcsolt JavaScripttel. Ha üres vagy az első oldalt kapod, a robot is azt kapja.
• A Search Console URL-ellenőrzőjében nézd meg a renderelt HTML-t, és keresd meg benne a következő oldalra mutató linket.
• Futtass le egy feltérképezést JavaScript-renderelés nélkül, és nézd meg, hogy a kategória utolsó termékei felbukkannak-e.
• Valódi telefonon görgess le a negyedik adagig, nyiss meg egy terméket, lépj vissza. Ugyanazt a terméket kell látnod a képernyő ugyanazon pontján.

Mit mérj a bevezetés után?

A bevezetés után a lista hatását a terméklap-megnyitások, a listáról induló kosárba rakások és a visszalépés utáni viselkedés mutatja meg. A görgetési mélység legfeljebb kiegészítő adat, mert a megoldás jellegéből adódóan nő.

• Visszalépés után ugyanott jelenik meg a lista mobilon és asztali gépen, több böngészőben is (kézi próba, havonta megismételve).
• A listanézetből megnyitott terméklapok aránya, eszköz szerint bontva.
• A listáról érkező munkamenetekben a kosárba rakás aránya.
• Visszalépés után a listáról kilépők aránya. Ha nő, a visszagomb-élmény romlott.
• Egy saját esemény a „Továbbiak” kattintásra vagy az adagbetöltésre, adagszámmal, hogy lásd, hányadik adagig jutnak el a vásárlók.
• A lábléc linkjeinek (szállítás, visszaküldés, kapcsolat) kattintásai, a régi állapothoz képest.
• Search Console-ban az indexelt termékoldalak száma és a lapozott URL-ek feltérképezési állapota.
• A listaoldalak Core Web Vitals értékei mobilon, különösen az INP és a CLS, mert az utólag betöltött adagok gyakran tologatják a tartalmat.
• JavaScript-hibák a listaoldalon, mert egy elakadt betöltés csendben levágja a lista végét.

Szakmai feltételezés. Az eredményt egy hasonló időszak adataival vesd össze, és adj neki legalább néhány hetet, mert a lista változása a szezonális kereslettel keveredik. Ha teheted, A/B tesztként futtasd, és egyik mutató javulása se jelentse önmagában a sikert. A lista átállítása önmagában nem garantál több eladást, akkor segíthet, ha a vásárló gyorsabban megtalálja, amit keres.

Források és további olvasnivalók

• Google Search Central, Pagination, incremental page loading, and their impact on Google Search
• Google Search Central Blog, Infinite scroll search-friendly recommendations
• Google Search Central, JavaScript SEO basics
• MDN Web Docs, History API és history.scrollRestoration
• WHATWG HTML Living Standard, Session history and navigation
• web.dev, Back/forward cache
• Baymard Institute, e-kereskedelmi terméklista UX-kutatások
• Nielsen Norman Group, Infinite Scrolling