Cara Optimasi Pagination untuk SEO

Pagination mempengaruhi bagaimana Google menemukan dan mengindex konten Anda. Implementasi yang benar memastikan semua halaman dapat diakses dan diindex.

Jenis Pagination

Traditional Pagination

Page 1 | Page 2 | Page 3 | ... | Page 10
URL structure:
/blog/
/blog/page/2/
/blog/page/3/
Standard navigation numbers.

Load More Button

Halaman awal load 10 items
Click "Load More" → tambah 10 items
Content stays on same URL
URL tidak berubah.

Infinite Scroll

Scroll down → auto load more content
No user action needed
Popular di social media
Challenging for SEO.

Rel Next/Prev (Deprecated)

Historical Context

Old implementation:
<link rel="prev" href="/page/1/">
<link rel="next" href="/page/3/">
Status: Google ignored since 2019.
No longer necessary, but not harmful.

Current Approach

Google now:
- Crawls paginated pages individually
- Treats each as standalone page
- Uses internal links to discover
Focus on good internal linking.

Best Practices

1. Crawlable Links

<!-- Good: Standard links -->
<a href="/blog/page/2/">2</a>
<!-- Bad: JavaScript-only navigation -->
<span onclick="loadPage(2)">2</span>
Google needs HTML links to crawl.

2. Self-Referencing Canonical

<!-- Page 2 canonical -->
<link rel="canonical" href="https://example.com/blog/page/2/" />
Each paginated page = own canonical. Don't all point to page 1.

3. Unique Titles

<!-- Page 1 -->
<title>Blog - My Site</title>
<!-- Page 2 -->
<title>Blog - Page 2 - My Site</title>
Prevent duplicate title issues.

4. Unique Meta Descriptions

<!-- Page 1 -->
<meta name="description" content="Latest blog posts..." />
<!-- Page 2 -->
<meta name="description" content="Blog posts - Page 2..." />
Or use dynamic descriptions.

Pagination HTML Structure

Numbered Pagination

<nav aria-label="Blog pagination">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="/blog/">1</a>
    </li>
    <li class="page-item active">
      <span class="page-link">2</span>
    </li>
    <li class="page-item">
      <a class="page-link" href="/blog/page/3/">3</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="/blog/page/4/">Next</a>
    </li>
  </ul>
</nav>

First/Last Links

<nav aria-label="Pagination">
  <a href="/blog/">« First</a>
  <a href="/blog/page/4/">‹ Previous</a>
  <span>Page 5 of 20</span>
  <a href="/blog/page/6/">Next ›</a>
  <a href="/blog/page/20/">Last »</a>
</nav>

Infinite Scroll SEO

The Problem

Issues dengan infinite scroll:
- No page URLs untuk Google
- Can't access content directly
- JavaScript dependency
- No crawlable links
Bad for SEO out of the box.

Solution: Pushstate

// Update URL saat scroll
window.addEventListener("scroll", function () {
  if (userScrolledToNewSection) {
    history.pushState(null, null, "/page/2/");
  }
});

Static Fallback

Implement:
1. Infinite scroll for JS users
2. Traditional pagination for crawlers
3. <noscript> fallback
Google gets traditional pages.

Example Implementation

<!-- For users: infinite scroll -->
<div id="posts-container" data-infinite-scroll>
  <!-- Posts load here -->
</div>
<!-- For crawlers: pagination links -->
<noscript>
<nav class="pagination">
<a href="/page/2/">Page 2</a>
<a href="/page/3/">Page 3</a>
</nav>
</noscript>

Load More Button SEO

Basic Implementation

<div id="posts">
  <!-- Initial posts -->
</div>
<button id="load-more" data-page="2">Load More</button>
<noscript>
<a href="/page/2/">View More Posts</a>
</noscript>

SEO-Friendly Version

// Load more with pushState
document.getElementById("load-more").addEventListener("click", function () {
  const page = this.dataset.page;
// Fetch new content
fetch(
/api/posts?page=${page})
.then((response) => response.json())
.then((data) => {
// Append content
appendPosts(data.posts);
  // Update URL
  history.pushState(null, null, `/page/${page}/`);

  // Update button for next page
  this.dataset.page = parseInt(page) + 1;
});
});
Category/Archive Pages
Indexing Strategy
Options:
1. Index all paginated pages
2. Index only page 1, noindex rest
3. View-all page (if manageable)
Recommendation:
Index all if content is unique on each.
View-All Option
Single page with all items:
/products/all/
Considerations:

Page size (don't exceed 2MB)
Load time
User experience

Only for smaller collections.
Common Issues
Duplicate Content
Problem:
Page 1, 2, 3 have similar meta descriptions
Solution:

Unique titles per page
Unique descriptions
Self-referencing canonicals

Orphan Pages
Problem:
Deep paginated pages not linked
Solution:

Link to first/last pages
Show range (1, 2, 3... 8, 9, 10)
XML sitemap inclusion

Parameter URLs
Bad: /blog/?page=2
Good: /blog/page/2/
Clean URLs are better for:

Users
Sharing
Crawling

WordPress Pagination
Default Pagination
<?php the_posts_pagination(array(
    'mid_size' => 2,
    'prev_text' => '‹ Previous',
    'next_text' => 'Next ›',
)); ?>
Custom Pagination
function custom_pagination($pages = '', $range = 2) {
    global $paged;
if (empty($paged)) $paged = 1;

echo '&lt;nav class=&quot;pagination&quot;&gt;';

if ($paged &gt; 1) {
    echo '&lt;a href=&quot;' . get_pagenum_link($paged - 1) . '&quot;&gt;Previous&lt;/a&gt;';
}

for ($i = 1; $i &lt;= $pages; $i++) {
    if ($i == $paged) {
        echo '&lt;span class=&quot;current&quot;&gt;' . $i . '&lt;/span&gt;';
    } else {
        echo '&lt;a href=&quot;' . get_pagenum_link($i) . '&quot;&gt;' . $i . '&lt;/a&gt;';
    }
}

if ($paged &lt; $pages) {
    echo '&lt;a href=&quot;' . get_pagenum_link($paged + 1) . '&quot;&gt;Next&lt;/a&gt;';
}

echo '&lt;/nav&gt;';
}
Pagination Checklist
Structure:
☐ Clean URLs (/page/2/, not ?page=2)
☐ Crawlable HTML links
☐ First/Last page links
☐ Reasonable number per page
SEO:
☐ Self-referencing canonicals
☐ Unique titles per page
☐ Unique meta descriptions
☐ Include in XML sitemap
Infinite Scroll/Load More:
☐ Fallback for crawlers
☐ pushState URL updates
☐ Static URLs accessible
☐ noscript alternative
Testing:
☐ Test with JS disabled
☐ Check crawlability (Screaming Frog)
☐ Verify in GSC Coverage
☐ Test deep page access
Kesimpulan
Pagination SEO simple: pastikan setiap halaman memiliki URL unik, crawlable HTML links, dan self-referencing canonical. Untuk infinite scroll, sediakan fallback static pages.