Pagination & Infinite Scroll SEO

Mi az a Pagination SEO?

Pagináció stratégiák SEO szempontból: számozott oldalak, Load More, végtelen görgetés

A pagination (lapozás) az amikor egy nagy tartalom több oldalra van osztva, számozott oldalakkal. Például:

Főoldal: /blog/
Oldal 2: /blog/page/2/
Oldal 3: /blog/page/3/
...
Oldal 10: /blog/page/10/

Hol találkozunk pagination-nel?

  1. Blog - Cikkek listája (10-20 cikk/oldal)
  2. E-commerce kategória - Termékek listája (24-48 termék/oldal)
  3. Fórum - Hozzászólások (50-100 hozzászólás/oldal)
  4. Keresési eredmények - Találatok listája

Miért probléma ez SEO-nak?

❌ Duplicate content - Hasonló tartalom minden oldalon (header, footer, sidebar)
❌ Crawl budget pazarlás - 10 oldal crawlolása ugyanahhoz a kategóriához
❌ Deindexálás veszélye - Rossz canonical beállítás → lapozott oldalak kiesnek az indexből
❌ Elveszett long-tail forgalom - Régebbi cikkek, mélyebb termékek nem indexelődnek

Pagination SEO célja:

✅ Minden fontos tartalom indexelhető
✅ Nincs duplicate content probléma
✅ Optimális crawl budget felhasználás
✅ Jó felhasználói élmény (gyors lapozás)

Google Pagination Kezelés - Történet

2011-2019: rel=“next” és rel=“prev”

Régi ajánlás (2019 előtt):

A Google a rel="next" és rel="prev" HTML link attribútumokat használta a lapozott sorozatok jelzésére.

<!-- Oldal 1 -->
<link rel="next" href="https://example.com/page/2/" />

<!-- Oldal 2 -->
<link rel="prev" href="https://example.com/page/1/" />
<link rel="next" href="https://example.com/page/3/" />

<!-- Oldal 3 -->
<link rel="prev" href="https://example.com/page/2/" />

Ez azt jelezte a Google-nek, hogy ezek az oldalak egy sorozat részei, és egy logikai egységet alkotnak.

2019 március: Google megszünteti rel=“next/prev”

John Mueller bejelentés (Google):

"We no longer use rel=next/prev for pagination. We've been able to index paginated content fine for a while now, even without that markup."

Mit jelent ez?

  • A Google NEM használja többé a rel=“next/prev” jelzéseket
  • A Google automatikusan felismeri a lapozott tartalmakat
  • Az rel=“next/prev” tag-ek nem ártanak, de nem is segítenek

Új ajánlás (2019 után):

  1. Self-referencing canonical - Minden oldal önmagára mutat
  2. Egyedi title/meta minden lapozott oldalon
  3. Crawlolható linkek előző/következő oldalakra
  4. View-all oldal opcionálisan (nagy tartalomnál hasznos)

Pagination SEO Stratégiák (2019 utáni best practice)

Stratégia 1: Self-Referencing Canonical (AJÁNLOTT)

Mi ez?

Minden lapozott oldal önmagára mutat canonical URL-ként.

Implementáció:

<!-- /blog/ -->
<link rel="canonical" href="https://example.com/blog/" />
<title>Blog - 50+ Cikk | Example</title>

<!-- /blog/page/2/ -->
<link rel="canonical" href="https://example.com/blog/page/2/" />
<title>Blog - 2. oldal | Example</title>

<!-- /blog/page/3/ -->
<link rel="canonical" href="https://example.com/blog/page/3/" />
<title>Blog - 3. oldal | Example</title>

Előnyök:

✅ Minden oldal indexelhető - /page/2/, /page/3/ is a Google indexében
✅ Long-tail forgalom - Régebbi cikkek is kapnak organikus forgalmat
✅ Egyszerű implementáció
✅ Google ajánlás 2019 óta

Mikor használd:

  • Blog, ahol a régebbi cikkek is értékesek
  • E-commerce kategóriák, ahol sok termék van
  • Fórumok, ahol mélyebb oldalak is relevánsak

WordPress példa:

// functions.php
function add_self_referencing_canonical() {
    if (is_paged()) {
        $current_url = home_url($_SERVER['REQUEST_URI']);
        echo '<link rel="canonical" href="' . esc_url($current_url) . '" />';
    }
}
add_action('wp_head', 'add_self_referencing_canonical');

Stratégia 2: View-All Oldal

Mi ez?

Egy külön oldal, ahol minden tartalom egyetlen oldalon jelenik meg, lapozás nélkül.

Implementáció:

<!-- /blog/ (lapozott) -->
<link rel="canonical" href="https://example.com/blog/all/" />
<link rel="alternate" href="https://example.com/blog/all/" title="Összes cikk" />

<!-- /blog/page/2/ (lapozott) -->
<link rel="canonical" href="https://example.com/blog/all/" />

<!-- /blog/all/ (összes cikk) -->
<link rel="canonical" href="https://example.com/blog/all/" />
<title>Blog - Összes Cikk | Example</title>

Előnyök:

✅ Egy URL indexelve - Nincs duplicate content
✅ Teljes tartalom egy helyen
✅ Jó felhasználói élmény - Ctrl+F keresés az összes cikk között

Hátrányok:

❌ Lassú betöltés - 100+ cikk egy oldalon
❌ Rossz UX - Túl hosszú oldal
❌ Crawl budget pazarlás - Óriási HTML letöltése

Mikor használd:

  • Kis tartalom (<50 elem)
  • Felhasználói igény (FAQ oldalak)
  • Print-friendly verzió

⚠️ NEM ajánlott:

  • Sok cikk (100+)
  • Nagy képekkel (e-commerce)
  • Gyakran változó tartalom

Stratégia 3: Csak az Első Oldal Indexelése (NEM AJÁNLOTT)

Mi ez?

Minden lapozott oldal az első oldalra mutat canonical-ként, vagy noindex meta tag-et használ.

Implementáció (cross-page canonical):

<!-- /blog/page/2/ -->
<link rel="canonical" href="https://example.com/blog/" />
<title>Blog - 2. oldal | Example</title>

Implementáció (noindex):

<!-- /blog/page/2/ -->
<meta name="robots" content="noindex, follow" />
<link rel="canonical" href="https://example.com/blog/page/2/" />

Miért ROSSZ ez?

❌ Mélyebb tartalmak deindexálva - /page/2/ és utána minden kiesik
❌ Google nem crawlolja a további linkeket (ha noindex)
❌ Elveszted a long-tail forgalmat - Régebbi cikkek nem láthatók
❌ Rossz UX - Felhasználók találnak /page/5/ linket, de Google nem indexeli

Példa probléma:

/blog/ (indexelve) → 10 cikk látható Google-nek
/blog/page/2/ (deindexelve) → 10 cikk NEM látható
/blog/page/3/ (deindexelve) → 10 cikk NEM látható
...

→ 70 cikk NEM indexelődik! ❌

Mikor használd:

🚫 SOHA - Ezt a stratégiát ne használd!

Összehasonlító táblázat

Szempont Self-Referencing View-All Csak Első Oldal
Indexelés ✅ Minden oldal ✅ Egy oldal ❌ Csak első
Long-tail traffic ✅ Maximális ⚠️ Korlátozott ❌ Elveszett
Implementáció ✅ Egyszerű ⚠️ Közepes ✅ Egyszerű
Crawl budget ⚠️ Több oldal ✅ Egy oldal ✅ Kevés
UX ✅ Jó lapozás ❌ Hosszú oldal ✅ Tiszta
SEO hatás ✅✅ Legjobb ⚠️ Jó kis tartalomnál ❌ Rossz
Google ajánlás ✅ Igen (2019+) ⚠️ Opcionális ❌ Nem

Ajánlás:

Használj self-referencing canonical-t!
Ez a legbiztonságosabb és leghatékonyabb megoldás 2019 óta.

Pagination Implementáció Lépésről Lépésre

1. URL struktúra

Jó URL struktúrák:

✅ /blog/page/2/
✅ /blog/page/3/
✅ /kategoria/ferfi-cipok/page/2/
✅ /keresesi-eredmenyek/?page=2

Rossz URL struktúrák:

❌ /blog/#page2 (hash, nem crawlolható)
❌ /blog/2/ (nem egyértelmű, lehet cikk is)
❌ /blog/page/2 (trailing slash nélkül - legyen konzisztens)

WordPress (default):

/blog/page/2/

Shopify:

/collections/shoes?page=2

Custom megoldás (Apache .htaccess):

RewriteEngine On
RewriteRule ^blog/page/([0-9]+)/?$ /blog.php?page=$1 [L]

2. Canonical tag beállítása

Minden lapozott oldalon:

<!-- Oldal 1 -->
<link rel="canonical" href="https://example.com/blog/" />

<!-- Oldal 2 -->
<link rel="canonical" href="https://example.com/blog/page/2/" />

<!-- Oldal 3 -->
<link rel="canonical" href="https://example.com/blog/page/3/" />

PHP példa:

<?php
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;

if ($page > 1) {
    $canonical = "https://example.com/blog/page/{$page}/";
} else {
    $canonical = "https://example.com/blog/";
}
?>
<link rel="canonical" href="<?php echo $canonical; ?>" />

WordPress példa:

// functions.php
remove_action('wp_head', 'rel_canonical'); // Eltávolítjuk az alapértelmezett canonical-t

function custom_canonical() {
    if (is_paged()) {
        global $wp;
        $current_url = home_url(add_query_arg(array(), $wp->request));
        echo '<link rel="canonical" href="' . esc_url($current_url) . '/" />';
    } else {
        // Alapértelmezett canonical
        wp_head();
    }
}
add_action('wp_head', 'custom_canonical');

3. Title tag optimalizálása

Minden lapozott oldal EGYEDI title-t kap:

<!-- Oldal 1 -->
<title>Blog - 50+ SEO Cikk | SEOTudás</title>

<!-- Oldal 2 -->
<title>Blog - 2. oldal | SEOTudás</title>

<!-- Oldal 3 -->
<title>Blog - 3. oldal | SEOTudás</title>

<!-- Oldal 10 -->
<title>Blog - 10. oldal | SEOTudás</title>

PHP példa:

<?php
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;

if ($page > 1) {
    $title = "Blog - {$page}. oldal | SEOTudás";
} else {
    $title = "Blog - 50+ SEO Cikk | SEOTudás";
}
?>
<title><?php echo $title; ?></title>

WordPress példa:

// functions.php
function custom_pagination_title($title) {
    if (is_paged()) {
        global $paged;
        $title .= " - {$paged}. oldal";
    }
    return $title;
}
add_filter('wp_title', 'custom_pagination_title');

4. Meta description

Opcionális - Változtasd meg lapozott oldalakon:

<!-- Oldal 1 -->
<meta name="description" content="50+ részletes SEO cikk kezdőknek és haladóknak. Tanulj technikai SEO-t, on-page optimalizálást és link building stratégiákat." />

<!-- Oldal 2 -->
<meta name="description" content="Blog folytatása - További 10 cikk technikai SEO, on-page és off-page optimalizálásról. 2. oldal." />

Vagy hagyd ugyanazt - Nem kritikus, title fontosabb.

5. Előző/Következő linkek

HTML linkek a navigációhoz:

<!-- Pagination navigáció -->
<nav aria-label="Lapozás">
  <ul class="pagination">
    <li><a href="/blog/">1</a></li>
    <li><a href="/blog/page/2/" aria-current="page">2</a></li>
    <li><a href="/blog/page/3/">3</a></li>
    <li><a href="/blog/page/4/">4</a></li>
    <!-- ... -->
    <li><a href="/blog/page/3/" rel="next">Következő</a></li>
  </ul>
</nav>

Fontos:

✅ Használj <a href> tag-eket (nem JavaScript onClick)
✅ Rel=“next” és rel=“prev” opcionálisak (nem SEO, csak UX)
✅ Breadcrumb minden lapozott oldalon

6. Breadcrumb

Minden lapozott oldalon:

<nav aria-label="breadcrumb">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://example.com/">
        <span itemprop="name">Főoldal</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://example.com/blog/">
        <span itemprop="name">Blog</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name">2. oldal</span>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>

7. Structured Data

CollectionPage schema (opcionális):

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "CollectionPage",
  "name": "Blog - 2. oldal",
  "description": "SEO cikkek listája - 2. oldal",
  "url": "https://example.com/blog/page/2/",
  "mainEntity": {
    "@type": "ItemList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "url": "https://example.com/blog/cikk-11/"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "url": "https://example.com/blog/cikk-12/"
      }
    ]
  }
}
</script>

E-commerce Kategória Pagination

Speciális kihívások

E-commerce-nél a pagination különösen fontos, mivel:

  1. Sok termék - 500-5000+ termék kategóriánként
  2. Szűrők - Ár, szín, méret, márka
  3. Rendezés - Népszerűség, ár, újdonság
  4. Faceted navigation - URL parameter-ek kombinációja

Példa URL-ek:

/kategoria/ferfi-cipok/ (alap)
/kategoria/ferfi-cipok/page/2/ (pagination)
/kategoria/ferfi-cipok/?color=piros (szűrő)
/kategoria/ferfi-cipok/?color=piros&page=2 (szűrő + pagination)
/kategoria/ferfi-cipok/?sort=price&page=3 (rendezés + pagination)

Best Practice E-commerce Pagination-höz

1. Pagination URL struktúra:

✅ /kategoria/ferfi-cipok/page/2/
✅ /kategoria/ferfi-cipok/?page=2

2. Szűrők + Pagination:

<!-- /kategoria/ferfi-cipok/?color=piros&page=2 -->
<link rel="canonical" href="https://example.com/kategoria/ferfi-cipok/?color=piros&page=2" />
<title>Férfi Cipők - Piros - 2. oldal | Bolt</title>

3. Faceted navigation canonical:

Opció A - Self-referencing:

<!-- Minden szűrő + pagination kombináció önmagára mutat -->
<link rel="canonical" href="https://example.com/kategoria/?color=piros&size=42&page=2" />

Opció B - Alap kategóriára (ha túl sok kombináció):

<!-- Szűrők + pagination az alap kategóriára mutat -->
<link rel="canonical" href="https://example.com/kategoria/ferfi-cipok/" />

⚠️ Vigyázz: Opció B esetén elveszted a szűrős oldalak indexelését!

4. Load More gomb:

<button id="load-more" data-page="2">Több termék betöltése</button>

<script>
document.getElementById('load-more').addEventListener('click', function() {
    const page = this.dataset.page;
    
    // AJAX termék betöltés
    fetch(`/kategoria/ferfi-cipok/page/${page}/`)
        .then(res => res.text())
        .then(html => {
            document.getElementById('products').innerHTML += html;
            
            // URL frissítés (History API)
            window.history.pushState({}, '', `/kategoria/ferfi-cipok/page/${page}/`);
            
            // Következő oldal
            this.dataset.page = parseInt(page) + 1;
        });
});
</script>

Előnyök:

✅ Jó UX (nincs oldal újratöltés)
✅ SEO-barát (külön URL-ek)
✅ Crawlolható (fallback pagination linkek)

Infinite Scroll SEO Megoldások

Probléma

Az infinite scroll (végtelen görgetés) JavaScript-tel automatikusan tölt be új tartalmat görgetéskor. Probléma SEO-nak:

❌ Google nem görget - Nem látja a további tartalmakat
❌ Nincsenek URL-ek - Nem lehet megosztani, bookmark-olni
❌ Lassú betöltés - Sok JavaScript futtatás

Megoldás 1: Fallback Pagination

Implementáció:

  1. Felhasználóknak: Infinite scroll
  2. Bot-oknak: Hagyományos pagination linkek

JavaScript detektálás:

<noscript>
  <!-- Pagination linkek JavaScript nélkül -->
  <a href="/blog/page/2/">2. oldal</a>
  <a href="/blog/page/3/">3. oldal</a>
</noscript>

<div id="infinite-scroll-container">
  <!-- Dinamikusan töltött tartalom -->
</div>

Megoldás 2: History API (URL frissítés)

Frissítsd az URL-t görgetéskor:

// Infinite scroll
let currentPage = 1;

window.addEventListener('scroll', function() {
    if (isBottomReached()) {
        currentPage++;
        loadNextPage(currentPage);
        
        // URL frissítés
        window.history.pushState(
            {},
            '',
            `/blog/page/${currentPage}/`
        );
        
        // Title frissítés
        document.title = `Blog - ${currentPage}. oldal | Example`;
    }
});

Előny:

✅ Külön URL-ek minden “oldalnak”
✅ Megosztható, bookmark-olható
✅ Google indexeli az URL-eket

Megoldás 3: View-All Link

Adj meg egy “Összes megtekintése” linket:

<a href="/blog/all/" class="view-all">Összes cikk megtekintése (50+)</a>

Bot-ok követhetik ezt a linket és indexelik az összes tartalmat.

Megoldás 4: Hibrid Megoldás

Kombináld az infinite scroll-t és pagination-t:

<!-- Infinite scroll UI -->
<div id="products"></div>

<!-- Fallback pagination (rejtett, de crawlolható) -->
<div class="pagination" style="display:none;">
  <a href="/kategoria/page/2/">2</a>
  <a href="/kategoria/page/3/">3</a>
  <a href="/kategoria/page/4/">4</a>
</div>

Pagination SEO Checklist

Technikai SEO

  • Self-referencing canonical minden lapozott oldalon
  • Egyedi title tag minden oldalon (tartalmazza az oldalszámot)
  • Crawlolható linkek <a href> tag-ekkel (nem JavaScript)
  • URL struktúra tiszta és logikus (/page/2/)
  • Breadcrumb minden lapozott oldalon
  • NEM használsz noindex-et lapozott oldalakon
  • NEM használsz cross-page canonical-t (ne mutasson minden /page/1/-re)

UX és Sebesség

  • Gyors betöltés - Optimalizált képek, lazy loading
  • Pagination navigáció látható és használható
  • Első/Utolsó oldal linkek megadva
  • Jelenlegi oldal vizuálisan kiemelve
  • Mobil-optimalizált pagination

E-commerce Specifikus

  • Szűrők + pagination kombináció kezelt (canonical vagy self-referencing)
  • Faceted navigation URL parameter-ek logikusak
  • Load More opció (ha van) URL-t frissít (History API)
  • Termék linkek minden lapozott oldalon crawlolhatók

Infinite Scroll

  • Fallback pagination linkek bot-oknak
  • History API URL frissítés görgetéskor
  • View-All link opcionálisan
  • JavaScript nélküli verzió (<noscript>)

Gyakori Hibák

Hiba 1: Noindex lapozott oldalakon

❌ Rossz:

<!-- /blog/page/2/ -->
<meta name="robots" content="noindex, follow" />

Miért rossz:

  • Google nem crawlolja a további linkeket
  • Mélyebb tartalmak (régebbi cikkek) nem indexelődnek

✅ Jó:

<!-- /blog/page/2/ -->
<link rel="canonical" href="https://example.com/blog/page/2/" />
<!-- NINCS noindex -->

Hiba 2: Cross-page canonical

❌ Rossz:

<!-- /blog/page/2/ -->
<link rel="canonical" href="https://example.com/blog/" />
<!-- Minden oldal az első oldalra mutat -->

Miért rossz:

  • /page/2/ deindexálódik
  • Elveszted a long-tail forgalmat

✅ Jó:

<!-- /blog/page/2/ -->
<link rel="canonical" href="https://example.com/blog/page/2/" />
<!-- Self-referencing -->

Hiba 3: Ugyanaz a title minden oldalon

❌ Rossz:

<!-- Minden lapozott oldalon -->
<title>Blog | Example</title>

✅ Jó:

<!-- /blog/ -->
<title>Blog - 50+ Cikk | Example</title>

<!-- /blog/page/2/ -->
<title>Blog - 2. oldal | Example</title>

Hiba 4: JavaScript-only linkek

❌ Rossz:

<button onclick="goToPage(2)">2. oldal</button>

✅ Jó:

<a href="/blog/page/2/">2. oldal</a>

Hiba 5: Hash URL-ek

❌ Rossz:

/blog/#page2
/blog/#page3

Miért rossz:

  • Google nem látja a # utáni részt külön URL-nek
  • Nem crawlolható

✅ Jó:

/blog/page/2/
/blog/page/3/

Következő lépések

Most, hogy megértetted a pagination SEO-t:

  • Auditáld a lapozott oldalaidat
  • Ellenőrizd a canonical tag-eket (self-referencing?)
  • Távolítsd el a noindex-et lapozott oldalakról
  • Adj egyedi title-t minden lapozott oldalnak
  • Implementálj crawlolható pagination linkeket
  • Teszteld Google Search Console-ban
  • Olvasd el a Crawl Budget cikket
  • Nézd meg az Internal Linking útmutatót

Források

Gyakran Ismételt Kérdések

Mi az a pagination SEO?

A pagination SEO a lapozott tartalom (blog cikkek, e-commerce termékek, kategória oldalak) keresőmotor-optimalizálása. A kihívás, hogy a Google ne érzékelje duplicate content-nek a lapozott oldalakat, és megfelelően indexelje őket. A pagination SEO technikák biztosítják, hogy minden fontos tartalom crawlolható és indexelhető legyen, miközben elkerüljük a canonicalizációs problémákat.

Használjam még a rel=next és rel=prev tag-eket?

NEM, a Google 2019 márciusában bejelentette, hogy már nem használja a rel=next/prev jelzéseket. A Google most automatikusan kezeli a lapozott tartalmakat. Helyette ajánlott: (1) Minden lapozott oldal egyedi title/meta description, (2) Self-referencing canonical (minden oldal önmagára mutasson), (3) Crawlolható linkek következő/előző oldalakra, (4) View-all oldal opcionálisan. Az rel=next/prev ma már nem szükséges.

Mi a különbség a self-referencing és cross-page canonical között?

Self-referencing canonical: Minden lapozott oldal önmagára mutat canonical-ként (pl. /page/2/ → canonical: /page/2/). Ez az AJÁNLOTT módszer 2019 óta. Cross-page canonical: Minden lapozott oldal az első oldalra mutat (pl. /page/2/ → canonical: /page/1/). Ez NEM ajánlott, mert deindexálja a többi oldalt és elveszíted a tartalmakat az indexből.

Kell-e noindex a lapozott oldalakon?

NEM! A noindex meta tag használata lapozott oldalakon HIBA. Ha noindex-eled a /page/2/, /page/3/ oldalakat, akkor: (1) Google nem crawlolja a további linkeket, (2) A mélyebb tartalmak (régebbi blogok, több termék) nem indexelődnek, (3) Elveszíted a long-tail keresési forgalmat. Helyette használj self-referencing canonical-t és hagyj minden oldalt indexelhetőnek.

Mi a legjobb megoldás infinite scroll SEO-ra?

Az infinite scroll SEO problémás, mert: (1) Google nem görget, (2) Nincsenek külön URL-ek a blokkokhoz, (3) Lassú betöltés káros Core Web Vitals-nek. Legjobb megoldások: (1) Pagination URL-ek készítése (pl. /page/2/), (2) Load More gomb + dinamikus URL frissítés (History API), (3) View All link megadása, (4) SSR/SSG a teljes tartalomhoz. Vagy kombináld: infinite scroll felhasználóknak + pagination bot-oknak.

Hogyan optimalizáljam az e-commerce kategória lapozását?

E-commerce kategória pagination optimalizálás: (1) Self-referencing canonical minden oldalon, (2) Egyedi title minden laphoz (pl. 'Férfi cipők - 2. oldal | Bolt'), (3) Előző/Következő linkek crawlolhatóak (), (4) Breadcrumb minden oldalon, (5) Structured data (CollectionPage), (6) Load More vagy pagination kombinálása, (7) Szűrők URL parameter-ekben (?color=red) ne ütközzenek pagination-nel (?page=2). Ne használj noindex-et!

Frissítve:
Előző oldal301 vs 302 RedirectsKövetkező oldalCrawl Budget Optimalizálás